Note 07 · Watercolour

Watercolour

Play or sing near your laptop and the canvas blooms in watercolour. Sound goes in, paint comes out.

Update, July 2026: this toy has since been replaced by Water Ink, a drum-reactive fluid simulation. This note stays up as the record of the first version.

The stack

p5.js for the drawing, and the native Web Audio API for the listening.

How it works

Audio is read straight from Web Audio. An analyser node hands over a frequency spectrum and a time-domain signal on every frame, and the low, mid, and high bands plus the overall loudness decide where pigment blooms and how far it creeps. Quiet microphones get a hand from a gain node behind an input slider, so a soft voice still moves the paint.

The paint

Each bloom is a rough polygon grown by midpoint displacement, the technique Tyler Hobbs wrote up for digital watercolour: take an edge, nudge its midpoint outward a little, repeat, and the shape picks up an organic wobble. Layers stack at low opacity in HSB color with a multiply blend, so wherever blooms overlap the pigment deepens the way wet paint pools on a real page.

A fix worth recording

The first build leaned on p5.sound, which threw an AudioWorklet error the moment it loaded. Swapping it for the raw analyser node removed the dependency and the bug in one move, and it handed back finer control over the input gain as a bonus. Reaching for the platform API instead of the wrapper turned out simpler and sturdier.

Next: Hand Beats →