Flags
The same escapement four ways. They stack.
Use it
One script, then a canvas. Height is the size; a wider canvas gives a gear train more room.
<script src="https://cdn.jsdelivr.net/gh/TonkaTuff/escapement@v0.1.0/dist/escapement.min.js"></script>
<canvas class="gear" width="300" height="200" data-gear-body="anchor"></canvas>| attribute | value | what it does |
|---|---|---|
| data-gear-body | name | any name above |
| data-gear-form | pair · clockwork · balance · wave · cradle · metronome · foucault · harmonograph · lissajous · spirograph · rose · radar · sonar · scope | which kind, within its mode |
| data-gear-teeth | 13,21,9,17,11 | gears: tooth counts along the train; keep the middle ones odd and it meshes |
| data-gear-speed | number | gears: radians a second for the first wheel (0.5) |
| data-gear-period / -swing / -length / -bob | number | escapement: seconds per swing (1.4), how far it swings, the rod as a fraction of the height (0.6), the bob's size (0.05) |
| data-gear-count / -cycle / -base | number | pendulum wave: how many (15), seconds before they line up again (30), swings per cycle for the longest (20) |
| data-gear-bpm / -day / -pegs | number | metronome tempo (100); Foucault's seconds per turn of the swing plane (60) and pegs round the ring (24) |
| data-gear-cycle / -decay / -a / -b / -r / -d / -k | number | traces: seconds per harmonograph figure (40) and its damping; Lissajous ratio (3:2); spirograph wheel and pen (0.375, 0.45); rose petals (5) |
| data-gear-period / -blips | number | sweeps: seconds per turn or ping (4), targets on the screen (7) |
| data-gear-n / -tempo | number | dots along a trace at a 64px height, scaled up with size · how fast it all happens (1) |
| data-gear-ink / -lite / -ground | 1 | monochrome dots that follow the page theme · fewer dots · a dark workshop behind |
| data-gear-glow | 0 | no soft glow, just the dots on a clear canvas |