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.
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.
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.
The lowest mode usually dominates what you hear, and its frequency is the pitch. Stiffer or lighter means faster, which means higher.
High modes lose energy faster. A strike starts bright and complex, then mellows toward the fundamental.
A mode with a still point exactly where you hit it cannot be excited at all. Hit elsewhere and you get a different mix.
The modes come from the geometry. Change the outline and every frequency moves — which is exactly what the tuner exploits.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Now the payoff. Every mode is a sine wave that fades. Add them up and you have the pressure signal your speaker plays.
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".
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.
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.
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.
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.
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.
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.
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.
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.
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.