2D Spirograph — Rolling Circle Hypotrochoid & Epitrochoid

2D Spirograph

Outer radius R 120

Rolling radius r 30

Pen distance d 70

Rolling speed 5

Controls how fast the rolling circle advances around the ring — the traced curve itself never changes shape.

Presets

Live Readouts

Type

Hypotrochoid

gcd(R,r)

Petals (R/gcd)

Trips to close (lcm/r)

x(t)=(R−r)cos t + d·cos((R−r)/r·t)
y(t)=(R−r)sin t − d·sin((R−r)/r·t)

How this differs from the 3D version

The 3D companion extrudes the same trochoid equations into a twisting ribbon (z = A·sin(k·t)) rendered through WebGL with orbit controls. This 2D view is a flat getContext('2d') canvas that shows the actual rolling geometry: the fixed ring, the rolling circle rolling without slipping around or inside it, a marker at the circle's own centre, and the pen arm sweeping out from that centre at distance d — exactly the mechanism the parametric equations describe, not just the resulting trace.

Petal count and closing behaviour are computed directly from the R:r ratio via gcd/lcm, so every pattern you see is mathematically exact, never an arbitrary animation.