REACTO – Experimentos Audio-Visuais Web

REACTO é uma suíte de visualização de áudio baseada em web que transforma áudio enviado ou entrada do microfone em 10 experimentos 3D distintos em tempo real. Cada visualização mapeia dados FFT da Web Audio API para geometria Three.js de forma diferente — de um analisador de espectro circular a uma simulação de cimática inspirada em física que implementa equações reais de ondas estacionárias de Chladni. O projeto foi criado como ferramenta criativa e demonstração técnica de gráficos em tempo real audio-reativos no navegador.

A visualização de áudio na web raramente vai além de gráficos de barras. O objetivo era explorar até onde a análise de áudio em tempo real poderia conduzir geometria 3D — não apenas a altura de barras, mas a topologia de terreno, as órbitas de partículas e os modos ressonantes de superfícies vibrantes. Cada experimento responde a uma pergunta diferente: como esse som parece quando expresso através dessa metáfora física ou matemática particular?

Construir uma suíte de visualização de áudio multi-experimento que: (1) compartilhe um AnalyserNode entre todos os experimentos; (2) implemente estratégias de mapeamento fundamentalmente diferentes por visualização; (3) inclua uma simulação fisicamente fundamentada (cimática); (4) suporte 12 esquemas de cores aplicáveis a qualquer visualização; (5) rode suavemente em fullscreen em hardware de nível médio.

• ◈Desenvolvedor solo — engenharia de áudio, autoria de shaders, design de visualização, frontend

1. 01Cimática via detecção de pico espectral e equações modais — a visualização Cymatics detecta os 3 maiores picos de frequência no FFT e os mapeia para índices modais inteiros (m, n, k, l). Então calcula sin(m×π×x) × sin(n×π×y) para modos retangulares e sin(k×π×r) × cos(l×θ) para modos polares, mesclando ambos. Isso produz padrões de Chladni matematicamente corretos que realmente mudam com as frequências dominantes da música.
2. 02Mutação direta de BufferAttribute para atualizações de geometria — todas as visualizações atualizam a geometria Three.js chamando setX()/setY()/setZ() em BufferAttributes existentes e definindo needsUpdate=true, nunca criando nova geometria. Isso elimina a pressão no GC por alocação de geometria por frame, que causaria quedas de frames em sessões mais longas.
3. 03Único AnalyserNode compartilhado via contexto React — todas as 10 visualizações leem do mesmo AnalyserNode via hook useAudio(). A configuração de áudio (createMediaElementSource, connect) acontece uma vez no AudioProvider, evitando que o grafo da Web Audio API cresça ao trocar visualizações.
4. 04Divisão de bandas de áudio para reatividade semântica — os dados de frequência são divididos em graves (bins 0–24), médios (24–96) e agudos (96–192). Diferentes camadas de visualização respondem a diferentes bandas: a elevação do terreno responde ao grave, o raio da órbita de partículas ao médio, o brilho do rastro ao agudo.
5. 05THREE.MathUtils.lerp para transições suaves — os dados FFT brutos são ruidosos e produzem visuais tremidos. Cada valor que conduz geometria (altura de barra, raio de órbita, elevação de terreno) é interpolado em direção ao novo valor FFT com suavização escalonada por delta.
6. 06Ajustes de câmera e iluminação específicos para fullscreen — entrar em fullscreen aumenta o FOV de 60° para 75° e afasta a câmera (Z: 18 → 25). A intensidade da luz pontual aumenta 40% para manter o equilíbrio visual no viewport maior.

• →A cimática é a visualização mais convincente não porque parece melhor, mas porque é fundamentada em física — usuários que conhecem padrões de Chladni reconhecem a conexão e se engajam diferente. A legitimidade matemática adiciona uma camada de significado que escolhas puramente estéticas não têm.
• →A mutação de BufferAttribute requer marcação cuidadosa de dirty — esquecer needsUpdate=true faz a GPU renderizar geometria desatualizada enquanto o JavaScript pensa que atualizou. O bug se manifesta como geometria congelada que ignora entrada de áudio, parecendo uma falha de conexão de áudio.
• →A divisão de bandas faz a reatividade parecer musical em vez de mecânica — responder à frequência média total produz pulsação genérica. Separar grave/médio/agudo e rotear cada um para diferentes propriedades geométricas cria animações que parecem composicionalmente conscientes.
• →Contexto de áudio compartilhado entre trocas de visualização é não trivial — criar um novo MediaElementSource a cada troca faz a Web Audio API lançar erros 'already connected'. O padrão AudioProvider (criar uma vez, manter ativo) resolveu isso, mas exigiu limpeza cuidadosa no unmount do componente.

Ativo — publicado no GitHub Pages