Spirograph
A Lifetime's Fascination

I've always been fascinated with Spirograph.

Loved it as a kid, as much for the doodling as watching the mechanical and mathematical action.

When I was learning trigonometry (mandatory for any 3D modeling or gaming programming), I was astonished to learn just what epicycloids and hypocycloids really were. At the time, QBASIC was really all that was available (the poor man's power toolkit), but QBASIC had always had a graphics primitive library, so naturally converting the formulae to generate an on-screen graphic was the coolest thing I could think of doing.
Then, in 1990, I saw an HP pen plotter in the computer lab at the community college I had started attending. It was being used almost exclusively by the CAD students. Since I already knew you could write a modem communication script in QBASIC, I wondered if I could write a device driver for the plotter using the same techniques. After digging up the tech manuals (literally), and learning what little HPGL (Hewlett-Packard Graphics Language) there was actual documentation on, I managed to get the pen plotter to start doodling Spirographs. You could even preview the doodle on-screen and send only the one you wanted to the plotter.

Heartened by this initial success, I started working the formulae into other available programming languages that had graphic primitives. Power C was being learned in one classroom, so that was my introduction to C programming.
After college I learned about the POV-Ray raytracing engine, and since QBASIC could be used to write script and batch files, I could use one script to generate a spirograph, using colored sphere objects for the points. Later, I reworked this to output frames for an animated version which then could be worked through the DTA (Dave's Targa Animator) program to produce animated spirographs. In 1996 I started using the GIF Construction Kit to re-create these into animated .GIF files that would work on the Internet.

In 1997 I came across Anu Garg's Java-based Spirograph applet, but the maths were incorrect (That applet's math functions have since been corrected). I had had this very problem when I was developing the plotter version and knew that the value of b (the distance from the center of the moving circle) never varied from 1 and was thus always fixed at the center. This produces pretty (but very spiky) pictures. I took this as a sign to write my own and learn a bit about Java in the process.
Interactive Java-Based Spirograph

Since then, in each new computer language I have learned, if it has a graphics library and trig functions, I would try to write a Spirograph algorithm.
QBASIC has since retired (but why? Ahh, yes, DOS knowledge isn't encouraged anymore) but Perl has been more than sufficient for script generation scripts. I don't like that the graphics libraries for Perl aren't available on most Internet servers, but what can you do, eh?
So, when I learned that PHP had a .PNG on-the-fly graphic primitives library, well, what did you think would happen?
Interactive PHP-Based Spirograph
(Incidentally, this one actually works on a cell phone!)

Other Ports:
SVG
Flash/ActionScript
C#.NET (Goddess, that was a horrible experience!)
Vector Works 10 (as a macro)
PostScript/PDF

The Mathematics:
R = the radius of the tracing circle (in integer units, for now)
r = the distance from the center of the tracing circle the pen point is located (in integer units, for now)
P = the radius of the circle around which the fixed circle a is rotating (integer units, you guessed)
 
Because this is a virtual setup and not physical, it is possible to create designs that would not be possible with the plastic disks.
 
Let us find the parametric equations of the hypocycloid, the curve traced by a point on a circle of radius r as it rolls on the inside of a fixed circle of radius R. Let O and C be the centers of the fixed and rolling circles, respectively, and P a point on the moving circle. When the rolling circle turns through an angle ϕ in a clockwise direction, C traces an arc of angular width θ in a counterclockwise direction relative to O. Assuming that the motion starts when P is in contact with the fixed circle at the point Q, we choose a coordinate system in which the origin is at O and the x-axis points to Q. The coordinates of P relative to C are (rcosϕ,-rsinϕ)(the minus sign in the second coordinate is there because ϕ is measured clockwise) while the coordinates of C relative to O are ((R-r)cosθ,(R-r)sinθ).

Thus the coordinates of P relative to O are:
 
x=(R-r)cosθ+rcosϕ
y=(R-r)sinθ-rsinϕ
 
But the angles θ and ϕ are not independent: as the motion progresses, the arcs of the fixed and moving circles that come in contact (arcs QQ' and Q'P) must be of equal length. These arcs have length Rθ and r(θ + ϕ), respectively, so we have Rθ=r(θ + ϕ). Using this relation to express ϕ in terms of θ, we get ϕ=[(R-r)/r]θ, so that the previous equations become
 
x=(R-r)cosθ+rcos[(R-r)/r]θ
y=(R-r)sinθ-rsin[(R-r)/r]θ
 
These new equations are the parametric equations of the hypocycloid, the angle θ being the parameter (if the rolling circle rotates with a constant angular velocity, θ will be proportional to the elapsed time since the motion began). The general shape of the curve depends on the ratio R/r. If this ratio is a fraction m/n in lowest terms, the curve will have m cusps (corners) and it will be completely traced after moving the wheel n times around the inner rim. If R/r is irrational, the curve will never close, although going around the rim many times will nearly close it.

Return to the Home Page

Literary References
Trigonometric Delights
Eli Maor, Princeton University Press, 1998. ISBN 0-691-09541-8.
The history and application of trigonometric functions.
Chapter 7 has EVERYTHING you need to know to get your Spirograph mojo going. All in one place. Wish something like this had existed twenty years before...
Oh, yeah, and his book: e, The Story Of A Number, is a brilliant work on the history and application of logarithms.
Both of these books belong on the recreational maths buff's bookshelf.