Chladni

Projetei este sistema para explorar a representação visual de frequências acústicas em tempo real. A motivação por trás deste desenvolvimento é fornecer um ambiente de alto desempenho e baixa latência onde a teoria matemática dos padrões de Chladni possa ser renderizada diretamente no navegador, facilitando o acesso a ferramentas de pesquisa e contemplação audiovisual.

Utilidade e Fluxo Operacional

Este motor resolve o problema da visualização abstrata do som. Comumente, compreender como as frequências interagem em um meio físico requer placas de metal e transdutores de alta fidelidade. Digitalizei e otimizei este fenômeno, oferecendo uma superfície matemática infinita.

Para o usuário, o sistema apresenta um fluxo de trabalho minimalista:

1. Captura ou Geração de Sinal: O usuário pode injetar áudio de um microfone físico (avaliando seu ambiente acústico) ou utilizar o “Sound Check” interno, que gera tons puros de frequências específicas (ex. 432Hz, 528Hz) e buffers de ruído colorido (Branco, Rosa, Marrom).
2. Análise Espectral: O motor interno fragmenta o sinal de áudio capturado em bandas de baixa e alta frequência.
3. Tradução Matemática: As intensidades das frequências baixas e altas são mapeadas em tempo real para as variáveis m e n da equação de onda de Chladni.
4. Representação Visual: Dezenas de milhares de partículas reagem estocasticamente aos valores da equação sobre uma tela infinita. As zonas de menor amplitude atraem partículas (nós), enquanto as zonas de maior amplitude as repelem (antinós), desenhando o padrão geométrico característico das ondas estacionárias.

O valor desta ferramenta divide-se em duas facetas: uma analítica, como ferramenta de estudo visual do som para engenheiros e designers; e outra contemplativa, atuando como um visualizador de frequências de meditação sob uma abordagem estética inspirada em players de música modernos.

Análise Aprofundada da Arquitetura

A nível de engenharia, optei por uma arquitetura que prioriza o desempenho no ciclo de pintura e uma clara separação de responsabilidades, evitando completamente o “overhead” de frameworks reativos pesados (como React ou Vue).

Padrões Estruturais

O projeto segue uma abordagem modular semelhante a uma “Arquitetura de Portos e Adaptadores” simplificada. As regras de negócio (física de partículas, análise FFT) estão isoladas da interface do usuário. Utiliza-se o Astro primariamente como gerador de sites estáticos e roteador, fornecendo uma base leve. Toda a interatividade do lado do cliente é delegada a Web Components nativos ou scripts diretamente injetados, apoiados por uma gestão de estado atômica externa.

graph TD;
    subgraph UI Layer
        A[ControlBar Component]
        B[Welcome/Canvas View]
    end

    subgraph State Management
        C[nanostores]
        C1(audioMode)
        C2(simulation parameters m/n)
        C3(appearance)
    end

    subgraph Domain logic
        D[AudioEngine]
        E[ChladniEngine]
    end

    A <-->|Subscribe/Publish| C
    B <-->|Subscribe/Publish| C

    D -->|FFT Analysis updates m/n| C
    C -->|m/n & params sync| E

    E -->|Render Frame| F[HTML5 Canvas]

Modelagem de Dados e Lógica dos Motores

Dividi a lógica pesada em duas entidades principais que executam no cliente:

1. AudioEngine: Encarregado do contexto de áudio web (AudioContext). Gerencia o ciclo de vida dos osciladores (OscillatorNode), os nós de ganho e a análise por Transformada Rápida de Fourier (AnalyserNode). Otimizei este módulo calculando antecipadamente os índices estáticos para as bandas de frequência (Graves: ~100-600Hz, Agudos: ~600-3000Hz) em sua fase de inicialização. Durante o ciclo de atualização (getAnalysis()), extrai a energia média dessas bandas e, mediante interpolação linear (Lerp), suaviza as transições das variáveis m e n, garantindo uma mutação fluida dos visuais diante de mudanças bruscas de ruído. Além disso, armazena em cache os buffers de ruído gerado para mitigar recálculos dispendiosos e uso excessivo de memória.

2. ChladniEngine: Representa o motor de física e renderização sobre o Canvas. Aceita um HTMLCanvasElement e administra a posição de milhares de partículas utilizando um único Float32Array plano, evitando a criação e coleta de lixo (Garbage Collection) de milhares de objetos individuais. Durante seu método update(), calcula-se a fórmula da placa de Chladni para cada partícula: $$ Amp = |\cos(n\pi x)\cos(m\pi y) - \cos(m\pi x)\cos(n\pi y)| $$ Para maximizar o desempenho, elevei as constantes da função de onda (produtos de n, m, PI e o fator de zoom) fora do loop de alta frequência. Implementei uma lógica de “plano infinito”: em vez de prender as coordenadas em limites rígidos, as partículas envolvem (wrap) as bordas da tela. O parâmetro zoom escala matematicamente as coordenadas de entrada para a função de onda, alterando a densidade do padrão sem perder fidelidade ou gerar artefatos visuais, e utilizando toda a largura e altura da viewport de maneira assimétrica para garantir que o padrão preencha o espaço disponível.

Stack Tecnológico

Tecnologia	Papel Arquitetural	Justificativa de Design
Astro	Framework Core / PWA	Estrutura o projeto, otimiza a entrega de CSS e HTML inicial. Permite converter a aplicação em uma PWA (com @vite-pwa/astro) facilmente e sem dependências bloqueantes de renderização.
Vanilla TypeScript	Lógica de Negócio	Ausência intencional de frameworks UI reativos para garantir a máxima alocação de recursos de CPU ao processamento matemático das partículas no ChladniEngine.
nanostores	Gestão de Estado	Prova átomos de estado (atoms) independentes e interconectáveis. Desacopla eficientemente os componentes UI do ChladniEngine e AudioEngine.
HTML5 Canvas (2D)	Camada de Apresentação	Escrita direta de pixels/retângulos via API nativa mediante loop requestAnimationFrame.
Web Audio API	Camada Sensorial / DSP	Acesso de baixa latência ao hardware de microfone e capacidade de síntese digital de sinais (osciladores, geração de buffers de ruído) internamente na thread principal do navegador.
Tailwind CSS v4	Camada de Estilos	Gerenciamento de utilitários CSS para garantir a estética glassmorphism estrita e uso de variáveis de cor como o Zinc-950 para o fundo.

Em conclusão, este design acopla algoritmos de análise espectral diretamente com álgebra de ondas sobre um renderizador de memória linear. O uso de arrays tipados e a eliminação do Virtual DOM buscam sustentar ciclos de atualização estáveis de 60 FPS, independentemente de o motor processar o ruído marrom armazenado em cache ou o sinal analógico do ambiente através da Web Audio API, resultando em uma plataforma computacional que se mantém estável sob carga no cliente.