Запускаем фрактальные снежинки на HTML5 Canvas

[developer]

так напомнило сайты 1996 го года с зачатками JS и поддержкой прозрачных GIF

[shaman4d]

Да да и еще флешовые часики — оч модна было.

[kichik]

Может быть, вы еще и в Деда Мороза не верите? :)

Это просто интересный пример, а не призыв украшать сайты елочками и падающими снежинками ;) Что касается древности, то лично у меня такое ощущение, что в ближайшие год-два html5 c canvas, svg и javascript предстоит быстрыми темпами пройти путь от таких простых поделок до чего-то более мощного (см. например, предыдущий пост).

Поэтому мы еще неоднократно увидим примеры с генерацией графики в различных вариациях. Лет 5-7 назад было много примеров по генерации плазмы, огня и прочих эффектов на flash, а еще сильно раньше различные такие эффекты писали на native code (c/c++) и работали с видео-карточками через прерывания. «HTML5» предстоит быстро пройти аналогичный путь.

[bitek]

А вот, кстати, те эффекты, про которые вы говорите.

Нужен webGL (у меня работает с Chome) + аппаратная графика.

Кстати, подобные эффекты в HTML5 пока тормозят из-за очень долгой работы canvas.putImageData в некоторых браузерах.

[be3_max]

вы что?! даже у гугла снежинки — bit.ly/eZ2KEQ

[AndrewMayorov]

Это программистский прикол, не всем понятно.

[ertaquo]

Имхо в createSnowflake надо вместо
var y = window.pageYOffset;
написать
var y = window.pageYOffset — rand(window.innerHeight);
А то сразу после старта они как-то неравномерно падают…

[kichik]

Можно увеличить таймер на запуск новых снежинок.

[Ctacok]

Пожалуйста, ненадо.

[jMas]

Снежинки — не сильно эффектный пример…

[kichik]

А что было бы интересно вам?

[jMas]

Например, статья о создании векторного редактора на HTML5. Это было бы куда более полезней…

[Levsha100]

Добавить туда самолетик, который будет сбивать снежинки =)

[Mairon]

[offtop]Вкладки IE ужасны.[/offtop]

[rednaxi]

кому как

[SKYnv]

а это так задумано?

[SKYnv]

снежинки кстати и под эту картинку залетают и под форму ввода

[kichik]

Да, я в коде прописал canvas.style.zIndex = '-10'; соответственно canvas располагается внизу, иначе он будет перекрывать все другие элементы (и события на них).

[Sannis]

Неужели с этим нельзя ничего сделать? :)

[kichik]

В данной реализации это аналогично тому, что вы бы поверх всей страницы разместили обычную картинку или flash.

[Sannis]

Обидно.

Эффект красивые, не вижу причин для всеобщего возмущения, который наблюдается :)

Есть досадный баг с определением загрузки в первом вложенном условии, по крайней мере в FF и Crome, при загрузке скрипта через

<script type="text/javascript" async="true" src="http://static.example.com/js/fractal_snow.js"></script>

Попробую пофиксить :)

[Sannis]

Итак, в случае использования загрузки скриптов с помощью async=«true» приходится использовать событие «load», так как DOMContentLoaded уже успевает пройти.

В начало функции snow() добавляем:

    window.removeEventListener('DOMContentLoaded', snow, false);
    window.removeEventListener('load', snow, false);

А условие в начале скрипта заменяем на

  if (document.createElement('canvas').getContext) {
    if (document.readyState === 'complete') {
      snow();
    } else {
      window.addEventListener('DOMContentLoaded', snow, false);
      window.addEventListener('load', snow, false);
    }
  } else {
    return;
  }

[TheShock]

почему бы не запускать много маленьких канвасиков?

[kichik]

Можно и так :)

[TheShock]

на самом деле, подозреваю, это единственный правильный вариант в данном случае. но да, рисовать надо скриптом.

[NeOn4eG]

Да, z-index: -10;

[dimoclus]

Это такой завуалированный подарок энергетикам на новый год?

[NeOn4eG]

Вы про 100%-ю загрузку процессора? :)

[dimoclus]

Про нее самую.

[gionet]

Раньше дети в садах снежинки из салфеток вырезали и наклеивали иногда на окна…

Прошло немного лет.
Теперь они выросли, и стали делать снежинки из кода… в блоге конторы, которая делает ОС «окна»

[olololog]

Chromium 10.0.613.0 (69331) на Ubuntu 10.10 падает при попытке выполнить код.

[kichik]

Подозреваю, что это баг. Браузер не должен падать при выполнении js-кода, в крайнем случае должна выдаваться ошибка кода, либо если проблема с производительностью, браузер должен предлагать остановить код/убить вкладку.

[olololog]

Выпадает только один процесс — в котором выполняется эта вкладка. Возможно, падение связано с тем, что я выполняю код из консоли — яхз. Вот скриншот.

[kichik]

Думаю, самое правильное: отправить в Google баг. Дополнительно можно попытаться локализовать в коде, что именно вызывает ошибку.

[Sannis]

У вас в последней строке ошибка со скобками, может быть из-за неё?

--- } ()); 
+++ })(); 

[kichik]

Если выкинуть все содержимое, будет вот так:

(function () {
} ());

[Sannis]

Вы правы, не знал что так можно.

[Sannis]

Chrome 8.0.552.224 beta на openSUSE 11.3 летит нормально :)

[savostin]

С наступающими!

[gymlyg]

я так понимаю начинается предновогодняя тематика…
Авторы — пишите! Чем больше напишете — тем больше шанс что это сможет повторить большее количество пытающихся))
фрактальная снежинка — рулез ( хотя я бы предпочел скрещивающиеся мечи или морской штурвал )
Народ — не скупитесь на творчество и проявите проф снисходительность — праздник же!

[ApmeM]

Если долго смотреть на снежинки их становится все меньше. Походу тут нет проверки за выход их вправо-влево, и со временем они все уходят и не возвращаются.

Если после этого обновить размеры экрана — они все снова вываливаются как тут и были.

Предлагаю добавить как-то так:

if (flake.x > canvas.width+flake.size || flake.x < -flake.size) {
    flake.y = 0;
    flake.x = rand(canvas.width);
}

[kichik]

ctrl+shift+i

[Magir]

А у yahoo.com до сих пор снежинки на логотипе флешем отрисовываются)

[Neir0]

Со времен плавающих рыбок, мой кот не занимал компьютера на такое долгое время.

[Zaych361]

Хех, как запустить в Chrome, что разобраться не могу…

[kichik]

ctrl+shift+i, дальше консоль

[Vertex]

Нененененененененененененененененененеееееееет!!! Не надо! Убейте их!!! Сукка… Лихие 90-ые возвращаются!

[rixaman]

а мне например интересен чисто код,
для повышения скилла

да и фракталы люблю, как идею сделать красивой зависит уже от вас самих.