The harmonograph

The drawing on the front of this site is not a decoration that finished rendering. It is a simulation of a machine, and it stopped when the machine ran out of energy.

The machine is a harmonograph. They were built in the second half of the nineteenth century, mostly as parlour instruments, and the idea is almost embarrassingly simple: hang a pen from one pendulum, hang the paper from another, set both swinging, and let them draw on each other. Nobody guides it. The figure is entirely a consequence of the two periods, and of the fact that both pendulums are slowly dying.

I like it because it is a mechanism whose whole behaviour is legible from four numbers, and because the thing it produces is prettier than it has any right to be.

Two pendulums, four numbers

Take the simplest arrangement — one pendulum swinging left-to-right under the pen, one swinging front-to-back under the paper. Each contributes a decaying sinusoid to one axis. Real instruments usually had two pendulums per axis, which is what makes the figures interesting rather than merely elliptical, so:

$$\begin{aligned} x(t) &= A_1 \sin(f_1 t + p_1)\,e^{-d_1 t} + A_2 \sin(f_2 t + p_2)\,e^{-d_2 t} \\ y(t) &= A_3 \sin(f_3 t + p_3)\,e^{-d_3 t} + A_4 \sin(f_4 t + p_4)\,e^{-d_4 t} \end{aligned}$$

$A$ is how far you pulled it, $f$ is how fast it swings, $p$ is where in the swing it was when you let go, and $d$ is how quickly it gives up. That is the entire machine. There is nothing else in it.^[1]

Exact ratios are boring

Here is the part that took me a while to appreciate. If the two frequencies are in an exact whole-number ratio — say $2:3$ — the curve closes. The pen returns to precisely where it started, moving in precisely the same direction, and from then on it retraces its own path forever. Undamped, you get one loop and nothing more.

The figures are interesting only because a real pendulum cannot be tuned exactly. Set it to $2:3.004$ and the curve almost closes, misses by a hair, and starts again slightly rotated. Do that a few hundred times and the near-miss sweeps the loop right around the centre, which is where the rosette comes from.

So the beauty is a manufacturing defect. Set detuning to zero below and watch the whole thing collapse into a single closed loop:

Push damping to its maximum and the pen barely gets through one circuit before it dies in the middle. Pull it to the minimum and the pen keeps going long enough to fill the disc with ink. There is a narrow band in between where the figure has time to develop and still knows when to stop, and that band is the whole craft of operating one of these things.

Why it makes an honest loading animation

Most loading animations are lies. A spinner spins at a rate that has nothing to do with the work being done, and a progress bar that eases to 90% and waits is telling you a story about progress rather than reporting it.

A harmonograph has a property I have not found in many other things worth looking at: it finishes on its own, and it finishes because it has run out of energy rather than because a timer expired. The damping term is not a convenience. It is what the drawing is about. You can watch the swing get smaller, and you can tell roughly how much is left, without anybody drawing you a bar.

So the front page draws one while the fonts are still arriving, and gets out of the way when both the drawing and the page are ready.^[2] After that the pendulum keeps going, very slowly, and if you put the cursor near it you put energy back into the system and it swings wider again.

One detail that does all the work

The maths above gives you a path. It does not give you a drawing. The first version of this looked wrong in a way I could not name for an embarrassingly long time, and the answer was ink.

A pen laying down a line is not a constant-width stroke. It pools where the pen slows down and starves where the pen whips through a cusp. The harmonograph’s speed varies enormously along the curve — fastest through the middle, nearly stationary at the tips of the petals — so the correct line weight varies enormously too:

const rel = Math.min(Math.hypot(s.vx, s.vy) / peakSpeed, 1);
ctx.lineWidth = wMax - (wMax - wMin) * Math.sqrt(rel);

Three lines. Before them the figure reads as plotted; after them it reads as drawn. It is worth computing the velocity analytically rather than taking a finite difference between successive points, because the numerical version visibly stutters exactly at the cusps, which is exactly where you are looking.

The other half of that is step size. If you advance time in equal increments, the fast parts of the curve come out as visible polygons while the slow parts are oversampled into mush. Advance instead by a step chosen so that each segment is about one pixel long, whatever the pen is doing, and the whole curve is smooth for roughly the same amount of work.

The code is in harmonograph.js, and there is a small script in tools/ that renders contact sheets of ratios to a PNG without opening a browser, which is how I picked the ones in the list.