I wrote an interactive WebGL demo of hypotrochoids. Uses three.js. Sources on GitHub. Equation, as complex exponentials:

\[z = r \exp(i \theta) + (1-r) \exp\left({b-a\over b} i \theta\right)\]

Details

$a$ and $b$ set the “gearing” of the circles (their rotation speeds). The “breathing” is cosine-squared modulation of $r$ (relative radii of the circles). The “spin” (not shown in the equation) tweaks the rotation speeds to be slightly off from the gearing.

Try changing the curve parameters. You might notice that the curve complexity jumps around a bit when $a$ and $b$ have a common factor. (Their ratio is what’s important, not their actual values.)

Implementation

I don’t have much JavaScript experience, but I learned enough to start using WebGL. It seemed to be the best way to make an interactive demo of this kind on the web. The three.js framework does make some things easier, though it’s more heavyweight than I like in places.

I might work on doing the trig calculations to generate the curve path on the GPU (in a shader program); right now it’s all on the CPU in JavaScript.