Simulate Drumhead Acoustic Waves in Matter.js

This article explains how to simulate drumhead acoustic surface waves using Matter.js by modeling a circular membrane as an interconnected lattice of constrained particles. By configuring a grid of point masses connected by elastic constraints, anchoring the perimeter to represent a clamped rim, and applying a localized impulse, you can reproduce wave propagation, boundary reflections, and resonance patterns governed by the two-dimensional wave equation.

Mechanics of the Mass-Spring Membrane

A traditional drumhead consists of a flexible membrane held under uniform tension along a fixed circular boundary. In continuous physics, its transverse motion is governed by the 2D wave equation:

\[\frac{\partial^2 z}{\partial t^2} = c^2 \nabla^2 z\]

Where \(c = \sqrt{T/\sigma}\) represents wave velocity determined by tension \(T\) and surface mass density \(\sigma\).

To simulate this discrete approximation in Matter.js, the continuous membrane is discretized into a polar or Cartesian mesh of point-mass bodies (Matter.Bodies.circle). Each particle acts as a node connected to adjacent neighbors via linear spring constraints (Matter.Constraint). Tension is represented by the resting stiffness of these constraints, while node masses represent local surface density.

Constructing the Particle Mesh

The simulation space requires an array of dynamic particles bounded by static anchor nodes. A Cartesian grid clipped to a circular radius provides consistent spatial density across the drumhead.

1. Node Generation: Iterate across a 2D coordinate space within a designated radius \(R\). For each grid coordinate \((x, y)\) where \(\sqrt{(x - x_0)^2 + (y - y_0)^2} \le R\), instantiate a circular body with zero restitution, negligible friction, and a low radius (e.g., 2 to 4 pixels) to act as a point mass.
2. Clamping the Rim: Identify nodes near the boundary where the distance from the center exceeds \(R - \Delta r\) (where \(\Delta r\) is the grid spacing). Set isStatic: true on these edge nodes to emulate the rigid hoop of a drum.

Linking Particles with Constraints

Surface wave propagation depends on restoring forces applied across adjacent nodes. In Matter.js, these are established using distance constraints:

• Orthogonal Connections: Connect each non-static node to its direct horizontal and vertical neighbors. The length of each constraint should match the grid spacing, with stiffness set to a high value (typically 0.8 to 1.0) to emulate high surface tension.
• Diagonal Cross-Bracing: Adding diagonal constraints (shear springs) prevents artificial grid anisotropy and ensures acoustic waves propagate with circular wavefronts rather than diamond-shaped artifacts. Set diagonal constraint lengths to \(\sqrt{2} \times \text{grid spacing}\).
• Damping Configuration: Set the damping property on each constraint to a low non-zero value (e.g., 0.001 to 0.01). This parameter simulates internal material dissipation and structural losses within the membrane material.

Inducing Impulses and Wave Propagation

Wave generation begins by perturbing the equilibrium state of the mesh:

• Drumstick Strike Simulation: Select a cluster of nodes at the strike location (either at the center for fundamental modes or off-center for asymmetric harmonic modes).
• Force Injection: Use Matter.Body.applyForce to apply an instantaneous planar vector to the selected bodies, or directly displace their positions prior to initiating the engine runner.
• Propagation Dynamics: As displaced particles accelerate, the stretched constraints pull adjacent particles out of equilibrium. The disturbance travels radially outward at a speed proportional to constraint stiffness divided by node mass.
• Boundary Reflections: When the wavefront contacts the static boundary particles, the fixed constraints force a phase inversion, reflecting the energy back toward the center and creating constructive and destructive interference patterns (standing nodal lines).

Tuning Parameters for Acoustic Fidelity

To achieve realistic wave behavior in the simulation, calibrate the following engine and body properties:

• Engine Iterations: Increase engine.positionIterations and engine.velocityIterations to at least 10 or 16. Standard physics settings cause constraint stretching errors that artificially bleed energy from high-frequency acoustic waves.
• Air Friction: Reduce frictionAir on all dynamic bodies to a near-zero value (e.g., 0.0005). Excessive air drag prevents standing wave formation by prematurely attenuating high-frequency surface harmonics.
• Mass Uniformity: Keep all dynamic body masses identical to prevent impedance mismatches, which cause unphysical internal reflections within the open drum surface.