Chladni | Michaell Alavedra

He diseñado este sistema para explorar la representación visual de frecuencias acústicas en tiempo real. La motivación detrás de este desarrollo es proporcionar un entorno de alto rendimiento y cero latencia perceptible donde la teoría matemática de los patrones de Chladni pueda renderizarse directamente en el navegador, democratizando el acceso a herramientas de investigación y contemplación audiovisual.

Utilidad y Flujo Operativo

Este motor resuelve el problema de la visualización abstracta del sonido. Comúnmente, comprender cómo interactúan las frecuencias en un medio físico requiere de placas de metal y transductores de alta fidelidad. He digitalizado y optimizado este fenómeno, ofreciendo una superficie matemática infinita.

Para el usuario, el sistema presenta un flujo de trabajo minimalista:

Captura o Generación de Señal: El usuario puede inyectar audio desde un micrófono físico (evaluando su entorno acústico) o utilizar el “Sound Check” interno, el cual genera tonos puros de frecuencias específicas (ej. 432Hz, 528Hz) y buffers de ruido coloreado (Blanco, Rosa, Marrón).
Análisis Espectral: El motor interno fragmenta la señal de audio capturada en bandas de baja y alta frecuencia.
Traducción Matemática: Las intensidades de las frecuencias bajas y altas se mapean en tiempo real a las variables m y n de la ecuación de onda de Chladni.
Representación Visual: Decenas de miles de partículas reaccionan estocásticamente a los valores de la ecuación sobre un lienzo infinito en pantalla. Las zonas de menor amplitud atraen partículas (nodos), mientras que las zonas de mayor amplitud las repelen (antinodos), dibujando el patrón geométrico característico de las ondas estacionarias.

El valor de esta herramienta se divide en dos facetas: una analítica, como herramienta de estudio visual del sonido para ingenieros y diseñadores; y otra contemplativa, actuando como un visualizador de frecuencias de meditación bajo un enfoque estético inspirado en reproductores musicales modernos.

Análisis Profundo de la Arquitectura

A nivel de ingeniería, he optado por una arquitectura que prioriza el rendimiento en el ciclo de pintado y una clara separación de responsabilidades, evitando por completo el “overhead” de frameworks reactivos pesados (como React o Vue).

Patrones Estructurales

El proyecto sigue un enfoque modular similar a una “Arquitectura de Puertos y Adaptadores” simplificada. Las reglas de negocio (física de partículas, análisis FFT) están aisladas de la interfaz de usuario. Se utiliza Astro primariamente como generador de sitios estáticos y enrutador, proporcionando una base ligera. Toda la interactividad del lado del cliente se delega a Web Components nativos o scripts directamente inyectados, apoyados por una gestión 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]

Modelado de Datos y Lógica de Motores

He dividido la lógica pesada en dos entidades principales que se ejecutan en el cliente:

AudioEngine: Encargado del contexto de audio web (AudioContext). Gestiona el ciclo de vida de los osciladores (OscillatorNode), los nodos de ganancia y el análisis por Transformada Rápida de Fourier (AnalyserNode). He optimizado este módulo calculando de antemano los índices estáticos para las bandas de frecuencia (Bajos: ~100-600Hz, Altos: ~600-3000Hz) en su fase de inicialización. Durante el ciclo de actualización (getAnalysis()), extrae la energía promedio de dichas bandas, y mediante interpolación lineal (Lerp) suaviza las transiciones de las variables m y n, asegurando una mutación fluida de los visuales ante cambios bruscos de ruido. Además, cachea los buffers de ruido generado para mitigar recálculos costosos y uso excesivo de memoria.
ChladniEngine: Representa el motor de físicas y renderizado sobre el Canvas. Acepta un HTMLCanvasElement y administra la posición de miles de partículas utilizando un solo Float32Array plano, evitando la creación y recolección de basura (Garbage Collection) de miles de objetos individuales. Durante su método update(), se computa la fórmula de la 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 el rendimiento, he izado las constantes de la función de onda (productos de n, m, PI y el factor de zoom) fuera del bucle de alta frecuencia. Implementé una lógica de “plano infinito”: en lugar de encerrar las coordenadas en límites rígidos, las partículas envuelven (wrap) los bordes de la pantalla. El parámetro zoom escala matemáticamente las coordenadas de entrada a la función de onda, alterando la densidad del patrón sin perder fidelidad o generar artefactos visuales, y utilizando todo el ancho y alto del viewport de manera asimétrica para asegurar que el patrón llene el espacio disponible.

Stack Tecnológico

Tecnología	Rol Arquitectónico	Justificación de Diseño
Astro	Framework Core / PWA	Estructura el proyecto, optimiza la entrega de CSS y HTML inicial. Permite convertir la aplicación en una PWA (con `@vite-pwa/astro`) fácilmente y sin dependencias bloqueantes de renderizado.
Vanilla TypeScript	Lógica de Negocio	Ausencia intencionada de frameworks UI reactivos para garantizar la máxima asignación de recursos de CPU al procesamiento matemático de las partículas en `ChladniEngine`.
nanostores	Gestión de Estado	Provee átomos de estado (atoms) independientes e interconectables. Desacopla eficientemente los componentes UI del `ChladniEngine` y `AudioEngine`.
HTML5 Canvas (2D)	Capa de Presentación	Escritura directa de píxeles/rectángulos vía API nativa mediante bucle `requestAnimationFrame`.
Web Audio API	Capa Sensorial / DSP	Acceso de baja latencia a hardware microfónico y capacidad de síntesis digital de señales (osciladores, generación de buffers de ruido) internamente en el hilo principal del navegador.
Tailwind CSS v4	Capa de Estilos	Manejo de utilidades CSS para asegurar la estética glassmorphism estricta y uso de variables de color como el Zinc-950 para el fondo.

En conclusión, este diseño acopla algoritmos de análisis espectral directamente con álgebra de ondas sobre un renderizador de memoria lineal. El uso de arrays tipados y la evitación del Virtual DOM aseguran ciclos de actualización estables de 60 FPS, independientemente de si el motor procesa el ruido marrón cacheado o la señal analógica del entorno a través de Web Audio API, estableciendo una plataforma de alta tolerancia a estrés computacional en el cliente.