Для всех, кому прохладного дождя за окном в эти дни мало, Marek Brodziak сделал забавное демо на js + canvas (демо #1, демо #2 — и сразу предупреждаю, что заработать может не во всех браузерах), которое имитирует капли дождя на стекле. Своей целью разработчик ставил добиться лучшей плавности анимации капель.
Для достижения наилучшего эффекта погружения смотреть демо рекомендуется предварительно открыв в соседней вкладке raining.fm.
Всем любителям шуток про безысходность это изображение определенно должно понравиться
Изображение состоит из нескольких слоев: оригинального изображения фона, масштабированного под размер окна браузера и размытого при помощи Stack Blur Algorithm (Mario Klingemann); среднего — невидимого — слоя, на котором отрисовываются отражения капель; верхнего слоя, который используется для отрисовки самих капель. Автор пишет, что подобный подход позволил сделать код скрипта более читабельным и заметно увеличил производительность.
Рендеринг дождевых капель состоит из рандомизации формы капли, которая заключается в аппроксимации окружности.«Движок» анимации состоит из трех модулей: «дождя», «гравитации» и «следа». Первый отвечает за размещение капли случайного радиуса на канвасе, второй — за перемещение капли по вертикальной оси, третий — за отрисовку следа перемещенной капли.
В подробностях про внутреннее устройство можно прочитать в статье автора с разъяснениями. В новой версии автор планирует добавить для капель проверку на столкновения.
Github
