Pull to refresh

Rainyday.js

Website developmentJavaScriptCanvas
image

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

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

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

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

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

Github
Tags:дождь и его шумcanvas
Hubs: Website development JavaScript Canvas
Rating +97
Views 35.2k Add to bookmarks 335
Comments
Comments 62

Popular right now

Senior Frontend Developer
from 200,000 ₽AaplyRemote job
Project Manager
from 80,000 to 80,000 ₽КЛЮЧАВТОКраснодар
Frontend-разработчик
to 120,000 ₽2-LinesRemote job
Javascript Developer
from 75,000 to 180,000 ₽WebLab TechnologyRemote job