The Superposition
The story behind The Superposition
Inspired by Wave function on Wikipedia
Built with Pure WebGL2 · Custom GLSL Fragment Shader
Techniques Voronoi tessellation · Phase-difference interference · Concentric ring lattice · Simplex-like seed animation · Coherence pulse events
Direction The wave function is real but unobservable — you only see its shadow
Result A shifting interference moiré that responds to cursor position, where narrowing your observation reveals more and widening it destroys the pattern
The Story
The wave function is the most important object in quantum mechanics. It governs everything — every particle, every interaction, every possible outcome. And you can never see it.
The wave function ψ is complex-valued. It contains imaginary numbers. No physical measurement can ever return a complex number, so the wave function itself is permanently hidden behind a mathematical wall. You can only measure |ψ|² — the probability density. The shadow, not the thing.
What makes this genuinely strange is that the act of measurement — looking — doesn’t just fail to reveal the wave function. It destroys it. Before measurement, a quantum system exists in superposition: all possible states simultaneously. The wave function encodes this multiplicity as interfering probability amplitudes. Measurement forces the system to collapse into a single state. The interference pattern vanishes. The many become one. Irreversibly.
The Take
The experience renders two procedural pattern layers — one ordered (a rotating lattice of concentric rings), one organic (animated Voronoi cells with drifting seed points). You never see either layer. You only see their interference pattern: where their phases agree, light; where they oppose, darkness.
Your cursor is the observation apparatus. Moving it left narrows the “slit” — the frequencies of both layers converge, producing wide, clear interference fringes. You can see the superposition. Moving right widens the slit — frequencies diverge, and the pattern collapses into fine-grained noise. You’re “measuring” too broadly, and the interference vanishes.
This is the double-slit experiment’s central insight: narrow observation reveals wave behavior (interference). Broad observation reveals particle behavior (noise). You can’t have both.
The Tech
Pure WebGL2 — no framework. One fullscreen quad, one fragment shader, no Three.js. The entire visual is computed per-pixel in a single shader pass.
Layer A: Concentric Ring Lattice. Seven ring centers arranged in a golden-angle spiral, slowly rotating at 0.02 rad/s. Each center emits concentric rings via sin(distance * frequency + time). The base spatial frequency is modulated by the slit width uniform — narrow slit pushes frequencies toward 18 cycles/viewport, wide slit toward 35. The seven contributions are summed and averaged to produce a phase value per pixel.
Layer B: Animated Voronoi. 25 seed points (15 on mobile) with positions computed on CPU via multi-frequency sinusoidal drift — each seed follows a smooth pseudo-Brownian path using sin(time * speed + phase) * cos(time * speed2 + phase2). The shader computes nearest and second-nearest cell distances per pixel, derives edge proximity, then applies sin(edgeDist * frequency + time) to produce a second phase value.
Interference. The fragment shader computes cos(phaseA - phaseB + phaseOffset) * 0.5 + 0.5 per pixel. This is the core of the visual — where the two layers’ phases align, the interference is bright (signal white #f8f6ff); where they oppose, it’s dark (deep indigo #2a1f6e). The cursor Y position drives the phase offset, letting the user “tune” the interferometer — shifting the bright/dark relationship continuously.
Coherence Pulses. Every 6–10 seconds, a coherence pulse fires: the two layers’ phases are blended toward each other (mix(phaseA, phaseB, pulse * 0.7)), causing the interference to briefly resolve into near-uniform brightness before diverging again. This simulates environmental decoherence events — moments when the quantum system briefly “collapses” before re-superimposing.
Frequency Locking. If the cursor stays still for 3+ seconds at a sweet-spot slit width (0.2–0.4), the shader quantizes both phases toward harmonic steps (floor(phase * 4 + 0.5) / 4), causing the pattern to stabilize into symmetric geometric forms. Moving the cursor breaks the lock immediately.
Cursor smoothing. All cursor-derived uniforms (position, velocity, slit width, phase offset) are lerp-smoothed on the CPU side with a factor of 0.08, giving the interaction a weighty, instrument-like feel rather than jittery direct mapping.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.