Creative coding · p5.js
Prism Catch
A p5.js sketch you play with your hand in front of a webcam. Colored light falls down the screen, and a rope strung between your index finger and thumb catches it. Open your hand and the rope stretches wide; pinch and it curls into a cradle. There is no score and no goal.
The sketch running live. Press play for sound, or open it and catch a few yourself.Run it in the p5.js editor: editor.p5js.org
About the project
Why I made it
A personal creative-coding exercise. I wanted an interaction that needs no explanation: you hold up a hand, the rope is already there, and the first ball that lands on it shows you the rule.
Concept
The look: light out of a prism
The starting image was a prism: white light entering, a spectrum leaving. Instead of drawing the prism itself, I drew what comes out of it. Each falling streak is a band of the spectrum, tapering as it descends, so the screen reads as light rather than as objects. The palette stays saturated against pure black so the color does the work with no interface around it.
How it works
Your hand becomes the rope
There is no cursor and no controller. A webcam feed is read for hand position, and the line you catch with is strung between two points on your own hand, so the thing you control is the shape of your grip.
MediaPipe, running through p5.js, detects the hand landmarks every frame. Two of them drive the whole piece: the tip of the index finger and the tip of the thumb.
A continuous rope is strung between those two points. It is built from a chain of segments held by distance constraints, so it sags, swings, and bends under what it carries instead of snapping to a rigid line.
Falling balls are tested against the rope each frame. A hit settles onto the line and rides it, so widening or closing your hand tips the catch, gathers it, or spills it back into the dark.
The catch is deliberately forgiving. The rope carries more thickness than it appears to, so near-misses still register, and a ball settles onto it rather than glancing off. Both make catching easier than real physics would. The flexible segments do the rest: a rope that visibly bends under weight looks real without needing to be accurate.
Decisions
What I tuned, and why
Drawing a translucent black rectangle instead of clearing the canvas leaves a soft trail, so motion reads as light rather than as moving dots.
Fast enough to feel alive, slow enough that a person can plan an intercept. Too fast and it stops being catchable.
A rope that bends lets people invent their own shapes, a bowl to collect, a taut line to sweep, and gives the piece more range than a rigid object would.
Adding points would turn play into performance. The reward is the burst itself, which keeps the piece calm.
Outcome
What it produced
The sketch is published and runs live in the p5.js editor, so anyone can open it and play without installing anything. Watching people use it, the result I cared about held up: nobody asked what to do. They held up a hand, saw the rope bend under the first catch, and kept going. That is the same principle behind my thesis work, that a system can teach its own rule through feedback instead of instruction, tested here at a much smaller scale.
It also fed directly into SomaSpace. The particle behavior, the trail technique, and the habit of making the response forgiving all carried over into the installation's visual system.
Reflection
What I would build next
The obvious next step is to give the rope more to do: a second hand, so two ropes can pass a catch between them, or fixed anchors so it can be strung across the frame and left hanging. Driving a visual system from body input is what I did next, at room scale, in SomaSpace. I would also like to give the light a reason to fall, tying emission to sound or time of day, so the piece has a rhythm of its own instead of a constant rain.
Next project
ChewChat · Language exchange app, team project