The Cymatics
The story behind The Cymatics
Inspired by Cymatics on Wikipedia
Built with Three.js · ShaderMaterial · Raycaster · CanvasTexture
Techniques Simplex noise vertex displacement · Chromatic aberration · CRT scanlines · Per-object glitch · Barrel distortion
Direction Chladni plates and Hans Jenny’s tonoscope — making sound visible through vibrating surfaces
Result Seven geometric forms floating in a dark field, each waiting for your cursor to set it resonating
The Story
In 1787, Ernst Chladni scattered fine sand across a metal plate and drew a violin bow across its edge. The plate vibrated. The sand moved — not randomly, but with purpose. It fled from the places of maximum vibration and gathered along the nodal lines, the places where the plate stood still. What remained was a pattern: symmetric, intricate, and entirely determined by the frequency. Change the note, change the pattern. The same plate, the same sand, but a different shape of stillness.
Two centuries later, the Swiss physician Hans Jenny gave it a name. Cymatics — from the Greek kyma, wave. He spent decades photographing what sound looks like when it meets matter. He used crystal oscillators to vibrate steel plates, liquid surfaces, powders. At certain frequencies, chaos organized into geometry. Concentric rings. Hexagonal lattices. Patterns that looked biological, architectural, mathematical — all produced by nothing more than a surface and a tone.
The insight is simple and unsettling: sound has shape. Every frequency corresponds to a spatial pattern. The plate doesn’t choose the pattern — the physics does. The vibration finds the geometry, or the geometry was always there, waiting for the right frequency to make it visible.
The Take
Seven geometric forms — icosahedron, torus, cube, sphere, octahedron, trefoil knot, dodecahedron — float against a deep black field, slowly rotating. Their surfaces are almost smooth, breathing with the faintest simplex noise displacement. Your cursor is a frequency source. Hover over any object and it begins to vibrate: the surface buckles, vertices shift, the smooth form deforms into a standing wave pattern. A burst of vertex jitter and color distortion fires at the moment of excitation — the object reacting to the initial impulse.
Each excitation is permanent within a session. A HUD counter tracks how many objects you’ve set resonating. At one, the first narrative text appears: Chladni, a bow, sand fleeing to the still places. At three: every frequency has a shape. At five: Hans Jenny and the Greek word for wave. When all seven are vibrating, the final text arrives — you have never seen sound, but you have always felt it rearranging the surfaces of things.
Excited objects shift visually: the green Fresnel edge glow turns red, cores desaturate toward grey, and a subtle pulse marks them as no longer at rest. The ambient CRT post-processing — scanlines, chromatic aberration, barrel distortion — intensifies slightly as more objects are excited, as if the display itself is picking up the resonance.
The Tech
Vertex Displacement: Simplex Noise as Vibration
Each object uses a custom ShaderMaterial with three-octave simplex noise displacement in the vertex shader. In the resting state, displacement is minimal (uDisplaceScale * 0.2) — a gentle surface breathing that reads as smooth geometry. When excited (uInversion → 1), displacement scales to uDisplaceScale * 0.7 and the direction flips, creating visible surface buckling that reads as vibration-induced deformation.
The transition is driven by a single uniform smoothly interpolated via (target - progress) * dt * 3.0, producing an organic onset rather than a binary switch.
Per-Object Glitch Burst
At the moment of excitation, a 0.5-second glitch burst fires on the affected object only — not the whole screen. In the vertex shader, high-frequency noise jitter and horizontal slice displacement create a brief structural disturbance. In the fragment shader, color channels swap along horizontal bands and Fresnel edges flare with chromatic splitting. This localised burst reads as the object absorbing the initial frequency impulse.
Fragment Shading: Fresnel as State Indicator
Resting objects glow green at their edges (vec3(0.3, 0.9, 0.5)). Excited objects shift to red (vec3(1.0, 0.2, 0.3)) at higher intensity. Cores desaturate via luminance mixing, and a sinusoidal pulse (0.85 + sin(t * 4.0) * 0.15) marks excited objects as dynamically unstable.
Ambient CRT Post-Processing
The scene renders to a WebGLRenderTarget and composites through a fullscreen shader with subtle CRT effects: horizontal scanlines, radial chromatic aberration, barrel distortion darkening, and corner vignette. All scale gently with excitation count — the display picks up the vibration.
Interaction
Raycasting detects hover (or touch on mobile). First contact excites the object permanently. The camera drifts on a slow Lissajous orbit, continuously presenting new angles. Labels rendered as CanvasTexture sprites identify each form in muted green monospace — readouts from an instrument panel, not decorations.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.