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