Spyrograph

A simulation of the designs produced by the classic Spyrograph toy. The Spyrograph uses a plastic ring and a plastic disc. The larger ring is pinned down to fix it into place, and the smaller disc travels around the inner circumfrence of the outer ring, propelled by the nib of a pen, which is poking thru a hole in the inner ring.

This movie draws the pattern using a series of curveTo() commands. The last 200 coordinates are stored in an array, along with colors and alpha values. The line segments are assigned different rainbow colors from this array, and the trailing edge of the drawing is faded out.

Here's the actionscript code for figuring out each successive pen position in the spyrograph pattern. It uses these variables:

• CX, CY -- center of pattern.
• speed -- rate of drawing
• angle -- current angle from CX,CY to center of disc
• ringRad -- the radius of the outer ring,
• discRad -- the radius of the inner disc ("disc size" slider)
• penRad -- distance of the pen hole from the center of the disc ("pen hole" slider)

  // angle of travelling disc
angle += speed;
  // center of disc
var csx = CX+Math.cos(angle)*(ringRad-discRad);
var csy = CX+Math.sin(angle)*(ringRad-discRad);
  // angle of pen hole from center of disc
var angPen = angle-angle*ringRad/discRad;
  // pen position
x = csx+Math.cos(angPen)*penRad;
y = csy+Math.sin(angPen)*penRad;