Draw My Canvas / studio

Chladni Figures

Grains settling on the nodal lines of a plate as its driving frequency sweeps.

Plate 11chladni

Waiting for the animation above to load…

What lands in the file, and what the width does

One click writes whatever the animation is drawing at that moment to a PNG, with the drawmycanvas.com mark drawn into the picture rather than laid over it. Leave the width box empty and you get the stage exactly as your browser rasterised it — your window’s width times its device pixel ratio, which is about 1,600 px across from a 1280‑px window on a HiDPI laptop and about 353 px from a 390‑px phone.

Type a width instead, or take a preset, and the frame is redrawn into a canvas that wide: the height follows the stage’s own shape and the mark scales with it. The stage is 16:9 on a wide window and 4:3 below 560 px, so a width of 1200 saves 1200×675 on a laptop and 1200×900 on a phone. 1200 px is the width Open Graph and X link cards are cut from — the canonical card is 1200×630, and a card crops the extra height rather than letterboxing it.

Honest limits. Asking for more pixels than the stage was drawn at resamples pixels that were never drawn: a 1920‑px file exported from a 353‑px phone stage is bigger, not sharper. For a big file that is sharp, use Save as wallpaper: it draws the plate again from scratch at exactly 1179×2556 or 1290×2796 (phones), 1920×1080, 2560×1440 or 3840×2160 (4K), so every line is rasterised at that size and the shape is the screen’s, never stretched. Because the plate restarts, a wallpaper is a fresh run of it rather than the exact frame on screen; it is given as long as the stage has been running, up to 20 seconds, to develop. A very large width is a real memory allocation and a browser is allowed to refuse it; when that happens the line above says so plainly and nothing else on the page changes. Stills are PNG only — no JPEG, no WebP. On browsers that can record video, Record a clip saves 5, 10 or 20 seconds of the running animation as MP4 or WebM (whichever this browser can encode) at the same width, with the mark in every frame. A clip is not a seamless loop, it has no audio, and a width bigger than the stage is resampled rather than sharper — only the wallpaper is redrawn at its size. Where a browser cannot record video the button never appears and a PNG is the only export. And nothing is uploaded: the frame or clip is assembled in your own browser, so no frame of this plate ever reaches us.

Live on an HTML canvas · vanilla JavaScript · no dependencies Open fullscreen

About this piece

In 1787 Ernst Chladni sprinkled sand on a metal plate and drew a violin bow along its edge. The sand jumped off everywhere the plate was moving and piled up along the lines that stayed still — the nodal lines. Every resonant frequency has its own set of them, and they are the reason a standing wave is something you can look at rather than only calculate.

The standard two-mode model of that nodal set on a square plate is

f(u, v) = sin(nπu)·sin(mπv) − sin(mπu)·sin(nπv)

and the figure is the curve f = 0. A grid of points is sampled across the plate and a grain is kept only where the sample sits close to that curve. What you are looking at is the nodal set itself, grain by grain — not an outline traced around it.

“Close” deserves a note, because the obvious test is wrong. Thresholding on |f| gives trails that are fat where the plate is loud and hairline where it is quiet, since |f| climbs at different rates in different regions. The distance from a point to the curve is |f| divided by the length of the gradient, and both partial derivatives of f are available in closed form, so that is what is tested here. The trail comes out a constant 1.35% of the plate wide everywhere.

What to look for

The sweep holds on each whole-number pair for about five and a half seconds — 5:3, 7:4, 6:4, 4:7, 8:5, 5:6, 6:3, 3:8 — then takes about two seconds to dissolve into the next, as if the driving frequency were being turned. The crisp symmetric states are the classical figures; the states in between are not.

Two lines are always there whatever the mode: the plate edge, and the diagonal u = v. Both fall straight out of the formula — swap u and v and f changes sign, so it must be zero where they are equal.

Honest limit: this is the square-plate model drawn across a rectangular frame, so the figure is stretched to whatever aspect your window has. A real rectangular plate resonates at a different set of modes. It is a faithful picture of the equation, not a simulation of a specific piece of metal.

Curious how the loop and canvas fit together? Read how it works →

More from the gallery

All 32 animations in the gallery →