The Sync
The story behind The Sync
Inspired by Mechanical resonance on Wikipedia
Built with Three.js · ShaderMaterial · EffectComposer · Kuramoto Mean-Field Simulation
Techniques Poisson-Disc Sampling · Scroll-Driven Phase Transition · Bayer Dithering · Chromatic Aberration · Supercritical Noise Injection
Direction Order is the anomaly — synchronization requires precise conditions, and exceeding them destroys the coherence faster than it formed
Result A scroll-driven phase transition from chaos through unity to corruption
The Story
In 1975, Yoshiki Kuramoto proposed a deceptively simple model: N oscillators, each with its own natural frequency, coupled through a sine function of their phase differences. Below a critical coupling strength K_c, nothing happens — each oscillator spins at its own rate, oblivious to the others. Above K_c, something remarkable occurs: oscillators begin to lock together, first in small clusters, then cascading into global synchronization. The order parameter r jumps from near-zero to near-one in a phase transition as sharp as ice forming.
The same mathematics describes fireflies flashing in unison along Southeast Asian riverbanks, cardiac pacemaker cells finding a shared rhythm, and the Millennium Bridge wobbling under synchronized footsteps. Synchronization is everywhere — but it’s fragile. Push the coupling too far and the system doesn’t just stay synchronized. It shatters.
The Take
The experience is a scroll-driven journey through a phase transition. 1,500 oscillators are scattered across the screen in a Poisson-disc distribution, each pulsing at its own Cauchy-distributed natural frequency. As you scroll, the coupling strength K increases from zero through the critical threshold K_c and into the supercritical regime.
The visual arc follows the physics:
- Incoherent regime (K < K_c): Charcoal dots pulse independently, each at its own rate
- Critical transition (K ~ K_c): Amber clusters emerge as the fastest oscillators find each other first
- Unity (K > K_c): Nearly all particles turn amber and pulse in unison — the collective heartbeat
- Supercritical collapse (K >> K_c): Noise overwhelms coupling, coherence dissolves, particles fade toward the background as GLSL corruption — scanlines, chromatic aberration, Bayer dithering — consumes the image
The corruption isn’t decorative. It’s the mathematics made visible: past the optimal coupling, excess energy melts the very coherence it created.
The Tech
Kuramoto Mean-Field: O(N) Synchronization
The standard Kuramoto model requires O(N²) pairwise coupling. The mean-field approximation reduces this to O(N): compute the global order parameter r·e^(iψ) = (1/N)·Σe^(iθⱼ), then update each oscillator as dθᵢ/dt = ωᵢ + K·r·sin(ψ - θᵢ). Each particle couples to the mean field rather than to every neighbor. At 1,500 particles with 8 substeps per frame, this runs at 60fps with headroom.
Natural frequencies follow a Cauchy (Lorentzian) distribution with γ = 0.5, giving a critical coupling K_c = 2γ = 1.0. The Cauchy distribution is special — it’s one of the few distributions where the Kuramoto critical point has a known exact solution.
Supercritical Collapse via Noise Injection
The standard Kuramoto model stays synchronized at high K — order parameter r approaches 1 asymptotically. To create the narrative arc of collapse, the supercritical regime (K > 3.0) injects stochastic noise that scales as a power law with coupling strength. At K = 5.0, the noise amplitude reaches 20 rad/s, overwhelming the coupling force. The order parameter drops from ~0.9 to ~0.5, and the visual field fragments.
Progressive GLSL Corruption
The corruption pass implements four effects that compound with the desynchronization metric:
- Horizontal glitch strips: Random UV displacement in horizontal bands, creating the impression of a degrading signal
- Chromatic aberration: RGB channels sample at radially offset UVs, spreading color separation from the center outward
- Bayer 4×4 dithering: A classic ordered dither matrix quantizes the image into a 1-bit pattern, activated above 20% corruption
- CRT scanlines: Sinusoidal darkening at screen-pixel frequency, combined with aggressive vignette
Poisson-Disc Particle Distribution
Bridson’s algorithm seeds from the viewport center and grows outward with a minimum distance of 14px, producing an organic circular cluster rather than a rectangular grid. The resulting distribution is approximately hexagonal close-packed at the density limit, giving each particle breathing room while maintaining visual density.
Scroll-to-Physics Mapping
The scroll position maps to coupling strength K through a piecewise function: 0–50% scroll covers K = 0 → 2.5 (through the critical transition), 50–75% holds K = 2.5 → 3.0 (the unity zone), and 75–100% ramps K = 3.0 → 5.0 (supercritical collapse). The middle zone is deliberately compressed — unity is a narrow window, not a stable plateau.