curiositech/windags-skills

Experte für Musikvisualisierung der 2000er Jahre

Experte für die Nachbildung der legendären Ära der Musikvisualisierung der 2000er Jahre – Milkdrop, AVS, Geiss – unter Verwendung moderner WebGL- und Web-Audio-APIs.

Wann verwenden

✅ Verwenden für:

• Implementierung psychedelischer Visualisierungen im Milkdrop-Stil
• Integration der Butterchurn-Bibliothek (WebGL Milkdrop)
• Web Audio API AnalyserNode FFT/Wellenform-Extraktion
• GLSL-Fragment-Shader für audio-reaktive Effekte
• Vollbild-immersive Musikerlebnisse
• Echtzeit-Beat-Erkennung und Audioanalyse
• Prästsysteme und Visualisierungsübergänge

❌ NICHT für:

• Einfache Spektrum-Balkendiagramme (Canvas 2D verwenden)
• Statische Audio-Wellenformanzeigen
• Videobearbeitung oder -verarbeitung
• Nicht-audio-bezogene generative Kunst
• Audio-Wiedergabe/Streaming-Probleme (Fertigkeiten für Audio-Ingenieure verwenden)

Das goldene Zeitalter (Zusammenfassung)

Ära	Wichtige Software	Innovation
1998-2000	Geiss	Einfache Plasma-Effekte, DirectX
2001-2007	Milkdrop 1 & 2	Pixelgenaue Gleichungen, Präsetsystem
2007-2015	Niedergang	Aufstieg der Streaming-Dienste
2018-Heute	Butterchurn	WebGL-Renaissance

Milkdrops Magie: Überlagerung einfacher Effekte – Unschärfe, Zoom, Rotation, Farbverschiebung – mit audio-reaktiven Parametern.

→ Siehe references/butterchurn-guide.md für die vollständige Geschichte und Integration.

Kerntechnologien

Butterchurn (WebGL Milkdrop)

• 1.700 GitHub-Sterne, MIT-lizenziert
• Volle Kompatibilität mit originalen Milkdrop-Präsets
• 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 Überblendung

Web Audio API FFT

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

Wichtig: FFT-Bins sind linear, aber das Gehör ist logarithmisch! Verwenden Sie eine logarithmische Zuordnung.

→ Siehe references/web-audio-fft.md für die Extraktion von Frequenzbändern.

GLSL-Shader

Übergeben Sie Audiodaten als 1D-Textur und verwenden Sie Uniforms für Bass/Mitten/Höhen:

uniform float u_bass;
float glow = smoothstep(0.5 - u_bass * 0.3, 0.0, dist);

→ Siehe references/glsl-shaders.md für vollständige Muster.

Anti-Patterns, die vermieden werden sollten

1. AudioContext-Zustand ignorieren

Wie es aussieht: Visualisierung schlägt still fehl Warum es falsch ist: AudioContext startet pausiert, benötigt Benutzerinteraktion Behebung: Bei Klick fortsetzen: await audioContext.resume()

2. Lineare Frequenzanzeige

Wie es aussieht: Bass dominiert, Höhen unsichtbar Warum es falsch ist: FFT-Bins sind linear; die ersten 100 Bins könnten 0-2 kHz sein Behebung: Verwenden Sie eine logarithmische Bin-Zuordnung (Code in den Referenzen)

3. Keine Glättung

Wie es aussieht: Ruckelige, krampfauslösende Bilder Warum es falsch ist: Rohe FFT-Daten sind von Frame zu Frame verrauscht Behebung: analyserNode.smoothingTimeConstant = 0.7

4. requestAnimationFrame ohne Bereinigung

Wie es aussieht: Speicherlecks, mehrere Render-Schleifen Behebung: Animations-ID speichern, cancelAnimationFrame beim Unmount aufrufen

5. Hartcodierte Canvas-Größe

Wie es aussieht: Unscharf auf Retina, falsches Seitenverhältnis Behebung: Mit devicePixelRatio multiplizieren, resize-Ereignisse behandeln

6. Blockieren des Haupt-Threads

Wie es aussieht: Ruckelnder Audio, ausgelassene Frames Warum es falsch ist: Schwere Shader-Kompilierung im UI-Thread Behebung: Shader während des Ladens kompilieren, nicht während der Wiedergabe

Präsets-Empfehlungen

Psychedelisch/Trippy:

• Flexi, martin + geiss - dedicated to the sherwin maxawow
• Rovastar - Fractopia

Sanft/Entspannt:

• Flexi - predator-prey-spirals
• Geiss - Cosmic Strings 2

Hochenergetisch:

• Flexi + Martin - disconnected
• shifter - tumbling cubes

Integrations-Checkliste

• AudioContext erstellt und bei Benutzerinteraktion fortgesetzt
• AnalyserNode mit der Audioquelle verbunden
• Canvas korrekt dimensioniert (devicePixelRatio berücksichtigen)
• Render-Schleife mit requestAnimationFrame
• Bereinigung beim Unmount (cancelAnimationFrame)
• Präsets laden mit Überblendzeit
• Resize-Behandlung
• Vollbild-Unterstützung mit ESC zum Beenden
• Titel-Info-Overlay (z-index über Canvas)
• Cursor nach Inaktivität ausblenden

Leistungstipps

1. Niedrigeres Texturverhältnis für ältere GPUs: textureRatio: 0.5
2. fftSize reduzieren, falls nicht benötigt: 512 oder 1024 statt 2048
3. will-change: transform auf Canvas verwenden
4. DOM-Updates während der Render-Schleife vermeiden
5. Mit Chrome DevTools GPU-Zeitleiste profilieren

Referenzen

→ references/butterchurn-guide.md - Vollständige Butterchurn-Integration → references/web-audio-fft.md - FFT-Extraktion und Frequenzanalyse → references/glsl-shaders.md - Audio-reaktive Shader-Muster

---

Diese Fertigkeit umfasst: Butterchurn/Milkdrop | Web Audio FFT | GLSL-Shader | Vollbild-Visualisierung | Audio-reaktive Kunst