Home▸Mathematics▸Hypocycloids & Epicycloids — Rolling Circle Constraint (2D)

Hypocycloids & Epicycloids — Rolling Circle Constraint (2D)

Watch a small circle roll without slipping inside or outside a fixed circle: its spin angle is integrated live from the zero-slip contact condition, tracing the real hypocycloid/epicycloid curve as a byproduct, with a live cusp-count = R/gcd(R,r) readout.

Mathematics2DEasy60 FPS📱 Mobile-adapted⇄ 3D version
2d-hypocycloid ↗ Open standalone

About this rolling-circle constraint simulator

Most Spirograph-style tools plot the closed-form hypotrochoid/epitrochoid equation directly. This companion does the opposite: it treats the rolling as the primary thing to simulate. A small circle of radius r orbits the centre of a fixed circle of radius R at orbit angle φ; because it rolls without slipping, its own spin angle ψ cannot be chosen freely — it is forced by the zero-velocity-at-contact condition, integrated live every frame as dψ/dt = ∓((R∓r)/r)·dφ/dt. The pen point, rigidly attached to the rolling circle's rim at offset d from its centre, only moves because the rolling circle moves — the traced hypocycloid or epicycloid curve is a byproduct of that motion, not a separately-plotted formula.

The live readout panel exposes the rolling constraint itself: the arc length swept along the fixed circle (R·φ) and the arc length rolled on the rim (r·|Δψ|) are tracked side by side and stay equal at every instant, which is the defining identity of rolling without slipping. Switching R and r to a rational ratio closes the curve after exactly R/gcd(R,r) cusps and r/gcd(R,r) full revolutions of the rolling circle; the "Irrational R/r" preset sets the ratio to π and the curve visibly never closes, no matter how long it runs.

Frequently Asked Questions

How is this different from the Spirograph / hypotrochoid simulator?

The Spirograph sibling is built as a general decorative pattern-maker: its pen offset is the whole point, and the curve is drawn straight from the trochoid equation. This simulator instead fixes the pen to the rolling circle's rim (d ≈ r by default) and makes the rolling motion itself — the spin angle ψ integrated from the no-slip constraint — the visible mechanism, with the curve appearing as its consequence. The offset slider here exists to show how the true cusped hypocycloid degrades into a curtate or prolate roulette, not to generate decorative art.

What exactly is being integrated each frame, and why does it matter?

Every frame advances the orbit angle φ by a small step and then computes the corresponding spin increment dψ from the no-slip contact condition, rather than evaluating ψ(t) from the closed-form curve. The live "contact arc rolled" readout (R·φ vs. r·Δψ) is a running check that the integration keeps satisfying the rolling constraint, the same way a physics engine would check energy or momentum conservation.

Why does an irrational R/r ratio never close the curve?

The curve closes only when the rolling circle returns to both the same position and the same orientation simultaneously, which requires R/r to be a rational number p/q in lowest terms — the curve then closes after q orbits with p cusps. When R/r is irrational (the preset uses π), no finite number of orbits ever brings position and orientation back into alignment at the same time, so the pen keeps tracing new points inside the annulus between radius R−2r+... and R forever.

⚙ Under the hood

Small circle rolls without slipping inside/outside a fixed circle; its spin angle is integrated live from the zero-slip contact constraint, tracing the hypocycloid/epicycloid as a byproduct, with live cusp-count = R/gcd(R,r).

hypocycloidepicycloidrolling without slippingparametric curvesno-slip constraintCanvas 2D

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)