Comments 18
Это снег, а не звёзды.
ps: Добавьте вращение туда-сюда будет веселее.
ps: Добавьте вращение туда-сюда будет веселее.
А почему звёзды выглядят как лампочки с опухшим цоколем?
Чтобы получилось больше похоже на звезды из Стар Трека — их нужно расстягивать от центра:
Как-то так
Как жаль, что хабр уже не технический сайт. Многие люди пишут не понимая о чем они вообще говорят(или понимают и намеренно пишут плохие коментарии). Извините за не скромный вопрос, вы что собрались растягивать? Нельзя было нормальный комментарий написать?
Такой эффект достигнуть можно разными способами, по старинке и по новому:
1. совсем по старому — на том же паскале можно было привязать видеопамять в массив и там было легко такое делать.(для еще более старого — извиняюсь, тут я не компетентен, в 80-е я еще не кодил)
2. по старому просто не чистили цветовой буффер, и рисовали на нем черный прозрачный квад для затухания следа, получалось так же(это если d3d или ogl). Метод хорош тем, что позволяет сделать «шлейфы» за чем угодно, но для обычного рендеринга не подходит, т.к. нет очистки буфера.
3. Для 2д можно просто градиентную линию рисовать
4. Для 3д можно рисовать просто треугольники с вершиной у которой цвет 1,1,1,0 с соответствующим смешиванием( я про ту которая ближе к центру)
5. еще вариант сделать это на пиксельном шейдере, но тут не уверен, как быстрее будет, все же 10 лет графикой не занимаюсь
p.s. хотелось бы подобных комментариев, если нет реализации(у меня ее нет, к сожалению, за это прошу простить)
p.p.s. никого обидеть не хотел, просто хочу чтобы хабр был как раньше.
p.p.p.s. на js это делается легко через webgl, если вы сомневаетесь, что я в теме, могу лично для вас сделать.
Такой эффект достигнуть можно разными способами, по старинке и по новому:
1. совсем по старому — на том же паскале можно было привязать видеопамять в массив и там было легко такое делать.(для еще более старого — извиняюсь, тут я не компетентен, в 80-е я еще не кодил)
2. по старому просто не чистили цветовой буффер, и рисовали на нем черный прозрачный квад для затухания следа, получалось так же(это если d3d или ogl). Метод хорош тем, что позволяет сделать «шлейфы» за чем угодно, но для обычного рендеринга не подходит, т.к. нет очистки буфера.
3. Для 2д можно просто градиентную линию рисовать
4. Для 3д можно рисовать просто треугольники с вершиной у которой цвет 1,1,1,0 с соответствующим смешиванием( я про ту которая ближе к центру)
5. еще вариант сделать это на пиксельном шейдере, но тут не уверен, как быстрее будет, все же 10 лет графикой не занимаюсь
p.s. хотелось бы подобных комментариев, если нет реализации(у меня ее нет, к сожалению, за это прошу простить)
p.p.s. никого обидеть не хотел, просто хочу чтобы хабр был как раньше.
p.p.p.s. на js это делается легко через webgl, если вы сомневаетесь, что я в теме, могу лично для вас сделать.
если нет реализации
Я же дал ссылку на реализацию в своём комментарии и даже её подчеркнул, чтобы виднее была (на хабре оригинальные ссылки не супер-заметные). Никаких ВебГл, постэффектов, игр со специфическими девайсами, только геометрические фигуры.
Растягивать равнобедренные трехугольники. Вот код генерации стартовых параметров "звезды":
generatePosition: function (center) {
// на каком расстоянии от центра звезда "стартует"
// мы не хотим, чтобы она появлялась прям в центре приложения,
// потому смещаем в бок центр
var distance = atom.number.random(Math.round(center.x/10), center.x);
// определяемся в каком направлении точка будет лететь
this.angle = atom.math.degree( atom.number.random(1, 360) );
// смещаем сначала на расстояние, а потом вертим вокруг центра
this.from = center.clone()
.move(new Point(distance, 0))
.rotate(this.angle, center);
this.sin = Math.sin(-this.angle);
this.cos = Math.cos(-this.angle);
},А вот по сути код, который отвечает за пересчёт точек трехугольника каждый кадр:
recount: function () {
var
sin = this.sin,
cos = this.cos,
f = this.from,
p = this.shape.points,
progress = atom.number.limit(this.progress - 2, 2);
p[0].x = f.x + progress * cos / this.tailFactor;
p[0].y = f.y - progress * sin / this.tailFactor;
p[1].x = f.x + progress * cos;
p[1].y = f.y - progress * sin;
p[2].x = p[1].x + 2 * sin;
p[2].y = p[1].y + 2 * cos;
},Как жаль, что хабр уже не технический сайт. Многие люди пишут не понимая о чем они вообще говорят
Если бы не занимались оскорблениями, то могли бы перейти по ссылке и посмотреть 100 строк кода реализации. Потому жду от вас извинений)
Спасибо за пояснения. Если вы читали мой комментарий, то:
Я правда не хотел оскорбить, приношу свои извинения, если вас это задело. Возможно стоило вставить кусочки вашего кода, чтобы пояснить идею(вот как в предыдущем комментарии).
И возможно терминология ввела меня в заблуждение. По ссылке я попал на демо и там исходного кода не было, посмотрел его, сопоставил с комментарием и сделал выводы.
Надеюсь вы меня поняли. С вашим комментарием все стало гораздо понятнее, спасибо.
p.p.s. никого обидеть не хотел, просто хочу чтобы хабр был как раньше.
Я правда не хотел оскорбить, приношу свои извинения, если вас это задело. Возможно стоило вставить кусочки вашего кода, чтобы пояснить идею(вот как в предыдущем комментарии).
И возможно терминология ввела меня в заблуждение. По ссылке я попал на демо и там исходного кода не было, посмотрел его, сопоставил с комментарием и сделал выводы.
Надеюсь вы меня поняли. С вашим комментарием все стало гораздо понятнее, спасибо.
Всё хорошо) Просто это ведь Джаваскрипт, там легко увидеть код, просто правой кнопкой и "посмотреть код" (и в некоторых браузерах даже подсветится), я не думал, что есть смысл его дублировать сюда
Спасибо, что пояснили, я за 19 лет так и не научился(Даже не думал смотреть, там же он будет минифицировал после сборки)
А если без шуток, если что-то хотите показать, лучше показывать код. Без обид, но никто не будет в девтулс копаться чтобы разобрать, что вы сделали. Да и это правило хорошего тона, если что-то хотите показать, покажите код. Искать его на гите/npm/devtools никто не будет.
Вот вы в комментарии привели пример кода и это хорошо, всем сразу стало понятно о чем речь. Вы со мной согласны?
А если без шуток, если что-то хотите показать, лучше показывать код. Без обид, но никто не будет в девтулс копаться чтобы разобрать, что вы сделали. Да и это правило хорошего тона, если что-то хотите показать, покажите код. Искать его на гите/npm/devtools никто не будет.
Вот вы в комментарии привели пример кода и это хорошо, всем сразу стало понятно о чем речь. Вы со мной согласны?
Так сделайте Хабр как раньше! Возьмите и напишите свое, хоть что-то с 2014 года. Покажите пример свой «правильной» статьи.
Автор показал свою реализацию, ему спасибо, забрал в свою коллекцию.
Чем больше чиатю Хабр, тем больше убеждаюсь, что все «старички» тут поделились на 2 лагеря — те кто идут в ногу со временем и продолжают писать интересные и годные статьи и те, кто ноют, что «раньше трава была зеленее». Знаете как сделать правильно — так покажите пример!
Автор показал свою реализацию, ему спасибо, забрал в свою коллекцию.
Чем больше чиатю Хабр, тем больше убеждаюсь, что все «старички» тут поделились на 2 лагеря — те кто идут в ногу со временем и продолжают писать интересные и годные статьи и те, кто ноют, что «раньше трава была зеленее». Знаете как сделать правильно — так покажите пример!
Поправил проект под эту логику (после upd.), спасибо за идею!
О! Скринсейвер «сквозь вселенную»! Своими руками, зачет!
Снег на JS вернулся в 2020!
мне больше нравился тот, что был в:
mov ax, 13h;
int 10h;
(любимый видеорежим), он тогда как раз помещался в память(хотя с emm386 возможно было и больше, но я не знаю)
самый класс было написать звездное небо и повесить его на прерывание таймера и наблюдать потом в vc и nc. это было круто! эх, детство
mov ax, 13h;
int 10h;
(любимый видеорежим), он тогда как раз помещался в память(хотя с emm386 возможно было и больше, но я не знаю)
самый класс было написать звездное небо и повесить его на прерывание таймера и наблюдать потом в vc и nc. это было круто! эх, детство
Мне кажется, что стоит перенести методы Star в прототип. При описании подобных объектов с помощью class методы автоматически добавляются в прототип, а объявление методов напрямую в this неплохо так режет производительность. При каждом создании новой звезды эти методы объявляются по-новому, что делает моему старому задыхающемуся ноутбуку плохо.
UFO just landed and posted this here
Sign up to leave a comment.
Создание эффекта быстрого полета сквозь космос (или падающего снега) за 10 минут на p5.js