Magic Hookah: интерактивный кальян на Canvas 2D
Кальян, который реагирует на курсор и палец: шланг тянется за рукой, дым течёт по законам жидкости, а звук синтезируется на лету.
Попробуйте мышью или касанием.
Задача
Нужна была главная страница, которую хочется потрогать: не видеоролик и не набор готовых спрайтов, а живой объект, который отвечает на каждое движение и при этом работает в браузере без плагинов и на слабом телефоне.
Решение
- Кальян рисуется процедурно на Canvas 2D в стиле пиксель-арта: ни одного растрового файла, вся картинка строится кодом, поэтому легко меняются цвета, размеры и детали.
- Шланг моделируется как верёвка по методу Верле (Verlet integration, численное интегрирование без хранения скоростей): конец следует за курсором или пальцем, а остальные звенья подтягиваются с ограничениями по длине.
- Дым считается решателем Stable Fluids (устойчивое решение уравнений течения жидкости): струя завихряется, растекается и затухает.
- Угли разогреваются на вдохе, добавлено свечение (bloom, размытое сияние ярких областей), а звук синтезируется через Web Audio без аудиофайлов.
Подробности
- Управление мышью и касанием через Pointer Events (общий интерфейс браузера для мыши, пальца и пера): один код для компьютера и телефона.
- Дым считается на грубой сетке Stable Fluids, шланг — верёвка Верле из 16 звеньев. Единственный адаптивный режим — настройка «уменьшить движение» (prefers-reduced-motion).
- Звук включается только после жеста пользователя, как требуют браузеры.
Технологии
- Canvas 2D
- Verlet
- Stable Fluids
- Web Audio
- Pointer Events
- TypeScript