Flags
The same plate four ways. They stack.
Use it
One script, then a canvas. Height is the size; a wider canvas gives a tank or a string more room.
<script src="https://cdn.jsdelivr.net/gh/TonkaTuff/chladni@v0.1.0/dist/chladni.min.js"></script>
<canvas class="sound" width="300" height="200" data-sound-body="chladni-plate"></canvas>| attribute | value | what it does |
|---|---|---|
| data-sound-body | name | any name above |
| data-sound-form | round · bowed · one · slit · plucked · fork · hex | a round plate, or one held on a single mode; one drop, or a double slit; a plucked string; a tuning fork; a hexagonal lattice |
| data-sound-hold | number | seconds a plate holds each mode (6), a string each harmonic (3) |
| data-sound-n / -m / -grains | number | bowed plate: the mode numbers (3, 5); grains of sand at a 64px height (3200) |
| data-sound-wave / -speed | number | wavelength as a fraction of the height, and how fast the rings run: tanks (0.09, 3.5), speakers (0.11, 5), cymatics (0.13, 4) |
| data-sound-gap / -period | number | the slit spacing (0.16); seconds between drops (5), or between plucks (4) |
| data-sound-amp / -pitch / -pluck / -decay | number | string: how far it swings (0.16), how fast (2.2), where it is plucked 0 to 1 (0.22), how fast it rings down (0.45) |
| data-sound-cone | number | a speaker cone's radius as a fraction of the height (0.16) |
| data-sound-tempo | number | how fast it all happens (1) |
| data-sound-ink / -lite / -ground | 1 | monochrome dots that follow the page theme · half the dots · a dark bench behind |
| data-sound-glow | 0 | no soft glow, just the dots on a clear canvas |