Cymatics

About this page

In 1787 Ernst Chladni sprinkled sand on a metal plate, drew a violin bow along its edge, and watched the sand leap away from the parts that were shaking and settle along the lines that were still. Each pitch drew a different figure. The pictures were the first anyone had seen of what a sound looks like, and people paid to watch him make them. Napoleon, reportedly, remarked that Chladni had made sound visible. In the 1960s Hans Jenny filmed the same phenomenon in powders, pastes, and liquids and named it cymatics, from the Greek for wave.

This page is a plate you can bow with your voice. The particles are the sand. The sound is whatever your microphone hears.

What you are seeing

A vibrating plate does not shake evenly. At any frequency it settles into a standing wave: some regions swing up and down hard (the antinodes) and, between them, a web of lines stays perfectly still (the nodes). Sand on the antinodes is thrown into the air and lands somewhere else; sand on a node stays put. So the sand drifts, jump by jump, until it lies only on the lines that never move. The figure you see is a map of the plate’s silence.

The higher the pitch, the more waves fit across the plate, and the more intricate the figure. Loudness does not change which figure appears; it changes how hard the sand is thrown, which is why a quiet hum lets the pattern settle and a shout scatters it. Hold one steady note and the cloud will find its shape. Slide the note up or down and you will watch one figure dissolve into the next.

How it works

Everything runs in your browser, in a few hundred lines of plain JavaScript, with no libraries.

When you tap listen, the page asks for the microphone and feeds it into the Web Audio API’s analyser node, which computes a Fourier transform of the last few milliseconds of sound about sixty times a second.
From that spectrum it estimates the pitch you are making. A voice is not a pure tone; it is a fundamental plus a stack of overtones, and the loudest peak is often an overtone rather than the note itself. So the page uses a harmonic product spectrum: it multiplies each candidate frequency’s energy by the energy at two and three times that frequency, which rewards the true fundamental. Loudness comes from the root-mean-square of the raw waveform, with a fast attack and slow release so that consonants do not make the plate flinch.
Pitch, on a logarithmic scale from a low hum to a high whistle, selects a vibration mode. The figures use Chladni’s own approximation for a square plate with free edges, cos(nπx)·cos(mπy) ± cos(mπx)·cos(nπy), where the whole numbers n and m count the half-waves across the plate. A square plate can combine each pair of waves with either sign, and the two figures look quite different: with the minus sign the diagonals are always still, with the plus sign they never are. The page keeps a list of these modes ordered by how many waves they contain, and blends smoothly between neighbours as the pitch moves, so figures morph instead of snapping. A phone screen is taller than it is wide, so you are looking at a strip through the middle of a tall plate.
Each particle evaluates that function and its gradient at its own position. It slides downhill toward the zero lines, and it is kicked in a random direction by an amount proportional to how hard the plate is vibrating where it stands, which is the loudness times the height of the wave there. That single rule, ordered slide plus disordered kick, is enough. The sand finds the nodes on its own, exactly as it does on a real plate. Particles thrown off the edge are poured back on at random.
Drawing uses a 2D canvas with additive blending, so that where many particles pile up on a node the line glows, and a slight fade between frames instead of a full clear, so motion leaves a trace. Colour follows pitch. The particle count adapts to the size of the screen and drops if a frame ever takes too long, so it should stay smooth on a phone.

If the microphone is unavailable, or you would rather play the plate by hand, drag a finger across the screen: left to right is low to high, and higher on the screen is louder.

What it is not

A real plate obeys the biharmonic equation, and its true mode shapes depend on the material, the thickness, and exactly how it is held. The cosine formula above is a good likeness of the simplest cases, not a physical simulation. A real voice, too, would excite several modes at once. This page picks one pitch and one figure at a time because that is what makes the connection between what you sing and what you see immediate.

Privacy

The microphone stream is analysed on your device and discarded, frame by frame. Nothing is recorded, stored, or sent anywhere. The page has no server, no analytics, and no network requests beyond loading itself. You can confirm this by reading the source, which is short.

How it was made

Written by Claude, Anthropic’s model, working in a Claude Code session at the site owner’s request: three files, one each of HTML, CSS, and JavaScript, tested headlessly in Chromium with a synthesised tone sweep standing in for a microphone, then pushed to this GitHub Pages site. The owner asked for a visual work well suited to a phone, a cloud of particles shaped by sound, in the spirit of cymatics. The rest is Chladni’s.

back home