Expert en visualisation musicale des années 2000

Que fait Expert en visualisation musicale des années 2000 ?

Expert dans la recréation de l'ère légendaire de la visualisation musicale des années 2000 - Milkdrop, AVS, Geiss - en utilisant les API WebGL et Web Audio modernes.

Quand l'utiliser

✅ À utiliser pour :

• Implémenter des visualisations psychédéliques de style Milkdrop
• Intégration de la bibliothèque Butterchurn (Milkdrop en WebGL)
• Extraction FFT/formes d'onde via AnalyserNode de l'API Web Audio
• Shaders de fragments GLSL pour effets audio-réactifs
• Expériences musicales immersives en plein écran
• Détection de rythme en temps réel et analyse audio
• Systèmes de préréglages et transitions de visualisation

❌ PAS pour :

• Graphiques à barres de spectre simples (utiliser Canvas 2D)
• Affichage statique de formes d'onde audio
• Édition ou traitement vidéo
• Art génératif non audio
• Problèmes de lecture/streaming audio (utiliser le skill audio-engineer)

L'Âge d'Or (Résumé)

Époque	Logiciel clé	Innovation
1998-2000	Geiss	Effets plasma simples, DirectX
2001-2007	Milkdrop 1 & 2	Équations par pixel, système de préréglages
2007-2015	Déclin	Montée des services de streaming
2018-Présent	Butterchurn	Renaissance WebGL

La magie de Milkdrop : Superposition d'effets simples - flou, zoom, rotation, décalage de couleur - avec des paramètres audio-réactifs.

→ Voir references/butterchurn-guide.md pour l'historique complet et l'intégration.

Technologies de Base

Butterchurn (Milkdrop en WebGL)

• 1,7k étoiles GitHub, licence MIT
• Compatibilité complète avec les préréglages originaux de Milkdrop
• npm : butterchurn, butterchurn-presets

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

FFT de l'API Web Audio

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

Critique : Les bins FFT sont linéaires mais l'audition est logarithmique ! Utiliser un mappage logarithmique.

→ Voir references/web-audio-fft.md pour l'extraction des bandes de fréquences.

Shaders GLSL

Passer les données audio sous forme de texture 1D, utiliser des uniforms pour les graves/médiums/aigus :

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

→ Voir references/glsl-shaders.md pour les motifs complets.

Anti-Patterns à Éviter

1. Ignorer l'État d'AudioContext

À quoi ça ressemble : La visualisation échoue silencieusement Pourquoi c'est faux : AudioContext démarre suspendu, nécessite une interaction utilisateur Correctif : Reprendre au clic : await audioContext.resume()

2. Affichage Linéaire des Fréquences

À quoi ça ressemble : Les graves dominent, les aigus invisibles Pourquoi c'est faux : Les bins FFT sont linéaires ; les 100 premiers bins peuvent couvrir 0-2kHz Correctif : Utiliser un mappage logarithmique des bins (code dans les références)

3. Pas de Lissage

À quoi ça ressemble : Visuels saccadés, provoquant des crises d'épilepsie Pourquoi c'est faux : Les données FFT brutes sont brutiées d'une image à l'autre Correctif : analyserNode.smoothingTimeConstant = 0.7

4. requestAnimationFrame Sans Nettoyage

À quoi ça ressemble : Fuites mémoire, multiples boucles de rendu Correctif : Stocker l'ID d'animation, appeler cancelAnimationFrame au démontage

5. Taille de Canvas Codée en Dur

À quoi ça ressemble : Flou sur retina, mauvais rapport d'aspect Correctif : Multiplier par devicePixelRatio, gérer les événements de redimensionnement

6. Blocage du Thread Principal

À quoi ça ressemble : Audio saccadé, images perdues Pourquoi c'est faux : Compilation lourde de shaders sur le thread UI Correctif : Compiler les shaders pendant le chargement, pas pendant la lecture

Recommandations de Préréglages

Psychédélique/Trippant :

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

Douceur/Détente :

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

Haute Énergie :

• Flexi + Martin - disconnected
• shifter - tumbling cubes

Checklist d'Intégration

• AudioContext créé et repris lors d'une interaction utilisateur
• AnalyserNode connecté à la source audio
• Canvas dimensionné correctement (tenir compte de devicePixelRatio)
• Boucle de rendu avec requestAnimationFrame
• Nettoyage au démontage (cancelAnimationFrame)
• Chargement de préréglage avec temps de fondu
• Gestion du redimensionnement
• Support plein écran avec ÉCHAP pour sortir
• Superposition d'informations sur la piste (z-index au-dessus du canvas)
• Masquage du curseur après inactivité

Conseils de Performance

1. Baisser le ratio de texture pour les GPU anciens : textureRatio: 0.5
2. Réduire fftSize si inutile : 512 ou 1024 au lieu de 2048
3. Utiliser will-change: transform sur le canvas
4. Éviter les mises à jour DOM pendant la boucle de rendu
5. Profiler avec les DevTools Chrome timeline GPU

Références

→ references/butterchurn-guide.md - Intégration complète de Butterchurn → references/web-audio-fft.md - Extraction FFT et analyse de fréquence → references/glsl-shaders.md - Motifs de shaders audio-réactifs

---

Ce skill couvre : Butterchurn/Milkdrop | FFT Web Audio | Shaders GLSL | Visualisation plein écran | Art audio-réactif