I love spirographs. It is amazing that they can produce such a wide variety of beautiful patterns with such a simple internal mechanism. And I had a hankering to parameterize some functions today (yeah, I have urges like that), so I looked up how to plot the path of a spirograph. Then I used Dart to turn it into an interactive demo!
The math behind spirographs is a little bit tricky, but mostly just a lot of variable / coordinate system swapping. At the end of the day you get a parameterized function that tells you the x, y position for a single parameter time, given the radius of the outer circle, the radius of the inner circle, and the distance the pen point is from the center of the inner circle.
If that means nothing to you, it is probably because you have forgotten what a spirograph machine looks like:
In a real physical spirograph there are physical restrictions on these core parameters, namely:
Outer Circle Radius > Inner Circle Radius > Pen Radius
But we need not be restricted by reality, so there are no limits on the parameters in my app, which can lead to some very funky results.
Overall it was a great chance to use Dart for some animation stuff, and to get a little more experience with drawing and Canvas, which I always like. Turns out plucking the answers from wikipedia is so much easier than actually deriving the answer myself, so this whole thing didn't take me more than a couple hours.