Chladni Plate

A control that answers with a picture: tuning an audio product, a hero that rewards playing it, a loading state that settles into a figure, a signature drawn from a pair of numbers. The knob is a real slider in hertz on a log scale, spoken with the bow, the finger and the figure it rings in; each resonance is a detent and a lock lamp goes amber, then green; arrows fine-tune, Page keys jump to the next resonance. Bow the plate along an edge and it plays where the bow touches, and rings on after; hold a finger on it and the modes that move there give way; tap it and the sand jumps. Drive is a toggle, Damp a toggle, Bow and Strew keys, B bows.

Copy the chladni folder from its package next to your page, link its stylesheet and construct it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="chladni/chladni.css">
<div id="chladni" style="width: min(92vw, 440px)"></div>

<script type="module">
  import ChladniPlate from './chladni/chladni.mjs';

  const chladni = new ChladniPlate(document.getElementById('chladni'), {
    frequency: 1872,
    drive: true,
    grains: 12000,
  });

  // chladni.update({ … });   change any option in place
  // chladni.destroy();        and take it away again
</script>

new ChladniPlate(element, options)

Builds it inside the element with these options.

frequency

mode

The mode the plate is ringing in, if any.

energy

The plate's energy now, 0…1.

bowed

The edge a bow is on, or null.

update(opts = {})

Change options in place.

setFrequency(f)

strew()

Strew the plate with fresh sand, evenly.

bow(edge, { from = 0.16, to = 0.84, ms = 1700 } = {})

Draw a bow along an edge once, as a hand would: on, along, off.

stopBow()

Lift the bow.

damp(pt)

Put a finger on the plate at { u, v } (or lift it with null): the modes that move there give way.

tap(u, v)

Tap the plate at (u, v), in plate widths: the sand near it jumps.

setPour(on)

Pour: the next stroke on the plate drops sand instead of a finger.

glide(f, ms = 1300)

Turn the knob to f by way of every frequency between, as a hand would; resolves true if it got there.

stopGlide()

destroy()

Stops it and cleans up after it.

Events it fires, which bubble from the element: change, input, pourend, settle.

1. StrewnSand evenly over the black plate; the display gives the frequency.
2. On a resonanceThe display names the mode and its lamp is green; the sand hops off the moving parts and drifts onto the nodal lines, and the figure draws itself in a second or two.
3. Nearing oneThe lamp is amber; the plate rings, and the sand shivers, more the nearer the knob is to a mode. Landing on it snaps the sand into the figure.
4. BowedA press at an edge drawn along it is a bow: a stick and horsehair lie beside the edge and a lit mark shows where it touches. Where it touches picks the mode that answers; how fast it goes sets how hard the plate rings.
5. Ringing downThe bow lifts, or the drive is switched off: the plate's energy falls over about 1.6 s, the sand keeps walking, then rests and the loop sleeps.
6. FingeredA finger held on the plate damps what moves under it, and a soft shadow shows where. The figure reorganises round it; moving the finger changes which figure wins.
7. TappedA short press throws the sand near it outward on small arcs, brighter and larger while airborne, and it falls back under whatever energy is left.
8. PouringAlt-drag, or a Pour stroke, drops a pinch of sand; on a resonance it runs to the lines.
9. SingingWhile the plate rings a faint shimmer follows the figure: the parts moving up and those moving down alternate. A CSS animation; it stops as the plate rings down.
10. Drive offThe lamp on the Drive key goes out; the plate rings down and the sand stays where it lies. A bow still plays it.
11. ToneOptional: a sine at the drive and a quieter octave, following the plate's energy. Off by default.
12. AluminiumA bead-blasted case, a turned knob, a reflective LCD.
13. GraphiteA soft-touch case, a dark knob, a vacuum-fluorescent display.
14. Read-onlyA display of a figure: the knob, keys and plate do nothing.
15. Off screen or hiddenPaused, and the tone and the shimmer stop.
16. Reduced motionThe figure appears at once, also for a bow or a finger; no arcs, no ring-down, no shimmer, no tone.

Made of: Plate modes, Drive point, Bowed edge, Finger damping, Damped resonance, Plate energy ring down, Sand on nodal lines, Tap arcs, Grain density imagedata, Log scale knob, Lock lamp, Css shimmer, Sleeping loop.

Read more: How the Chladni Plate works.

Original. The plate's motion is its modes summed through their resonances (131 modes, every (n, m) to 12 the range holds, a pair ψ± for n ≠ m) on a 96 × 96 grid, computed when the frequency, the drive point or the finger changes; a shaker at the centre moves only the even ones, a bow anywhere on an edge moves nearly all. Q 28. The plate's energy is pumped by the drive and rings down (τ 1.6 s); the sand's kick is E^1.3; 12,000 grains counted into one ImageData a frame at the plate's CSS size. The plate itself is baked once per size.