Note 06 · Bubble Machine

Bubble Machine

Bubbles drift up, poke one with your fingertip and it pops. The first of the smaller toys.

The stack

p5.js for the canvas, MediaPipe for the hands, and the Web Audio API for the pop.

How it works

This one steps off three.js and onto p5.js and its 2D canvas. Bubbles spawn along the bottom and rise with a gentle sideways wobble, drawn as soft rings over a mirrored camera image. Your index fingertip becomes a cursor, and the moment it lands inside a bubble the bubble bursts and a short Web Audio blip plays, its pitch keyed to the bubble's size. None of it is heavy, which is exactly the point.

Why a different toolkit

The smaller toys exist to prove the hand pipeline is not welded to one renderer. Bubble Machine, Watercolour, and Hand Beats each pair the same MediaPipe input with a different stack, and p5 is the fastest way to get shapes moving on a canvas. The interesting work was never the bubbles; it was showing the tracking layer travels.

Next: Watercolour →