Eigendrum

Inspiration

Eigendrum was born from a simple question: What does a shape sound like? In physics, the frequencies at which a structure naturally vibrates are its eigenvalues. While software like MATLAB can calculate these statically, I wanted to build an instantaneous, interactive sandbox. I wanted to create a playground where anyone could draw an arbitrary 2D shape with their mouse and immediately see and hear the physical wave propagation in real-time right inside a web browser.

How I Built It

The application is built entirely with a high-performance frontend stack using standard web standards:

• HTML5 Canvas: Handles the real-time visual grid rendering, drawing inputs, and fluid propagation animations at 60 FPS.
• Web Audio API: Generates and modulates spatialized audio nodes dynamically based on the kinetic energy calculations across the canvas boundary points.
• Vanilla JavaScript: Implemented the core engine directly in clean JS to eliminate framework overhead and maximize numerical computation speeds.

The Mathematics Behind the Engine

At its core, Eigendrum solves the continuous two-dimensional wave equation:

$$ \frac{\partial^2 u}{\partial t^2} = c^2 \nabla^2 u = c^2 \left( \frac{\partial^2 u}{\partial x^2} + \frac{\partial^2 u}{\partial y^2} \right) $$

To make this calculate instantaneously on a user's screen, I discretized the domain into a 2D lattice grid. By applying a finite difference time domain (FDTD) approximation, the displacement $u_{i,j}$ at the next time step $(n+1)$ is derived from the current and previous states:

$$ u^{n+1}{i,j} = 2u^n{i,j} - u^{n-1}{i,j} + r^2 \left( u^n{i+1,j} + u^n_{i-1,j} + u^n_{i,j+1} + u^n_{i,j-1} - 4u^n_{i,j} \right) $$

Where \( r = \frac{c \cdot \Delta t}{\Delta x} \) is the Courant stability factor. Dirichlet boundary conditions are dynamically enforced ( \( u = 0 \) at the perimeter) along whatever custom geometry the user draws, mimicking a clamped drum skin.

Challenges I Faced

1. Mathematical Stability vs. User Freedom: If a user draws sharp, single-pixel corners or erratic geometries, the finite difference approximation can rapidly blow up to infinity. Keeping the simulation mathematically stable under arbitrary boundaries required strict capping of the Courant number and implementing boundary smoothing algorithms.
2. Audio/Visual Synchronicity: Extracting wave amplitude data from the canvas array and piping it cleanly into the Web Audio API without causing audio crackling or dropped visual frames was incredibly difficult. I had to balance memory allocations and avoid garbage collection spikes by utilizing pre-allocated typed arrays.

What I Learned

I learned the immense power of raw browser APIs. Building Eigendrum proved that you do not need heavy native desktop software like Ansys or MATLAB to run accessible, complex physics simulations. It forced me to dig deep into numerical analysis, discrete wave mechanics, and micro-optimizations for the JavaScript runtime engine.

Built With

• love