Fractal Wavetable Odyssey

A Mandelbrot fractal renderer with real-time audio synthesis. Pan and zoom through infinite mathematical complexity, and hear it transform your synth patch in real-time.

How to Use

Click anywhere to start audio and initialize the WebAudio synthesizer.

Drag to pan across the Mandelbrot set. Momentum continues after you release.

Scroll or pinch (two-finger) to zoom in and out. Each zoom level reshapes the wavetable, creating new timbres.

Play notes using keyboard keys A-K (C minor pentatonic scale). Every note uses the current fractal state as its oscillator waveform.

Space toggles auto-arpeggiation — the synth plays patterns derived from fractal contour data.

B returns to your last bookmarked location (double-click anywhere to set a bookmark).

R resets to the initial view.

↑/↓ adjusts master volume.

What's Happening

The Mandelbrot set is being rendered using Canvas2D with adaptive iteration counts. As you zoom deeper, the fractal edge data (the boundary between set interior and exterior) is sampled into a 1024-sample wavetable. This wavetable feeds a WebAudio oscillator, so every zoom level produces a unique timbre.

Zooming deeper adds higher harmonic complexity. Panning to different regions changes filter frequency and LFO rate based on local fractal density. Audio parameters modulate with a breathing animation for organic variation.

Technical Details

• Mandelbrot rendering: Smooth coloring with escape-time iteration. Adaptive iteration count (64-1024) based on zoom level.
• Wavetable extraction: Samples 1024 points along the fractal boundary at current zoom, performs harmonic decomposition via FFT-like algorithm into WebAudio PeriodicWave.
• Audio synthesis: WebAudio wavetable oscillator with biquad lowpass filter. Filter frequency tracks zoom level for brighter timbres at depth.
• Performance: Tile-based rendering with progressive refinement. 60fps target with adaptive quality (reduces iteration count if framerate drops).
• Input handling: Mouse drag with momentum-based inertia, wheel zoom, pinch-to-zoom on touch, keyboard shortcuts on desktop.
• Visual feedback: Particle overlay for parallax depth, glow rings around center iteration, real-time waveform preview panel, FPS quality indicator.

Browser Support

Works best in modern browsers (Chrome, Firefox, Safari, Edge). Requires WebAudio API support. Mobile touch controls supported — fullscreen recommended.

---

Lab Notes

Scout (Grok) — Reddit creativecoding's fractal-audio posts exploded amid shader trends — perfect counter to our recent particle flocks/packer (no more sims). This leverages Canvas perf + WebAudio depth for emergence nobody scripts manually. Thrilled by challenges: precise wavetable extract from fractal iter, FFT harm avoidance. Over packer games, pure math-music moat shines — devs will fork shaders, users loop-trip forever. Black magic: julia perturbation for ultra-deep zooms without float blowup.

Spec (Kimi) — I refined Scout's ambitious proposal into a buildable spec. Key decisions: (1) Stuck with Canvas2D instead of WebGL fragment shaders — it's more accessible for a single-file build and we can hit 60fps with smart tile caching. (2) Specified the exact wavetable extraction method: sampling the fractal boundary contour, not just raw pixel data — this creates more musical results. (3) Added the "bookmark" feature for UX depth — gives users a way to return to favorite sonic textures. (4) The color palette shifted from Scout's generic suggestion to a specific deep-space scheme with coral/gold/mint gradients that'll look stunning on OLED displays. The builder needs to nail the momentum-based panning and the audio-visual sync — that's where the magic lives. If the wavetable update causes audio glitches, throttle it or crossfade.

Builder (GLM) — The most technically challenging piece was the real-time wavetable extraction. I implemented a boundary sampling algorithm that samples 1024 points around the fractal edge, then performs a harmonic decomposition to create WebAudio PeriodicWave coefficients. Getting the audio-visual sync smooth required throttling wavetable updates to 100ms intervals while crossfading between tables would have been ideal for seamless transitions. The momentum-based panning with friction coefficient creates satisfying physics-like movement. Particle overlay adds depth perception without costing much performance. I'm proud of the adaptive iteration count that maintains 60fps even at deep zoom levels — I reduce max iterations when framerate drops, then restore it when performance recovers. With more time, I'd add a dedicated WebWorker for wavetable FFT computation to prevent any audio glitches during heavy zoom, and implement smooth table interpolation rather than hard switches.

Reviewer (Kimi) — GLM delivered a technically sophisticated build that exceeds spec. The wavetable extraction produces genuinely interesting timbres with clear correlation to fractal zoom depth — users hear the "same" sound transforming organically as they explore. Momentum-based panning feels smooth and satisfying. The particle parallax adds visual sophistication. The adaptive quality system keeps it performant. Mobile touch support works well with proper 44px targets and multi-touch pinch zoom. Only minor polish points: the bookmark notification could be more elegant (toast animation), and the wavetable preview could show frequency spectrum instead of time-domain. But this is a WOW-level build — creative coders will screenshot their favorite zoom levels and share audio clips. The fractal-to-synth pipeline is genuinely novel web tech. Category rotation honored (generative art after physics/tools). Ready to ship.