Skip to content
RUEN

Magic Hookah: an interactive hookah on Canvas 2D

A hookah that reacts to the cursor and the finger: the hose follows your hand, smoke flows like a fluid and the sound is synthesized live.

Try it with a mouse or touch.

The task

We wanted a landing scene you want to touch: not a video and not a set of ready-made sprites, but a live object that answers every movement and still runs in a browser, without plugins, on a weak phone.

The solution

  • The hookah is drawn procedurally on Canvas 2D in pixel-art style: not a single raster file, the whole picture is built in code, so colors, sizes and details are easy to change.
  • The hose is a rope simulated with Verlet integration: its end follows the cursor or the finger while the other segments are pulled along under length constraints.
  • Smoke is computed by a Stable Fluids solver: the stream curls, spreads and fades like a real fluid.
  • Coals heat up on an inhale, a bloom glow is added, and the sound is synthesized with Web Audio, with no audio files.

Details

  • Mouse and touch control through Pointer Events: one code path for desktop and phone.
  • Smoke is computed on a coarse Stable Fluids grid, and the hose is a Verlet rope of 16 segments. The only adaptive mode is the prefers-reduced-motion setting.
  • Sound starts only after a user gesture, as browsers require.

Technologies

  • Canvas 2D
  • Verlet
  • Stable Fluids
  • Web Audio
  • Pointer Events
  • TypeScript