Magic Hookah: интерактивный кальян на Canvas 2D
Кальян, который реагирует на курсор и палец: шланг тянется за рукой, дым течёт по законам жидкости, а звук синтезируется на лету.
Подробнее →Разработка 2D-графики и Canvas
Анимации, частицы, процедурный пиксель-арт и интерактивные визуализации на Canvas без тяжёлых файлов.
Какие задачи решаем
- Интерактивные анимированные сцены для главной страницы и промо.
- Системы частиц: дым, искры, снег, огонь и другие эффекты.
- Процедурная графика, которая строится кодом: меньше вес, проще менять стиль.
- Пиксель-арт и спрайтовая анимация с чёткой картинкой на любом экране.
- Визуализации данных и диаграммы с плавной анимацией и откликом на курсор.
Технологии
- Canvas 2D
- OffscreenCanvas
- Web Workers
- PixiJS
- SVG
Как проходит работа
- Разбор задачи
Определяем, что рисуем (спрайты — небольшие картинки-кадры анимации), как сцена реагирует на пользователя и какой вес страницы допустим.
- Прототип
Собираем основной эффект на простой графике и вместе настраиваем ощущение: скорость, отклик, плавность.
- Разработка
Дорабатываем картинку, выносим тяжёлые расчёты в отдельный поток (Web Workers), чтобы страница не тормозила.
- Запуск и поддержка
Встраиваем на сайт, проверяем в основных браузерах, передаём код и описание параметров.