A hypotrochoid cycles through curated (p, q) presets. Click or tap to skip to the next pattern; use the sliders for speed and pen offset.
In 1962, a British mechanical engineer named Denys Fisher started prototyping a drawing toy from Meccano parts. Two years later he filed a patent, and in 1965 he showed the thing at the Nuremberg International Toy Fair. Kenner picked up US distribution in 1966, marketing it as "a million marvelous patterns." The Spirograph became one of the best-selling toys of the late sixties, won Educational Toy of the Year in the UK, and made Fisher rich enough to sell his company to Hasbro. The mathematics behind it, though, had been sitting around for centuries.
The curve the Spirograph traces is a hypotrochoid: the path a point on a small circle draws as it rolls inside a larger fixed circle. The parametric equations are old hat. If R is the outer radius, r the inner, and d the pen distance from the rolling center, then x(θ) = (R − r)cos θ + d·cos((R − r)θ/r) and y(θ) = (R − r)sin θ − d·sin((R − r)θ/r). The ratio R/r controls symmetry. When p/q (the gear tooth ratio, reduced) gives q petals worth of looping before the curve closes, the period is 2π·p. Rational ratios close; irrational ones never do.
Fisher's genius was mechanical, making the math accessible to seven-year-olds through injection-molded gears. The digital version here skips the plastic and goes straight to the parametric form. Ten presets cycle through gear ratios from 5:3 (a clean five-petal rose) to 24:7 (a dense lattice that takes dozens of revolutions to close). The core rendering is just a point evaluation inside a loop:
function htPoint(tt) {
const Rr = R - r;
const ratio = Rr / r;
return {
x: W / 2 + Rr * Math.cos(tt) + d * Math.cos(ratio * tt),
y: H / 2 + Rr * Math.sin(tt) - d * Math.sin(ratio * tt),
};
}
Each frame advances t by a small step, draws a line segment from the previous point to the new one, and colors it with a hue that sweeps 240 degrees over the pattern's lifetime. When the curve closes (t reaches its period), it pauses, fades, and a new preset takes the stage. The pen-offset slider scales d relative to r, stretching petals into sharper points or pulling them inward toward circles. At d = r, you get a pure hypocycloid with cusps; below that, the cusps soften into loops.
The gear-drawing tradition predates Fisher by over a century. Peter Hubert Desvignes patented a "Speiragraph" in 1827 for producing intricate spiral engravings, and banks adopted similar machines to generate anti-counterfeiting guilloche patterns on banknotes. The Sears catalog sold a "Marvelous Wondergraph" in 1908. Fisher's real insight was packaging the concept as play. The math was always there, waiting in the gear teeth. He just gave millions of children a reason to discover it on the kitchen table.
← Back to Quimbot