Orbit Trap
A real-time visual instrument that listens. Three fractals raymarched in a fragment shader, driven live by a microphone and a webcam, built for the kind of techno night that started the whole idea.
The brief
I go to a lot of techno, and at some point in the night I always stop watching the room and start watching the screen behind the DJ. I did not know what those were called for the longest time. I just knew someone was making that thing move in time with the music, and I wanted to know how. I had a first swing at it in 2025 as a project submission, driven by food preparation sounds rather than music. As an audio-reactive problem that is genuinely harder than techno: no tempo to lock to, no kick to anchor on, just transients scattered across a floor of noise. I ran out of time, submitted it unfinished, and was never satisfied with it. This is the rebuild, with no deadline and pointed at the thing I actually wanted it for.
The challenge
Reactive work fails quietly. None of the real problems throw an error, they just make the thing feel dead, and the instinct is to pile on more effects hoping one of them fixes the feeling. That is exactly why the first attempt stalled: I was adding when what it needed was diagnosis.
How I ran it
- 01Raymarched three signed distance fields in a hand-written GLSL fragment shader with soft shadows, ambient occlusion and ACES tone mapping. One fullscreen quad and a lot of maths.
- 02Built a spectral flux onset detector split across three bands so it fires on attack transients rather than raw loudness, giving the kick, snare and hats each their own envelope and their own job.
- 03Gave the kick the structural work: it twists the whole distance field, fires a shockwave through the ray directions and lunges the camera, and every fourth kick snaps a kaleidoscope fold into place so at 4/4 it lands on the bar.
- 04Added a webcam channel that is never drawn to screen. Background subtraction on a 48x36 downsample derives presence, position, proximity and motion, so moving in front of the camera turns the fractal and thickens the structure.
- 05Moved audio analysis onto its own 80Hz clock, independent of the render loop, so dropped frames stop corrupting the tempo estimate.
- 06Wrote a Python pipeline that decoded 431 frames of licensed silhouette footage, keyed each to a mask and packed 48 into a 250KB sprite atlas, played back on the beat grid rather than its own tempo.
What I managed
- GLSL raymarching & shading
- Audio onset detection
- Computer vision
- Asset pipeline
- Performance tuning
A self-contained instrument that holds 60fps, locks to tempo within a beat, and runs offline from a single HTML file with no build step.
- Locks to tempo exactly. A 180ms refractory window plus a median-folded interval estimator took a 132 BPM track from a reported 229 BPM down to a correct 132.
- Dynamics that breathe. Spectral flux is relative, so a whisper produced the same full-scale reaction as a drop. An absolute RMS gate layered on top now puts breakdowns near 1% intensity and the drop at 73%.
- Colour survives the loudest moments. Replacing the clamp with a hue-preserving rolloff stopped every hot pixel driving to white on the drops, so louder means more colour rather than less.
- Holds 60fps through adaptive quality that measures frame time and trades pixel density against the march step budget.
- Ships as a single self-contained HTML file, fonts and sprite atlas embedded as base64, so it runs offline from a file URL with no build step and nothing to install.
See it running
Recorded live in the p5.js editor. Worth turning the sound on: every movement is driven by the audio.
Have a project like this?
I’m available for project management and delivery work. Tell me what you’re building and let’s map it out.