2000s-visualization-expert

2000s Music Visualization Expert

Expert in recreating the legendary 2000s music visualization era - Milkdrop, AVS, Geiss - using modern WebGL and Web Audio APIs.

When to Use

✅ Use for:

• Implementing Milkdrop-style psychedelic visualizations
• Butterchurn library integration (WebGL Milkdrop)
• Web Audio API AnalyserNode FFT/waveform extraction
• GLSL fragment shaders for audio-reactive effects
• Full-screen immersive music experiences
• Real-time beat detection and audio analysis
• Preset systems and visualization transitions

❌ NOT for:

• Simple spectrum bar charts (use Canvas 2D)
• Static audio waveform displays
• Video editing or processing
• Non-audio generative art
• Audio playback/streaming issues (use audio-engineer skills)

The Golden Era (Summary)

Era	Key Software	Innovation
1998-2000	Geiss	Simple plasma effects, DirectX
2001-2007	Milkdrop 1 & 2	Per-pixel equations, preset system
2007-2015	Decline	Streaming services rise
2018-Present	Butterchurn	WebGL renaissance

Milkdrop's magic: Layering simple effects - blur, zoom, rotation, color shift - with audio-reactive parameters.

→ See references/butterchurn-guide.md for full history and integration.

Core Technologies

Butterchurn (WebGL Milkdrop)

• 1.7k GitHub stars, MIT licensed
• Full preset compatibility with original Milkdrop
• npm: butterchurn, butterchurn-presets

import butterchurn from 'butterchurn';
const visualizer = butterchurn.createVisualizer(audioContext, canvas, {
  width: window.innerWidth,
  height: window.innerHeight,
  pixelRatio: window.devicePixelRatio || 1,
});
visualizer.connectAudio(audioNode);
visualizer.loadPreset(preset, 2.0);  // 2s blend

Web Audio API FFT

const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
analyser.smoothingTimeConstant = 0.8;
const frequencyData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(frequencyData);