How Modal2D actually works

You draw a shape. It rings like a real object. In between sits one idea — every vibrating thing has a small set of favourite ways to move, and any sound it makes is just those, added up and fading. This page builds that idea from scratch, and every demo on it computes for real in your browser.

intuition first live eigensolver in JS audible — you can hear the modes companion to the technical overview

00The big idea, in one page

Hit a wine glass and you hear a clear note. Hit a wooden block and you hear a dull thud. Same physics, same equations — the difference is entirely in the shape and the material. Modal2D is a machine for turning shape + material into sound.

Picture the object as a mesh of tiny masses connected by springs. Push one and everything wobbles in a complicated, messy way. But hidden inside that mess is a small number of special motions — patterns where every point moves in step, all reaching their extremes at the same instant, and the shape of the pattern never changes. It just breathes in and out, faster or slower.

Those are the modes. Each one behaves like a single simple pendulum: one frequency, one rate of dying away. Everything else the object can do is just a mixture of them.

any motion = a1 · (mode 1) + a2 · (mode 2) + a3 · (mode 3) + ... Finding the modes is the hard part, and you only do it once per shape. After that, simulating the object is just adding up decaying sine waves.

That last sentence is why this can run in real time. The expensive step — untangling the mesh into its modes — happens once, when you change the shape. Producing 44,100 audio samples every second afterwards is just arithmetic on a few dozen numbers.

Why a note has a pitch

The lowest mode usually dominates what you hear, and its frequency is the pitch. Stiffer or lighter means faster, which means higher.

Why timbre changes as it rings

High modes lose energy faster. A strike starts bright and complex, then mellows toward the fundamental.

Why where you hit matters

A mode with a still point exactly where you hit it cannot be excited at all. Hit elsewhere and you get a different mix.

Why shape controls everything

The modes come from the geometry. Change the outline and every frequency moves — which is exactly what the tuner exploits.

The whole pipeline: shape → chop into triangles → build two big matrices for stiffness and mass → extract the modes → work out how hard your strike excites each one → add up decaying sines → that is the sound. The rest of this page is those steps, one at a time, each with a demo you can poke.

01Chop the shape into triangles

A computer cannot handle a smooth continuous shape directly. So we approximate it: cover it with triangles, and only track what happens at the corners (the nodes).

Inside any one triangle we simply assume the material stretches linearly between its three corners. That is crude for a single triangle — but with a few hundred of them the approximation gets good, and it keeps all the maths simple enough to be fast.

Each node can move in x and y, so a mesh with 300 nodes has 600 numbers describing its state — 600 degrees of freedom. That number is the size of the problem.

DEMO

Meshing a shape

Drag the slider to change how finely the shape is chopped. More triangles means more accuracy, but the eigen-step gets much more expensive — it grows roughly with the cube of the node count — so there is always a tradeoff.

—

Move the mouse over the shape to single out one triangle — that one element is the unit everything else is built from.

02Turn geometry into two matrices

All the physics gets packed into two big grids of numbers: K, how stiff the object is, and M, how heavy it is.

Take one triangle. If you know how its three corners moved, you know how much it got stretched and sheared — and from the material stiffness you know how much energy that costs. Write that relationship down and you get a small 6×6 table for that triangle: its element stiffness matrix. Do the same for its weight and you get its mass matrix.

Then you assemble: every triangle adds its small table into the big one, at the rows and columns belonging to its own corners. Nodes shared by several triangles collect contributions from all of them — that is how separate pieces become one connected object.

K · (how far it moved) = (force needed) K is mostly zeros: a node is only directly connected to its immediate neighbours. That sparsity is what keeps everything tractable.
DEMO

Assembly: small tables into one big one

Left: a small mesh. Right: the global stiffness matrix it builds. Move over an element on the left and watch exactly which entries of K it contributes to — the block pattern is just "these corners are connected to each other".

Brighter means larger. K is symmetric, and dense only near the diagonal: neighbours in the mesh end up near each other in the matrix.

03Find the modes — the one expensive step

This is the heart of it. We are looking for motions that keep their shape: push the object into that pattern, and the restoring forces point exactly back along the same pattern, so it oscillates instead of turning into something else.

K · phi = omega² · M · phi Read it as: "stiffness acting on this pattern gives back the same pattern, scaled." phi is the mode shape, omega its frequency. Every solution is one mode.

A mesh with 600 degrees of freedom has 600 solutions — but we only want the lowest few dozen. Anything above about 20 kHz is inaudible, and the low modes carry the character of the sound, so the solver hunts for the smallest frequencies and stops.

The output is the object's complete acoustic fingerprint: a list of frequencies, and for each one a picture of how the object moves at that frequency. From here on the mesh and the matrices are no longer needed.

LIVE

A real eigensolver, running right here

This is not an animation of a solve — it is an actual symmetric eigensolver (Jacobi rotations) running in your browser, on a string chopped into segments. Press solve and it finds the modes from nothing but the stiffness and mass matrices.

press solve

Click any mode to animate it. Mode n has n−1 still points in the middle — higher modes subdivide the string more finely, and vibrate faster.

Why this shape of answer is so useful: in ordinary coordinates every node is coupled to its neighbours, so you would have to solve hundreds of tangled equations at every instant. In mode coordinates the tangle vanishes — each mode is independent of all the others. Hundreds of coupled equations become a few dozen separate, trivial ones.

04Hit it — which modes wake up?

The modes are just possibilities. A strike decides how much of each one actually happens.

The rule is beautifully simple: look up how much the mode shape moves at the exact point you hit. That number is the amount of that mode you get.

