Pure HTML + CSS + JS · high-performance canvas engine

What is a Spirograph (trochoid)?

Definition & core equations

“Spirograph” is the popular name for a family of roulette curves drawn by a point attached to a circle rolling without slipping on another circle. When the small circle rolls inside the big one we get a hypotrochoid; when it rolls outside we get an epitrochoid.

Hypotrochoid
\[ \begin{aligned} x(t) &= (R - r)\cos t + d\cos\!\left(\frac{R - r}{r}\, t\right)\\ y(t) &= (R - r)\sin t - d\sin\!\left(\frac{R - r}{r}\, t\right) \end{aligned} \]
Epitrochoid
\[ \begin{aligned} x(t) &= (R + r)\cos t - d\cos\!\left(\frac{R + r}{r}\, t\right)\\ y(t) &= (R + r)\sin t - d\sin\!\left(\frac{R + r}{r}\, t\right) \end{aligned} \]
con \(R\) radio fijo, \(r\) radio rodante y \(d\) el offset del punto.

These equations encode the superposition of the orbit of the rolling circle’s center with the local rotation of the point at distance d.

\[ t^{*} = 2\pi \frac{r}{\gcd(R,r)},\quad N_{\text{hypo}}=\frac{R - r}{\gcd(R,r)},\quad N_{\text{epi}}=\frac{R + r}{\gcd(R,r)} \]

Parameters and geometry

R is the radius of the fixed (big) circle; r the radius of the rolling (small) circle; d the offset of the drawing point from the rolling circle center. Special cases: if d=r you get cycloids with sharp cusps (hypocycloid / epicycloid); if d<r cusps round into loops; if d>r the point lies outside the rolling circle producing prolate lobes.

The instantaneous angular speed of the drawing point has two components: the base motion at frequency 1 (the \cos t, \sin t terms) and the relative spin at frequency (R\pm r)/r. Their interference produces the petals.

Closure, period, and lobe count

A curve closes when the two angular frequencies are commensurate. Practically: if R/r is rational (e.g., both integers), the drawing eventually repeats. Let g = gcd(R, r). Then a full pattern is traced over a parameter length t* = 2\pi \cdot r / g (for both hypo/epi). The number of lobes (or cusps when d=r) is N = (R \pm r)/g — minus for hypo, plus for epi.

When R/r is irrational the curve never exactly closes and densely fills an annular region — visually similar to our “infinite mode”.

From math to pixels (how this app renders)

We advance the parameter by a small step dt and draw chunk segments per frame for speed. Sub‑pixel accuracy and alpha blending (alpha) smooth the stroke; line thickness controls energy/weight. The heads‑up display shows the current mode and live point count.

Performance tips: larger chunk accelerates convergence; smaller dt increases geometric fidelity; integer R, r give crisp closures; randomizing R,r,d within ranges explores distinct N lobes.

Want to try it? Return to the interactive canvas and use the keyboard shortcuts shown there.

A brief philosophical note

These figures arise from two simple motions coupled by a ratio. When the ratio is rational, we get order that returns; when irrational, variation without end. The same equations therefore encode periodicity and quasi‑random richness — a reminder that complexity can be the visible surface of very few rules.