Note 08 · Hand Beats

Hand Beats

Build a drum loop in the air on a grid of glass tiles. Tone.js handles the sound, MediaPipe the hands.

The stack

Tone.js for the audio engine, p5.js for the grid, MediaPipe for the fingertip.

How it works

A transport in Tone.js sweeps a playhead across sixteen steps, and a draw callback locks the on-screen step to the audio clock rather than the frame rate, so the light and the hit never drift apart. Four rows cover clap, snare, hi-hat, and kick. You arm a cell by aiming your fingertip at it and holding for a beat; a nearest-cell test with a dead zone keeps the cursor from flickering between neighbours while you settle on one. Choosing a kit (808, 909, or acoustic) only swaps the synth settings underneath.

No samples

The drums are synthesized, not loaded. A membrane synth produces the kick, and short filtered bursts of noise produce the snare, hat, and clap. With nothing to fetch, there is no load delay and no sample library to ship, at the cost of a more electronic character that happens to suit a grid like this one.

The look

The grid began as colored circles and moved to monochrome glass tiles for a drum-and-bass feel. Empty steps read as a faint outline that brightens on the beat, active steps are lit white, and the tile under the playhead glows as it passes. Behind it the webcam is desaturated and the cursor is plain white, so the whole frame holds to black and white. Holding over a tile fills it from the bottom as the dwell timer completes, which doubles as the feedback that your hold registered.

Back to the build log, or open the app.