Chladni

我设计了这个系统，用于实时探索声学频率的视觉呈现。开发背后的动机是提供一个高性能、低延迟的环境，使克拉尼（Chladni）图案的数学理论可以直接在浏览器中渲染，从而让研究和视听冥想工具更易于获取。

业务实用性与工作流

该引擎解决了声音抽象可视化的难题。通常，理解频率如何在物理介质中相互作用需要金属板和高保真换能器。我将这一现象数字化并进行了优化，提供了一个无限的数学曲面。

对于用户来说，系统呈现了一个极简的工作流：

1. 信号捕获或生成： 用户可以从物理麦克风注入音频（评估其声学环境），或使用内部“Sound Check”，生成特定频率的纯音（例如 432Hz、528Hz）以及彩色噪声缓冲区（白噪声、粉红噪声、棕色噪声）。
2. 频谱分析： 内部引擎将捕获的音频信号分解为低频和高频频段。
3. 数学转换： 低频和高频的强度被实时映射到克拉尼波动方程的 m 和 n 变量中。
4. 视觉呈现： 数以万计的粒子在屏幕上的无限画布上对方程的值产生随机反应。振幅较低的区域吸引粒子（波节），而振幅较高的区域排斥粒子（波腹），绘制出驻波特有的几何图案。

该工具的价值分为两个方面：分析性，作为工程师和设计师的声音视觉研究工具；冥想性，在受到现代音乐播放器启发的审美视角下，充当冥想频率的可视化工具。

深入架构分析

在工程层面，我选择了一种优先考虑绘制循环性能和清晰职责分离的架构，完全避免了重型响应式框架（如 React 或 Vue）的额外开销。

结构模式

该项目遵循类似于简化版“端口与适配器架构”（Hexagonal Architecture）的模块化方法。业务规则（粒子物理学、FFT 分析）与用户界面相隔离。 Astro 主要用作静态站点生成器和路由器，提供轻量级基础。所有客户端交互均委托给原生 Web Components 或直接注入的脚本，并由外部原子状态管理提供支持。

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]

数据建模与引擎逻辑

我将核心逻辑分为在客户端运行的两个主要实体：

1. AudioEngine： 负责 Web Audio 上下文 (AudioContext)。管理振荡器 (OscillatorNode)、增益节点和快速傅里叶变换 (AnalyserNode) 分析的生命周期。 我在初始化阶段预先计算了频段（低音：~100-600Hz，高音：~600-3000Hz）的静态索引，从而对该模块进行了优化。在更新循环 (getAnalysis()) 期间，提取这些频段的平均能量，并通过线性插值 (Lerp) 平滑 m 和 n 变量的过渡，确保视觉效果在噪声骤变时能够平滑突变。此外，它会缓存生成的噪声缓冲区，以减轻高昂的重新计算和过度的内存消耗。

2. ChladniEngine： 代表 Canvas 上的物理和渲染引擎。接受 HTMLCanvasElement 并使用单个平铺的 Float32Array 管理数千个粒子的位置，避免了数千个独立对象的创建和垃圾回收 (Garbage Collection)。 在其 update() 方法中，对每个粒子计算克拉尼板公式： $$ Amp = |\cos(n\pi x)\cos(m\pi y) - \cos(m\pi x)\cos(n\pi y)| $$ 为了最大化性能，我将波函数常数（n、m、PI 和缩放因子的乘积）提升到了高频循环之外。 我实现了一个“无限平面”逻辑：粒子不是将坐标封闭在严格的边界内，而是包裹（wrap）屏幕边缘。zoom 参数在数学上缩放波函数的输入坐标，在不丧失保真度或产生视觉伪影的情况下改变图案的密度，并以非对称的方式利用视口的整个宽度和高度，以确保图案填满可用空间。

技术栈

技术	架构角色	设计考量
Astro	核心框架 / PWA	结构化项目，优化初始 CSS 和 HTML 交付。无需阻塞渲染的依赖项，即可轻松将应用转换为 PWA（通过 @vite-pwa/astro）。
Vanilla TypeScript	业务逻辑	故意放弃响应式 UI 框架，以确保将最大的 CPU 资源分配给 ChladniEngine 中粒子的数学处理。
nanostores	状态管理	提供独立且可互连的状态原子 (atoms)。将 UI 组件与 ChladniEngine 和 AudioEngine 高效解耦。
HTML5 Canvas (2D)	呈现层	通过 requestAnimationFrame 循环利用原生 API 直接写入像素/矩形。
Web Audio API	感知层 / DSP	在浏览器主线程内部低延迟访问麦克风硬件，并具备数字信号合成能力（振荡器、噪声缓冲区生成）。
Tailwind CSS v4	样式层	样式实用程序管理，确保严格的 glassmorphism 玻璃拟态美学，并使用 Zinc-950 等颜色变量作为背景。

总之，该设计将频谱分析算法直接与线性内存渲染器上的波代数耦合。类型化数组的使用和 Virtual DOM 的规避旨在维持 60 FPS 的稳定更新周期，无论引擎是在处理缓存的棕色噪声还是通过 Web Audio API 处理来自环境的模拟信号，从而在客户端形成一个在负载下保持稳定的计算平台。