Break Step: Hunting for a Structure's Destruction Code
Inspired by Mechanical resonance on Wikipedia
Built with Three.js · ShaderMaterial · EffectComposer (UnrealBloomPass) · Web Audio API
Techniques Spring-Mass Physics · Lorentzian Frequency Response · Bloom · Film Grain · Vignette
Direction Build a resonance hunting experience — sweep the frequency spectrum with your mouse until you find the one note that makes a crystal structure vibrate itself apart
Result A faceted polyhedron that trembles, glows orange along stress lines, and shatters into drifting triangle fragments when you hold its resonant frequency — then a new shape assembles with a different note to find
The Story
In 1831, a column of British soldiers marched across Broughton Suspension Bridge near Manchester. Their synchronized footsteps matched the bridge’s natural frequency. The bridge collapsed. Nobody died, but the British Army issued a standing order that persists to this day: break step on bridges.
Every physical structure has a natural frequency — a rate of vibration encoded in its mass, stiffness, and geometry. Push at any other frequency and nothing happens. Push at that frequency and energy accumulates without bound. The same force that’s harmless at 99% of frequencies becomes catastrophic at one.
The vulnerability is invisible, structural, inherent. You can’t see it. You can only find it by sweeping the spectrum and listening for the structure to sing back.
The Take
The Frequency is a resonance hunting experience. A geometric crystal sits in darkness. Your mouse controls a driving frequency — move left for low tones, right for high. Somewhere in the spectrum is the structure’s resonant frequency. Find it, hold steady, and watch as amplitude builds from a whisper to violence.
The structure doesn’t resist. It vibrates, glows hot orange, deforms along its modal shapes, and eventually shatters into drifting triangle fragments. A new crystal assembles. A different shape. A different note. Begin again.
The Tech
The core is a spring-mass-damper physics simulation running on every vertex of a Three.js polyhedron. Each vertex has a rest position, a displacement vector, and a velocity. Three forces compete each frame:
- Driving force — radial oscillation at the user’s frequency, modulated by a modal shape factor (
sin(y*3 + x*2)) so different parts of the structure respond differently - Spring restoring force — pulls displaced vertices back toward rest (
F = -kx) - Damping — viscous drag proportional to velocity
The frequency response follows a Lorentzian peak — the same transfer function that governs real mechanical resonance:
H(r) = 1 / sqrt((1 - r^2)^2 + (2*zeta*r)^2)Where r is the ratio of driving frequency to natural frequency, and zeta is the damping ratio. At r = 1 (resonance), the response peaks sharply. The narrower zeta is, the more precisely you have to tune.
Amplitude accumulates over time at resonance — the normalized response squared feeds into a running amplitude counter. This models real resonance behavior where energy builds over multiple cycles. Away from resonance, amplitude decays exponentially.
The visual pipeline uses a custom ShaderMaterial with vertex displacement in the vertex shader and stress visualization in the fragment shader. Displacement magnitude drives a smoothstep into the stress color (orange-red), combined with Fresnel rim lighting and a pulsing emission term that makes the surface breathe at high amplitude. Post-processing adds bloom (whose strength tracks amplitude), film grain, and vignette.
Audio uses the Web Audio API with two oscillators: a sine wave “driving” tone (the user’s frequency) and a triangle wave “resonance” tone (the structure’s natural frequency) whose volume scales with the frequency response function. At shatter, a descending sawtooth plus filtered noise burst creates the breaking sound.
When amplitude exceeds the shatter threshold, each triangle face becomes an independent mesh with outward velocity, tumble rotation, and exponential drag. Fragments drift apart like petals. After they fade, a new polyhedron scales up from zero — icosahedron, octahedron, dodecahedron — each with its own resonant frequency.
The Experience
You arrive in darkness. A faceted crystal floats in the void, slowly turning. “THE FREQUENCY” fades in. “Move to begin.”
You move your mouse and a tone emerges — low and searching. The structure sits inert. You sweep right. Higher frequencies. Nothing. The crystal is indifferent. A small Hz readout appears in the corner, tracking your position.
Then — somewhere around 220 Hz — the crystal trembles. The frequency display turns red. You’ve found something. You hold steady. The trembling deepens. Orange stress lines appear along the faces. The surface begins to glow. The bloom halo intensifies. The camera starts to shake.
You hold. Amplitude builds. The structure is vibrating wildly now, vertices pushing outward along modal shapes, the whole surface pulsing hot orange. It’s beautiful and violent. You’re not pushing hard — you’re pushing precisely.
Then it breaks. A flash of bloom. Triangle fragments scatter outward, tumbling slowly, catching light as they drift. The sound descends — a dying note. The quote appears: “Break step on bridges.”
A new shape assembles from nothing. Larger. Different geometry. Different note. You begin the hunt again.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.