Prism Catch · Creative coding

Draw a line and catch the light

Prism Catch is an interactive p5.js sketch. Light falls through the frame as streaks of prism color, and you draw a curve with your cursor to catch it. Where the light lands, it scatters into sparks. There are no instructions, no score, and no goal beyond the pleasure of catching something.

Try the live demo → See how it works

The sketch running live. Press play for sound, or open it and draw your own curve.Run it in the p5.js editor: editor.p5js.org

Overview

A study in motion, collision, and delight

This started as a personal creative-coding exercise: I wanted to build an interaction that needed no explanation. Anyone who moves the cursor understands the rule within a second, because the feedback is immediate and physical. It became a study in how far a single gesture can carry an experience when the response is generous enough.

Role

Solo: concept, code & visual design

Type

Interactive sketch, self-directed

Built with

p5.js · JavaScript · Canvas

Concept

Light, split and falling

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.

Prism-colored light streaks falling against black
Falling light: each streak is a tapering band of the spectrum.

How it works

One gesture, three systems

The whole piece runs on one input, the path of the cursor, feeding three systems that talk to each other every frame.

01 · Emitters

Light drops spawn across the top with randomized hue, speed, and length, so the field never repeats and never falls in step.

→
02 · The catcher

Your cursor path is smoothed into a curve. It is the only object you control, and the only thing the light can land on.

→
03 · Collision

Each drop is tested against the curve. A hit stops the fall and converts the drop into a burst of particles that scatter and fade.

The catch is deliberately forgiving. The curve has thickness, so near-misses still register, and the burst is larger than the drop that caused it. Both choices are dishonest to physics and correct for feel: they make the player look better than their aim.

Light bursting into sparks where it meets the drawn curve
The moment of contact: a drop becomes a scatter of sparks.
A long curve catching many drops at once
A longer curve catches more at once, and the reward scales with the gesture.

Decisions

What I tuned, and why

Trails over frames

Drawing a translucent black rectangle instead of clearing the canvas leaves a soft trail, so motion reads as light rather than as moving dots.

Fall speed

Fast enough to feel alive, slow enough that a person can plan an intercept. Too fast and it stops being catchable.

A curve, not a paddle

A drawn line lets people invent their own shapes, a bowl to collect, a wall to block, and gives the piece more range than a rigid object would.

No score

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 moved the cursor, saw light break apart, 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 tuning response until it feels generous rather than accurate all carried over into the installation's visual system.

Play Prism Catch →