Five Notes You Can't Get Wrong
The story behind The Drift
Inspired by Pentatonic scale on Wikipedia
Built with Three.js · ShaderMaterial · EffectComposer (UnrealBloomPass) · Web Audio API (OscillatorNode, ConvolverNode, BiquadFilterNode, DynamicsCompressorNode)
Techniques Raymarched Volumetric Fog · FBM Domain Warping · Beer-Lambert Absorption · Pentatonic Arpeggiator · F#m Camelot Key Lock · ADSR Envelopes · Procedural Reverb · Sub-Oscillator Synthesis
Direction Build a generative music instrument disguised as warm volumetric fog — an always-running arpeggiator in F# minor pentatonic where cursor position sculpts the arrangement
Result Five fog layers responding to a continuous arpeggiator spanning three octaves, with five pattern modes, breath-modulated filtering, and echo trails mapping your musical path through the fog
The Story
The pentatonic scale is 40,000 years old. We know this because bone flutes tuned to five notes have been found in caves across multiple continents. Every civilization on Earth converged on the same five frequencies independently — Chinese, Celtic, African, Japanese, Native American, Appalachian. No contact necessary. The overtone series embedded these intervals into the physics of vibrating strings, and every culture that ever plucked one found them.
In 2009, Bobby McFerrin stood in front of an audience at the World Science Festival. He jumped to positions on the stage and sang notes. Within seconds, the entire audience was singing along — predicting pentatonic intervals they’d never been taught. “It doesn’t matter where I go in the world,” he said. “Every audience gets that.”
The pentatonic scale is the black keys on a piano. Play only the black keys and everything sounds beautiful. It’s the foundation of lo-fi hip-hop, ambient music, blues, traditional Japanese music, Celtic folk. Every “vibe” music tradition runs on five notes.
The Take
Most music interfaces are intimidating. Piano keys. Grid sequencers. Staff notation. They all present the same implicit threat: you can hit the wrong note. You can make something ugly.
The F# minor pentatonic scale eliminates that threat entirely. Five notes — F#, A, B, C#, E — with no dissonant intervals between them. In the Camelot system, that’s key 11A. Every possible combination produces consonance. The constraint is the liberation.
We stripped away every element of a traditional instrument. No keys. No grid. No visible interface. Just fog you move through, and an arpeggiator that never stops playing. Your cursor doesn’t trigger individual notes — it shapes the parameters of a continuously running pattern. How fast the notes step. Which octave range they span. Which of five patterns they follow. How many notes are active at once. The music never stops. You sculpt it.
The experience never tells you it’s impossible to make a mistake. You discover that through play. Everything sounds like it was composed. Because in a sense, it was — by the physics of the overtone series, 40,000 years ago.
The Tech
Three.js renders a fullscreen quad with an OrthographicCamera. There’s no 3D scene — the entire visual is computed in a single fragment shader via raymarching.
The fog is five independent layers, each a slab of volumetric density computed from FBM noise with domain warping. Domain warping feeds noise into itself — the output of one noise field displaces the input coordinates of another — creating organic, smoke-like tendrils rather than uniform haze. Each layer uses unique spatial offsets and noise scales so they form different patterns at different positions, producing visible color separation when multiple layers overlap.
Color mixing follows the Beer-Lambert absorption model — the same equation that describes how light attenuates through real fog, smoke, and cloud. Deeper layers contribute less (exponential falloff), and each slab absorbs light based on its computed density. The result is realistic volumetric depth without actual 3D volume rendering.
The Web Audio API drives a continuous arpeggiator locked to F# minor pentatonic across three octaves (F#2 through E5 — 20 notes total). Each arpeggiator step creates three oscillators: primary sine at pitch, a chorus oscillator detuned +5 cents for warmth, and a sub-oscillator one octave below for body. ADSR envelopes are short and percussive (20ms attack, 100ms decay) to keep the arpeggio crisp. The signal chain runs through a global low-pass filter, splits into dry (50%) and wet (50%) paths with a 3-second procedural convolver reverb, then converges through a dynamics compressor.
Five arpeggio patterns are mapped to X-axis zones: ascending, descending, pendulum (up-down), skip-up (every other note), and random. The Y-axis controls step rate (0.12s fast at bottom to 0.67s slow at top). Cursor velocity controls how many notes the arpeggiator uses per cycle (2 when still, up to 8 when sweeping fast) and the note volume. A quiet F# root pad drone provides harmonic foundation.
Echo trails use a ring buffer of 16 cursor positions with timestamps, sampled in the fragment shader with exponential decay. The fog brightens where you’ve recently been, creating a visual memory of your musical path.
The breath cycle fires every 15-25 seconds — a sinusoidal density modulation over 8 seconds that simultaneously thickens the fog and sweeps the low-pass filter cutoff downward. During inhale, the arpeggio becomes muffled. During exhale, it rings clear.
Post-processing: UnrealBloomPass with dynamic strength (increases with cursor velocity), custom film grain ShaderPass at 0.08 for analog texture, custom vignette ShaderPass to focus attention inward. Reinhard tone mapping at exposure 2.0 — warm midtones preserved, no crushed darks.
The Experience
Click “Enter” to begin. The arpeggiator starts immediately — a gentle two-note pattern in F# minor.
Move your cursor. The arpeggiator responds. Horizontal position selects the starting note and pattern mode — ascending arpeggios on the left, random cascades on the right. Vertical position controls tempo — slow and contemplative at the top, rapid pulses at the bottom.
Move faster. The arpeggiator widens its range, pulling in more notes from the three-octave pool. A slow drift gives you a two-note meditation. A fast sweep gives you eight-note cascades spanning F#2 to E5.
Stop moving. The arpeggiator doesn’t stop — it settles into a gentle ambient pulse, quiet and sparse. Move again to reshape it.
The fog shows where you’ve been. Each arpeggiator step triggers a density surge in the corresponding fog layer — a brief brightening that echoes the music visually. Your trail through the fog is your musical signature.
Listen for the breath. Every 15-25 seconds, the entire fog field inhales and exhales. The low-pass filter sweeps down, muffling the arpeggio. Then it opens up again. You’re inside something alive.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.