Spirograph Patterns

Updated 4 March 2010

Introduction

"Spirograph" is a registered trademark of Hasbro, Inc. It refers to a child's toy that uses toothed wheels to draw patterns, you can see some examples here.

This page approaches those patterns from a more mathematical point of view, which isn't constrained by the physical properties of the wheels used in the real toy. This allows us to explore a larger set of patterns, including those generated my more than 2 wheels.

Spirograph Spirograph Spirograph Spirograph Spirograph

Interactive spirograph drawing

  • Javascript version". Draws the basic patterns using up to five wheels. Implemented entirely in Javascript, which you can download and modify.
  • Google native client implementation. As well as drawing the basic patters this also supports a number of additional features such as animation. It requires a browser that supports Google's native client.

Equations

The parametric equation for a circle is

  x = R.cos (θ)
  y = R.sin (θ) 

As 'θ' varies from 0 to 2π this will trace one lap around the circle ('R' is the radius). This is our basic wheel. If we multiply θ by a positive integer this will be equivalent to making the wheel rotate faster. A negative integer will make the wheel rotate in the opposite direction. To create the spirograph patterns we combine two wheels rotating at different speeds, say n1 and n2.

  x = R1.cos (n1θ) + R2.cos (n2θ)
  y = R1.sin (n1θ) + R2.sin (n2θ) 

Here the second wheel of radius R2 makes n2 full turns as it travels n1 times around the inner wheel of radius R1.

These are idealised wheels, when using the toy, the radius of the inner wheel would be R1-R2. The other way we differ from the toy is that in the physical version the rates n1 and n2 are determined by the number of teeth on the wheels, which are constrained by the wheels' radii. We aren't limited in this way.

The starting positions of the wheels can be changed by adding in a phase component: ψ;

  x = R1.cos (n1(θ+ψ1)) + R2.cos (n2(θ+ψ2))
  y = R1.sin (n1(θ+ψ1)) + R2.sin (n2(θ+ψ2)) 

Although it would be difficult with the plastic toy, mathematically it's quite simple to add additional wheels, for instance, having a third wheel rotating around the other two can be represented as

  x = R1.cos (n1θ) + R2.cos (n2θ) + R3.cos (n3θ)
  y = R1.sin (n1θ) + R2.sin (n2θ) + R3.sin (n3θ) 

Symmetry

For two wheels the symmetry is |n1-n2| (assuming n1 and n2 have no common factors). If they do have a common factor, say 'k', then the symmetry would be |n1-n2| / k and the algorithm will draw over the same pattern k times.

For more wheels the symmetry is the highest common factor of the set of differences. With three wheels it will be

    hcf (n1-n2, n1-n3, n2-n3) / k
  = hcf (n1-n2, n2-n3) / k

Where 'k' is the largest common factor of n1, n2, n3.

Animation

This four wheel animation. The speeds are [3, -13, 11, 19] and the sizes [3,3,2,1]. The differences in the rates are all multiples of 8, so the pattern has 8-fold symetry. The animation is created by changing the relative phases of the wheels.

4 wheel animation

There are some more interesting animations in the examples section of my native client page.

Java Applets

Click

This applet draws spirograph like patterns. The patterns are generated at random and you are presented with a grid of patterns to choose from. Right-clicking on your the favourite in the grid will spawn a new generation of patterns, from which you can choose again. This directed evolution allows you to explore the range of patterns accessible to this applet.

[Example Output] [ Applet UI]

Click

This applet draws spirographs like the previous applet but now the drawing is animated. The user interface is the same as in the static version.

[ Applet UI]

Click

This page uses nothing more than HTML and Javascript to draw spirograph like patterns.

Source Code

If you would like to generate your own Spirographs using python you can download the following scripts.

Alternatively you can use my interactive spirograph generators at appspot or on my Native client page.

More Examples

Spirograph Spirograph Spirograph Spirograph
Spirograph Spirograph Spirograph Spirograph
Spirograph Spirograph Spirograph Spirograph

(c) John Whitehouse 2012