especialista-em-visualizacao-musical-anos-2000

Especialista em Visualização Musical dos Anos 2000

Especialista em recriar a lendária era de visualização musical dos anos 2000 - Milkdrop, AVS, Geiss - usando WebGL moderno e Web Audio APIs.

Quando Usar

✅ Use para:

• Implementar visualizações psicodélicas no estilo Milkdrop
• Integração da biblioteca Butterchurn (Milkdrop em WebGL)
• Extração de FFT/waveform do Web Audio API AnalyserNode
• Shaders GLSL de fragmento para efeitos reativos a áudio
• Experiências musicais imersivas em tela cheia
• Detecção de batidas e análise de áudio em tempo real
• Sistemas de presets e transições de visualização

❌ NÃO use para:

• Gráficos de barras simples (use Canvas 2D)
• Exibições de waveform estáticas
• Edição ou processamento de vídeo
• Arte generativa sem áudio
• Problemas de reprodução/streaming de áudio (use habilidades de engenheiro de áudio)

A Era de Ouro (Resumo)

Era	Software Chave	Inovação
1998-2000	Geiss	Efeitos de plasma simples, DirectX
2001-2007	Milkdrop 1 & 2	Equações por pixel, sistema de presets
2007-2015	Declínio	Ascensão dos serviços de streaming
2018-Presente	Butterchurn	Renascimento WebGL

A magia do Milkdrop: Camadas de efeitos simples - desfoque, zoom, rotação, mudança de cor - com parâmetros reativos a áudio.

→ Consulte references/butterchurn-guide.md para histórico completo e integração.

Tecnologias Principais

Butterchurn (Milkdrop em WebGL)

• 1,7k estrelas no GitHub, licença MIT
• Compatibilidade total com presets originais do 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 de transição

FFT da Web Audio API

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

Importante: Os bins FFT são lineares, mas a audição é logarítmica! Use mapeamento logarítmico.

→ Consulte references/web-audio-fft.md para extração de bandas de frequência.

Shaders GLSL

Passe dados de áudio como textura 1D, use uniforms para graves/médios/agudos:

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

→ Consulte references/glsl-shaders.md para padrões completos.

Anti-Padrões a Evitar

1. Ignorar o Estado do AudioContext

Como se manifesta: Visualização falha silenciosamente Por que está errado: AudioContext inicia suspenso, precisa de interação do usuário Solução: Retomar no clique: await audioContext.resume()

2. Exibição de Frequência Linear

Como se manifesta: Graves dominam, agudos invisíveis Por que está errado: Bins FFT são lineares; primeiros 100 bins podem ser 0-2kHz Solução: Use mapeamento logarítmico de bins (código nas referências)

3. Sem Suavização

Como se manifesta: Visuais trêmulos e induzindo convulsões Por que está errado: Dados FFT brutos são ruidosos quadro a quadro Solução: analyserNode.smoothingTimeConstant = 0.7

4. requestAnimationFrame Sem Limpeza

Como se manifesta: Vazamentos de memória, múltiplos loops de renderização Solução: Armazene o ID da animação, chame cancelAnimationFrame ao desmontar

5. Tamanho do Canvas Fixo

Como se manifesta: Borrado em retina, proporção incorreta Solução: Multiplique por devicePixelRatio, trate eventos de redimensionamento

6. Bloqueio da Thread Principal

Como se manifesta: Áudio irregular, quadros perdidos Por que está errado: Compilação pesada de shaders na thread da UI Solução: Compile shaders durante o carregamento, não durante a reprodução

Recomendações de Presets

**Psicodélico/Trip: **

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

Suave/Relaxante:

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

Alta Energia:

• Flexi + Martin - disconnected
• shifter - tumbling cubes

Checklist de Integração

• AudioContext criado e retomado na interação do usuário
• AnalyserNode conectado à fonte de áudio
• Canvas dimensionado corretamente (considere devicePixelRatio)
• Loop de renderização com requestAnimationFrame
• Limpeza ao desmontar (cancelAnimationFrame)
• Carregamento de preset com tempo de transição
• Tratamento de redimensionamento
• Suporte a tela cheia com ESC para sair
• Overlay de informações da faixa (z-index acima do canvas)
• Ocultar cursor após inatividade

Dicas de Performance

1. Reduza a taxa de textura para GPUs antigas: textureRatio: 0.5
2. Reduza o fftSize se não for necessário: 512 ou 1024 vs 2048
3. Use will-change: transform no canvas
4. Evite atualizações do DOM durante o loop de renderização
5. Perfile com a linha do tempo da GPU do Chrome DevTools

Referências

→ references/butterchurn-guide.md - Integração completa do Butterchurn → references/web-audio-fft.md - Extração de FFT e análise de frequência → references/glsl-shaders.md - Padrões de shaders reativos a áudio

---

Este skill cobre: Butterchurn/Milkdrop | FFT Web Audio | Shaders GLSL | Visualização em tela cheia | Arte reativa a áudio