Анимация падающего снега на Canvas эффективнее анимации на DOM в несколько раз

[kozyabka]

Во всех трёх областях на демо-страничке (http://spmbt.github.io/snowfalls/jSnowMultiWin.htm) снежинки жутко тормозят. Может подобное лучше делать на WebGL? Флеш в браузере играет тысячи частиц без потери фпс(60), js должен тоже уметь.

[dprotopopov]

снежинки и прочее подобное я изредка делал для рекламных банеров на adobe flash.
тех требования площадок ограничивали загрузку процессора и размер кода.
самый простой способ рисовать снежинки используемой мной — сделать png картинку с прозрачным фоном и гонять её 3-4 инстанса разных размеров поверх/позади основной картинки ролика без дополнительных эффектов прозрачности — по размеру баннера и загрузке процессора не было проблем.

[nikitasius]

Почему-то все пытаются прямо таки засыпать экран снегом.
Хотя намного красивее (особенно для сайта с меню в шапке), когда канва находится сразу после открытия body, имеет размер 100% и позицию fixed.

  <canvas id="canvas" width="100%" height="100%" style="position: fixed"> 
  </canvas>

Тогда снег падает за элементами, которые расположены в центре и по бокам. В итоге картинка более приятна глазу так как нет замусоренности в центре и ничего не отвлекает от навигации.
Под спойлером «затертый» скриншот:

Заголовок спойлера

[vintage]

Дайте лучше ссылку на сайт. Что это за самопиарофобия?

[nikitasius]

Сайт не мой, я его у себя размещаю и периодически плюшки добавляю. Представляет из себя «тяжелое наследие» php, обвязанное nginx'ом и местами фишки на jsp.

Увы, мне не платят столько, чтобы я его пиарил:)

Основная суть в том, что снег на вкус и цвет моих фломастеров стоит пускать по краям. И лучший вариант — это сайт с вертикальным оформлением. И слой у снега должен быть под все остальными слоями. Чтобы не сильно резали глаз пропадающие снежинки — по бокам от контента ставим png'шки, у которым прозрачность от 0 до 100% слева направо и справа на лево (соотв. левая и правая сторона).

Пример сходу на jsfiddle накидать вам не могу, так как не дружу с css и использую решения и их модификации.

[vintage]

Оптимизировал, починил и приукрасил css версию: codepen.io/anon/pen/xZqbrJ?editors=110

[kafeman]

Перспективы кодирования — можно написать конструкторы, которые давали бы объект для DOM или Canvas по настройкам. Конструкторы могли бы писать разные авторы. С таким подходом организован проект на ХабраАДМе (Гитхаб): github.com/clubadm/snowmachine.

Выложил прототип. Алгоритм движения снежинок не зависит от способа отрисовки.

В настоящий момент доступен только CanvasBackend. Как писал kozyabka выше, стоит попробовать WebGL. В случае со snowmachine, для этого достаточно написать WebGLBackend, а сам алгоритм останется прежним. В случае со скриптами spmbt, придется править код полностью, и потом вручную его мержить.

Можно написать и какой-нибудь экзотический бекенд, нужный только для одного конкретного проекта. Так планируем поступить мы на geekadm.ru.

Демо: jsfiddle.net/9qxyq2vj (берется последняя версия с Github'а, который на это не рассчитан, поэтому могут быть проблемы)

[dom1n1k]

Я возможно что-то не понимаю, но ведь если на всю страницу наложить canvas, то сайт станет нефукционален? Все кнопки-ссылки будут некликабельны.

[Sirion]

pointer-events: none, например

[spmbt]

Да. Но если всё, что надо, поднять над канвасом, то всё будет снова нормально. Случай, когда поле для снега покрывает всё окно (как модальные окна) — в модификации скрипта с комарами. Не канвас, но то же самое.

[TheRabbitFlash]

мой коллега попросил оставить вот эту гифку с визуализацией алгоритма, который он разработал в 2009 году и усовершенствует. Реализации прошли путь от Паскаля, через Action Script до Javascript'a. На днях он соберётся с духом и опубликует в песочнице полную статью.

[kafeman]

Ждем. Если НЛО пропустит статью в песочницу, то вышлю инвайт.

[Sirion]

Думаю, НЛО и сам пригласит.

[homm]

Что вы называете битрейтом? Я так и не понял.