amount of mode i = (how much mode i moves at the strike point) Hit a place where a mode barely moves and you barely excite it. Hit one of its still points and you get exactly zero of it.

This one line explains an enormous amount of real instrument behaviour. Strike a drum dead centre and it thumps, because you have picked the only spot that excites the symmetric modes and misses all the lopsided ones. Move off-centre and it comes alive. Guitarists know this as playing near the bridge for a bright sound and over the hole for a mellow one.

DEMO

Strike position changes the recipe

Click anywhere on the string. The bars show how strongly each mode gets excited. Try hitting the exact middle, then slightly off it, and watch whole modes switch off and on.

Hit the centre: every even-numbered mode collapses to nothing, because they all have a still point right there. That is a real effect, not a quirk of the demo.

05Add up the sines — and that is the sound

Now the payoff. Every mode is a sine wave that fades. Add them up and you have the pressure signal your speaker plays.

sound(t) = SUM over modes of amount · sin(omega · t) · e^(−decay · t) Three numbers per mode: how much, how fast, how quickly it dies. That is the entire synthesis engine.

The decay is what makes it sound like a real object rather than an organ. Crucially, higher modes decay faster — friction inside a material eats fast wiggles more greedily than slow ones. So the sound starts bright and busy, and settles toward the pure fundamental. That evolution is most of what your ear recognises as "wood" or "metal" or "glass".

AUDIO

Hear the modes add up

The waveform below is built by summing the modes found by the live solver above. Press play to actually hear it. Then pull the damping and brightness sliders around — you are steering exactly the same three numbers per mode that the real engine uses.

—

Turn "high-mode decay" to zero and it sounds like a synthesiser. Turn it up and it becomes a struck object. Same modes, only the decay rates changed.

06In two dimensions: drum modes and Chladni figures

Everything so far was a string, so the modes were easy to picture. On a real 2D plate the same maths produces the famous patterns.

A 2D mode has still lines instead of still points. Sprinkle sand on a vibrating plate and it bounces away from the moving areas and piles up along those lines — the sand draws the mode for you. These are Chladni figures, and people have been producing them since the 1780s.

One subtlety the app takes seriously: a real driven plate does not vibrate in a single mode. Drive it at some frequency and every mode responds a bit, most strongly the ones whose own frequency is nearby. What the sand actually draws is the still lines of that mixture. That is why sweeping the driving frequency makes the pattern reorganise itself so dramatically.

DEMO

Plate modes, and the sand that finds them

Pick a plate shape. The first two have textbook formulas; the rest have none at all, so the page solves them numerically with the very eigensolver from section 3. Left: the mode shapes (red and blue are moving in opposite directions; the pale boundaries between them are the still lines). Right: what sand would do when the plate is driven at the frequency you choose.

—

The rectangle and disc have textbook formulas (sines, and Bessel patterns of rings and diameters). The triangle, hexagon and ring have none — watch the label: those are discretised and handed to the same eigensolver from section 3, which is exactly what the real engine does for every shape. Note the disc's frequencies, and their frequencies are not a harmonic series — which is exactly why a drum sounds like a thud where a string sounds like a note. Park the drive on a mode frequency and the sand snaps to it. Put it between two and you get a genuine hybrid that matches neither.

07Getting the sound out into the room

A vibrating surface pushes air. Every little patch of the surface sends out its own ripple, and those ripples add up — reinforcing in some directions, cancelling in others.

That is why real instruments are directional. Two patches half a wavelength apart along your line of sight arrive exactly out of step and cancel, so you hear a dip. Move around the instrument and the balance changes. High notes, with short wavelengths compared to the body, beam much more sharply than low ones.

DEMO

Where does the sound go?

A vibrating object in the middle, and the polar plot of how loud it is in each direction. Raise the frequency and watch a smooth, even bubble break up into narrow beams and nulls.

—

At long wavelengths the object is basically a point source and radiates evenly. Once it is several wavelengths across, interference carves it into lobes.

08Running it backwards: tuning a shape to a note

Everything so far went forwards: shape in, sound out. The tuner runs the loop in reverse — note in, shape out.

There is no formula for "what shape rings at 440 Hz". So the app searches: build a shape, solve it, listen to what came out, adjust, repeat. Make it wider, the pitch drops; narrower, it rises. Squeeze until it lands on the note.

The catch — and this is a genuinely subtle one — is knowing which mode you are chasing. As the shape changes, mode frequencies slide around and sometimes nearly collide. When two of them approach, they refuse to cross: they veer apart and swap character. A search that blindly follows "the third one in the list" will, at that moment, silently hop onto a completely different physical mode and start chasing the wrong thing.

This is not hypothetical. It is exactly the failure that made the tuner grind forever earlier in this project. The fix is to track modes by continuity — follow the one closest to where the mode was last time — rather than by index. The app has a Mode Sweep view that draws these near-collisions so you can see them happen.
DEMO

Avoided crossings: why index-chasing fails

Each curve is one mode frequency as the shape is stretched. Watch the circled spots: the curves rush together, then bend away without ever touching, trading roles as they go.

Follow one curve with your eye through a circle. What it is before and after is not the same thing — that swap is what breaks naive tuning.

09All the modules, side by side

The whole engine on one screen, each stage running in isolation and live. This is the same pipeline the app runs, just small enough to watch.

ALL

The pipeline, running

Left to right, top to bottom: the shape is meshed; its matrices are built; the eigensolver extracts modes; a strike picks a recipe; the modes are summed into a waveform; the sound radiates. Every panel is computed, not drawn by hand.