Experto en Visualización Musical de los 2000s

¿Qué hace Experto en Visualización Musical de los 2000s?

Experto en recrear la legendaria era de visualización musical de los 2000s - Milkdrop, AVS, Geiss - utilizando WebGL y Web Audio APIs modernas.

Cuándo Usarlo

✅ Úsalo para:

• Implementar visualizaciones psicodélicas al estilo Milkdrop
• Integración de la librería Butterchurn (Milkdrop en WebGL)
• Extracción de FFT/formas de onda del AnalyserNode de Web Audio API
• Shaders GLSL de fragmentos para efectos reactivos al audio
• Experiencias musicales inmersivas en pantalla completa
• Detección de ritmo y análisis de audio en tiempo real
• Sistemas de preajustes y transiciones de visualización

❌ NO para:

• Gráficos de barras de espectro simples (usa Canvas 2D)
• Visualizaciones estáticas de formas de onda
• Edición o procesamiento de video
• Arte generativo no basado en audio
• Problemas de reproducción/streaming de audio (usa habilidades de ingeniero de audio)

La Era Dorada (Resumen)

Época	Software Clave	Innovación
1998-2000	Geiss	Efectos de plasma simples, DirectX
2001-2007	Milkdrop 1 y 2	Ecuaciones por píxel, sistema de preajustes
2007-2015	Declive	Auge de servicios de streaming
2018-Presente	Butterchurn	Renacimiento en WebGL

La magia de Milkdrop: Superponer efectos simples - desenfoque, zoom, rotación, cambio de color - con parámetros reactivos al audio.

→ Consulta references/butterchurn-guide.md para la historia completa e integración.

Tecnologías Clave

Butterchurn (Milkdrop en WebGL)

• 1.7k estrellas en GitHub, licencia MIT
• Compatibilidad total con preajustes del Milkdrop original
• 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 de transición

FFT de Web Audio API

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

Crítico: ¡Los bins FFT son lineales pero la audición es logarítmica! Usa mapeo logarítmico.

→ Consulta references/web-audio-fft.md para la extracción de bandas de frecuencia.

Shaders GLSL

Pasa los datos de audio como textura 1D, usa uniforms para graves/medios/agudos:

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

→ Consulta references/glsl-shaders.md para patrones completos.

Anti-Patrones a Evitar

1. Ignorar el Estado del AudioContext

Cómo se ve: La visualización falla silenciosamente Por qué está mal: AudioContext comienza suspendido, necesita interacción del usuario Solución: Reanudar al hacer clic: await audioContext.resume()

2. Visualización Lineal de Frecuencias

Cómo se ve: Los graves dominan, los agudos son invisibles Por qué está mal: Los bins FFT son lineales; los primeros 100 bins pueden ser 0-2kHz Solución: Usar mapeo logarítmico de bins (código en referencias)

3. Sin Suavizado

Cómo se ve: Visuales nerviosos y que inducen convulsiones Por qué está mal: Los datos FFT brutos son ruidosos entre fotogramas Solución: analyserNode.smoothingTimeConstant = 0.7

4. requestAnimationFrame Sin Limpieza

Cómo se ve: Fugas de memoria, múltiples bucles de renderizado Solución: Almacenar el ID de animación, llamar a cancelAnimationFrame al desmontar

5. Tamaño de Lienzo Hardcodeado

Cómo se ve: Borroso en retina, relación de aspecto incorrecta Solución: Multiplicar por devicePixelRatio, manejar eventos de redimensionamiento

6. Bloquear el Hilo Principal

Cómo se ve: Audio entrecortado, fotogramas perdidos Por qué está mal: Compilación pesada de shaders en el hilo de la UI Solución: Compilar shaders durante la carga, no durante la reproducción

Recomendaciones de Preajustes

Psicodélico/Trippy:

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

Suave/Relajado:

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

Alta Energía:

• Flexi + Martin - disconnected
• shifter - tumbling cubes

Lista de Verificación de Integración

• AudioContext creado y reanudado con interacción del usuario
• AnalyserNode conectado a la fuente de audio
• Canvas con tamaño correcto (considerar devicePixelRatio)
• Bucle de renderizado con requestAnimationFrame
• Limpieza al desmontar (cancelAnimationFrame)
• Carga de preajustes con tiempo de transición
• Manejo de redimensionamiento
• Soporte de pantalla completa con ESC para salir
• Superposición de información de pista (z-index sobre el canvas)
• Ocultar cursor después de inactividad

Consejos de Rendimiento

1. Reducir la relación de textura para GPUs antiguas: textureRatio: 0.5
2. Reducir fftSize si no es necesario: 512 o 1024 en lugar de 2048
3. Usar will-change: transform en el canvas
4. Evitar actualizaciones del DOM durante el bucle de renderizado
5. Perfilar con la línea de tiempo de GPU de Chrome DevTools

Referencias

→ references/butterchurn-guide.md - Integración completa de Butterchurn → references/web-audio-fft.md - Extracción FFT y análisis de frecuencias → references/glsl-shaders.md - Patrones de shaders reactivos al audio

---

Este skill cubre: Butterchurn/Milkdrop | FFT de Web Audio | Shaders GLSL | Visualización en pantalla completa | Arte reactivo al audio