Хороший… Плохой… Главное — у кого ружьё!
6,4
рейтинг
23 сентября 2013 в 23:44

Разработка → Rainyday.js

image

Для всех, кому прохладного дождя за окном в эти дни мало, Marek Brodziak сделал забавное демо на js + canvas (демо #1, демо #2 — и сразу предупреждаю, что заработать может не во всех браузерах), которое имитирует капли дождя на стекле. Своей целью разработчик ставил добиться лучшей плавности анимации капель.

Для достижения наилучшего эффекта погружения смотреть демо рекомендуется предварительно открыв в соседней вкладке raining.fm.
image
Всем любителям шуток про безысходность это изображение определенно должно понравиться

Изображение состоит из нескольких слоев: оригинального изображения фона, масштабированного под размер окна браузера и размытого при помощи Stack Blur Algorithm (Mario Klingemann); среднего — невидимого — слоя, на котором отрисовываются отражения капель; верхнего слоя, который используется для отрисовки самих капель. Автор пишет, что подобный подход позволил сделать код скрипта более читабельным и заметно увеличил производительность.

Рендеринг дождевых капель состоит из рандомизации формы капли, которая заключается в аппроксимации окружности.«Движок» анимации состоит из трех модулей: «дождя», «гравитации» и «следа». Первый отвечает за размещение капли случайного радиуса на канвасе, второй — за перемещение капли по вертикальной оси, третий — за отрисовку следа перемещенной капли.

В подробностях про внутреннее устройство можно прочитать в статье автора с разъяснениями. В новой версии автор планирует добавить для капель проверку на столкновения.

Github
Владимир Маслов @HotWaterMusic
карма
165,7
рейтинг 6,4
Хороший… Плохой… Главное — у кого ружьё!
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (62)

  • +12
    Отлип только когда капли начали сталкиваться.
  • +8
    Капли проходящие сквозь друг друга убивают реалистичность (
    • +12
      На Сафари pacman получается
      image
      • +3
        Ещё бы он срабатывал как pacman…
    • +1
      Может просто протереть монитор? )
      • 0
        Вариант от deNULL надежнее
  • +1
    посоны, сделайте скринсейвер, а?
    • +3
      Осенью достаточно в настоящее окно посмотреть что б похожую картину увидеть.
      • +6
        Не хватает такого же вида из окна…
        • +3
          У меня как раз дождь сейчас за окном
    • +1
      Лет 10 назад делал скринсейвер с показом HTML на основе WebBrowser контрола. Поискал, увы, исходников не нашёл. Думаю, заново написать труда не составит. Но только вот что я подумал. Писать спецом именно под эту демку смысла мало. Надо сделать «пацанский» программерский html-скринсейвер. Пусть он показывает html-ки из специальной папки и пусть понимает упакованные в zip наборы html+js+css+картинки, а так же и просто сложенные в папку. Чтоб любой мог сам себе скринсейвер на HTML забабахать. Как идейка?
      • 0
        однозначно буду использовать.
      • 0
        А ещё чтобы перед запуском html скринил экран и пихал в папку скрин screenshot.(jpg / png / ...), чтобы html могли юзать).
        • 0
          Да, мысль хорошая. Только нужно продумать такой момент. Я сделал альфа версию, чтоб он запускался на всех мониторах. Для каждого монитора тогда получается нужна своя картинка. Наверное нужно сделать какое-то свойство, чтоб через JavaScript можно было получить название файла. Постараюсь на новогодних каникулах довести до беты и выложить в открытый доступ.
          • 0
            С нетерпением жду :).

            Если вдруг что нужно, могу помочь). Хорошо разбираюсь в js.
  • +2
    На большом экране выглядит великолепно, еле оторвался…
    • +3
      Ага, это точно. F11, F5 — и красота!
    • +5
      Было бы просто великолепно, если бы текущие капли ещё немного убирали блюр со стекла
  • +4
    Собственно, когда капли друг на друга «наезжают» виден квадрат вокруг капли, да и почему они не сливаются? Да и не очень понятно каким образом использование трех слоев улучшает производительность и читаемость…
  • +6
    Реалистичности больше мешает за-gauss-еный фон.
    В реальности объекты не в фокусе размываются по более сложному алгоритму, должно получится то что фотографы называют «bokeh».
  • +2
    Красота, особенно если добавить звук: http://www.rainymood.com/
  • +3
    Сразу вспоминается «Naked Gun», Lonely Blues Bar

    image

    Ну нафик, депрессии и так хватает, я бы лучше на пляж посмотрел.
  • +3
    красота, да еще и со звуком… от растревоженного кулера
  • +2
    Клёво, еще бы капельки объединялись бы и скатывалось реально, вообще не было бы слов.
  • +9
    Вспомнил снежинки, модные в начале 2000-х :)
  • 0
    Хочу такую заставку :)
  • 0
    Для большей реалистичности фон надо бы сделать не таким статичным, можно например гифку с огнями, машинами и облаками. Или хотя бы просто слегка менять общую яркость.
  • +16
    Я позволил себе немножко подкрутить код, чтобы капли сливались (ну и еще кое-чего по мелочи пофиксил):
    демо 1, демо 2
    • +1
      Круто!
    • +3
      А у меня в Firefox'е как будто кто-то расстрелял окно:
      Негодяй
      • 0
        Это же дождь в Матрице, опять там Нео выпендривается!
      • 0
        вот кстати, в Firefox оно ведет себя более реалистично. Ведь намачивая стекло, капля действительно должна оставлять след. Правда он должен быть более похож на воду :) Сомневаюсь, что добавление этой фичи оставит неизменной производительность. А так прикольно.
        • 0
          Когда капля растекается в действительности, она ещё и уменьшается.
          • 0
            Ну логично, как раз-таки за счет того, что оставляет след. А при попадании на след другой капли, она движется быстрее.
        • 0
          Ну на самом деле оно в любом браузере оставляет след из капелек (как в оригинале, так и у меня), только значительно меньше размером — не более пятой части от радиуса самой капли. Надо глянуть, что там за ерунда с файрфоксом.

          Причем я сделал так, что эти капельки действительно уменьшают радиус оставляющей их большой капли (и увеличивают радиус капель, с которыми сливаются вместе).

          Конечно, на самом деле нужно сделать вместо мелких капелек длинный след, который только потом будет плавно собираться в отдельные капли. Но это уже совсем другая история :)
    • +5
      В Хроме под Маком в отличие от оригинала стало жутко тормозить.
      • 0
        И FF под маком, и FF под виндой — да, наверное, везде. Все же, при всех его особенностях и фишках, JS не производителен — аналогичные нативные скринсейверы для Win98 работали шустро на железе прошлого века.
    • +1
      вы таки добились 100% загрузки моего процессора :)
      • +1
        Я старался :)
  • +11
    Мне одному капли не кажутся реалистичными из-за отсутствия антиалиасинга?
  • +4
    я почему то ждал, что через время всю эту красоту вытрет дворник.
  • +1
    Живо вспоминается демка из 2000-го на четвертом или пятом флеше. Прямо один в один и даже фоновая картинка похожа была. Кто-то делал на основе сливающихся капель Дена Иванова, а может он и сам делал. И работало кстати со свистом на целероне 300Мгц и в третьем нетскейпе :)
    • +2
      А потом пришла мода на html5.
      • 0
        Да задолбали. Никто у вас этот flash не отбирает. Напишите какое-нибудь крутое демо и покажите, мы порадуемся.
        • 0
          Увы — флеш неумолимо движется в сторону тормознутости HTML5 и собственной кончины, а легковесность четверки осталась только в преданиях :)
  • +1
    Неправильное размытие убивает реалистичность. Нужно использовать равномерное распределение, а не гауссово. Да, это ужасно медленно, но его просчет идет только один раз.
  • +1
    Жаль на сайт не повесить такое чудо. У меня CPU over 70% сразу ест…
  • +3
    Капли не сливаются! Негодую.
    • 0
      Еще две идеи, которые, имхо, добавят реалистичности:
      1) Искажения фона от смоченного стекла (сейчас оно «обладает» гидрофобным эффектом)
      2) Во второй демке изменение угла стекания капель вниз, после их падения на стекло.
  • 0
    Запустил на Android FullHD, увидел намокший монитор. Анимация конечно дико тормозит, но всё равно красиво.
    • 0
      На lumia920 (IE10) работает хорошо, не тормозит.
      • 0
        Nexus 7 прошлого века года — через секунд 15 в хроме все превращается в отличное слайд-шоу :(
  • 0
    Капли круглые, а не грушевидные при скатывании, что печалит(((
  • +3
    Судя по тому, что я наблюдаю в последнее время, в Польше (или по крайней мере у поляков) с IT все хорошо
  • 0
    Еще нужно режимы — лёгкий, средний и муссон! :)
  • +3
    Есть ли у кого-нить возможность за окном выключить такой же скрипт, портящий неделю мне настроение?
  • 0
    Красиво, технологично. Но не похоже.
  • 0
    для интереса поставил vqid.org. Вроде неплохо смотрится.
    п.с. Музыка из вк.
  • 0
    А я и так в Санкт-Петербурге :(
  • 0
    Не хватает «продолговатости» каплям и слияния при пересечении. А так оч круто.
  • 0
    raining.fm/raindrops/ — уже там? :)

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.