The Harmonic
The story behind The Harmonic
Inspired by Intermodulation on Wikipedia
Built with Pure WebGL2 (no Three.js) · GLSL Fragment Shaders · FBO Ping-Pong Feedback
Techniques Sinusoidal Wave Gratings · Nonlinear Transfer Function · Product Intermodulation · Sum/Difference Ghost Frequencies · Temporal Feedback Trails · Velocity-Mapped Exponent
Direction Two pure waves, one autonomous and one cursor-driven, collide through a nonlinear function — the ghost pattern that emerges belongs to neither
Result A fullscreen interference field where your cursor conjures phantom diamond lattices from two colliding wave gratings, narrated by the story of a violinist who heard a note that wasn’t there
The Story
In 1714, the Italian violinist Giuseppe Tartini was practicing double stops — bowing two strings simultaneously — when he heard something impossible. A third note, lower than either string, materialized out of the air. No instrument was producing it. No other musician was playing. The phantom tone existed only inside his ear.
Tartini had stumbled onto a deep property of nonlinear systems. When two frequencies enter a system that isn’t perfectly linear — an amplifier, a radio receiver, the human cochlea — the output contains frequencies that weren’t in either input. Sum frequencies. Difference frequencies. Ghost tones manufactured by the collision itself. The technical term is intermodulation. The poetic term is better: combination tones. The system creates something that belongs to neither source.
The cochlea is the key. A perfectly linear system would pass two frequencies through unchanged. But biological hearing is nonlinear — the basilar membrane’s response saturates, hair cells have thresholds, the mechanical chain from eardrum to oval window introduces its own transfer function. Two pure tones at 1000 Hz and 1200 Hz don’t just produce 1000 Hz and 1200 Hz. They produce 200 Hz (the difference), 2200 Hz (the sum), and an infinite series of fainter harmonics. Tartini’s third note was real — manufactured by the physics of his own perception. The ghost was inside him the whole time.
The Take
The experience translates intermodulation from sound to sight. Two sinusoidal wave fields occupy a fullscreen shader — not as smooth gradients but as thin grating lines, rendered by a sharpness function that isolates the zero-crossings of each sine wave into bright razor-thin stripes. Wave A drifts autonomously, slowly rotating and phase-shifting in cyan. Wave B responds to your cursor — distance from center controls its spatial frequency, angle from center controls its rotation — rendered in coral.
Individually, each wave field is just parallel lines. Together, they produce something neither contains: a ghost moire pattern. Diamond lattices, hexagonal nodes, shifting interference geometries that emerge from the nonlinear product of the two wave fields. Move slowly and the ghost is selective — tight diamond grids appearing only at specific interference nodes, rendered in warm cream against the deep teal background. Move fast and the nonlinear exponent drops, opening the ghost wide, flooding the screen with intermodulation artifacts. The cursor velocity literally controls how nonlinear the system is.
The narrative unfolds in seven timed text blocks over two minutes. It begins with a single wave — “One frequency. Pure.” — introduces the second, reveals the ghost, then tells Tartini’s story. The final text arrives after the full arc: “Every interaction creates a frequency that belongs to neither source. The ghost is proof that something met.”
The Tech
Thin Line Grating: Isolating Zero-Crossings
The visual foundation is the thinLine() function: pow(1.0 - abs(wave), 8.0). A standard sine wave is a smooth oscillation between -1 and 1. Taking the absolute value and subtracting from 1 produces a value that peaks at 1 when the wave crosses zero and falls to 0 at the extremes. Raising this to the 8th power crushes everything except the narrow peak — producing razor-thin bright lines at the zero-crossings of the sine. The result is a grating: parallel bright lines with dark gaps, like a diffraction grating or a ruled optical element. Two overlapping gratings at different angles and frequencies produce moire interference — the same principle behind the shimmering patterns you see through layered window screens.
Nonlinear Ghost: Product Intermodulation
The ghost moire is computed as pow(abs(waveA * waveB), exponent). The product of two sine waves at different frequencies contains their sum and difference frequencies — this is the trigonometric identity sin(a) * sin(b) = 0.5 * [cos(a-b) - cos(a+b)]. Raising the absolute product to an exponent controls selectivity: a high exponent (2.5, during slow cursor movement) makes the ghost appear only at specific interference nodes where both waves are simultaneously near their extremes. A low exponent (1.0, during fast movement) opens the ghost wide, revealing the full intermodulation pattern. A secondary ghost layer uses explicit sum and difference frequency waves — sin(dot(pixel, dirA + dirB) * ...) and sin(dot(pixel, dirA - dirB) * ...) — for finer moire structure, mixed at 30% intensity.
Cursor-Driven Wave Parameters
Wave B’s spatial frequency is mapped from cursor distance to center: at the center, frequency is 0.008 (wide spacing, few lines), and at the edges it reaches 0.035 (dense grating). Wave B’s rotation angle comes directly from the cursor’s angle relative to center via atan2. This means moving the cursor changes both the density and orientation of one grating relative to the other — and the ghost moire responds to both simultaneously. Cursor velocity, smoothed over 6 frames, maps to the nonlinear exponent: EXPONENT_SLOW + (EXPONENT_FAST - EXPONENT_SLOW) * speedNorm. Faster movement drops the exponent, producing more dramatic and widespread ghost patterns.
FBO Ping-Pong Temporal Feedback
Two framebuffer objects alternate roles each frame. The current frame renders into one FBO while sampling the other as a feedback texture. The fragment shader blends mix(currentColor, previousFrame, feedbackMix) where the feedback mix is derived from the decay constant (0.92 * 0.05). This creates subtle temporal trails — the ghost patterns don’t snap to new positions but leave fading afterimages, reinforcing the sense that the moire has physical presence. Both FBOs use RGBA8 format with LINEAR filtering, recreated on resize to match canvas dimensions at the current device pixel ratio (capped at 2x).
Idle Drift and Phased Reveal
When the cursor is idle for 8 seconds, Wave B transitions from cursor-driven to autonomous drift. Idle frequency oscillates on a 19-second sine period across 60% of the frequency range. Idle angle rotates at 1.5 degrees per second. The blend uses smooth interpolation over the timeout window, with angle blending that handles wrap-around correctly (normalizing the angular difference to the range [-pi, pi] before interpolating). Wave A’s intensity fades in over the first 4 seconds, and the ghost intensity ramps from 0 to 1 between seconds 8 and 12, so the experience begins with a single pure grating before the collision becomes visible.
Visual Composition
Background is deep teal (#0a1e1e) with a radial vignette darkening the edges. Cyan grating lines (vec3(0.45, 0.78, 0.78)) at 22% intensity. Coral grating lines (vec3(0.78, 0.45, 0.38)) at 22% intensity. Ghost moire in warm cream (vec3(0.92, 0.90, 0.82)) at 30% intensity, with a slight warm shift as ghost intensity increases. Film grain at 1.8% intensity animated by time. Beat frequency modulation — 0.7 + 0.3 * sin(time * beatFreq) derived from the frequency difference between the two wave fields — pulses the ghost intensity, creating a breathing rhythm tied to the actual interference physics. Typography is Fraunces serif, with narrative text at bottom-left fading through 7 timed blocks over 132 seconds.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.