Click To See Curves (SFW)

A year ago, I was introduced to the Spirograph toy when I was looking for a gift I could 3-D print for a friend. (Yes, I’m 20 years late.) Whilst I was realising what was missing from my childhood and wasting tons of paper, I could not stop thinking about the maths behind it. So here is a fun post about the maths behind the Spirograph toy, complete with some nice curves created using my Spirograph web app.

Roulettes

Let’s start with the equation of the curves formed by the Spirograph toy. In order to understand how the Spirograph works, we need to first learn some geometry of curves.

A roulette is the curve traced by a fixed point on a closed convex curve that rolls along another secondary curve without slipping.

[Source: Wolfram MathWorld]

The Spirograph toy traces out two kinds of roulettes, namely hypotrochoids and epitrochoids.

Hypotrochoids

A hypotrochoid is a roulette in which the fixed point is attached to a circle that rolls inside a stationary circle. We can draw hypotrochoids with the Spirograph by rolling the wheel around the inside of the ring.

Values for LHS curve: , , . Values for RHS curve: , , . Screenshots taken with the save image feature from my web app.

Let be the radius of the stationary circle, be the radius of the rotating circle, be the distance of the fixed point from the center of the rotating circle and a parameter be the angle formed by the horizontal and the centre of the rotating circle.

[Source: Sam Derbyshire]

The centre of the rotating circle is always distance away from the centre of the fixed circle. This circle also obeys circular motion. If we assume our fixed circle is centred at the origin on the Cartesian plane, like in the animation above, we get the following parametric equations for the centre of the rotating circle:

We also need to derive the position of the fixed point relative to the centre of the rotating circle.

(Note that in the animation above, the fixed point is outside the rotating circle. Whilst this fixed point is still ‘attached’ to the rotating circle, making it a hypotrochoid, this technically is not possible with the physical Spirograph toy.)

Because the parameter is the angle formed by the horizontal and the centre of the rotating circle, our relative parameter , which represents the angle formed by the radius of the rotating circle parallel to the horizontal and the fixed point, can be expressed as:

Why is it negative? Well, if we have the rotating circle move inside the fixed circle in a counterclockwise direction, like in the animation above, we can see that the circle actually rotates in a clockwise direction. This means that our fixed point will always move around the centre of the rotating circle in the opposite direction that the rotating circle moves around the centre of the fixed circle.

Our fixed point also obeys circular motion, therefore the parametric equations for the fixed point relative to the centre of the rotating circle are:

We can now add the to and to find the parametric equations for a hypotrochoid:

Epitrochoids

An epitrochoid is a roulette in which the fixed point is attached to a circle that rolls along the outside of a stationary circle. We can draw epitrochoids with the toy by rolling the wheel around the outside of the ring.

Values for LHS curve: , , . Values for RHS curve: , , .

Again let be the radius of the stationary circle, be the radius of the rotating circle, be the distance of the fixed point from the center of the rotating circle and a parameter be the angle formed by the horizontal and the centre of the rotating circle.

[Source: Sam Derbyshire]

Our parametric equations for an epitrochoid are similar to the hypotrochoid. Instead, the centre of the rotating circle is always distance away from the centre of the fixed circle, and because our fixed point will be moving around the centre of the rotating circle in the same direction the rotating circle moves around the centre of the fixed circle, our relative parameter is now:

Thus, the parametric equations for an epitrochoid are:

Implementing the Spirograph

As we saw earlier, these parametric equations can be split into two terms. The first term (e.g. for the x-coordinate of a hypotrochoid) expresses the position of the rotating circle relative to the centre of the fixed circle. Thus, in the updateSpiro() function of the web app, we get:

posr = {
  x: mainCanvas.width / 2 + (R - r) * Math.cos(t),
  y: mainCanvas.height / 2 + (R - r) * Math.sin(t),
};

for a hypotrochoid, and

posr = {
  x: mainCanvas.width / 2 + (R + r) * Math.cos(t),
  y: mainCanvas.height / 2 + (R + r) * Math.sin(t),
};

for an epitrochoid. This allows us to draw the rotating circle rolling around the stationary circle.

The second term (e.g. for the y-coordinate of an epitrochoid) expresses the position of the pen relative to the centre of the rotating circle. Therefore, adding the terms gives us the position of the pen relative to the centre of the fixed circle. In the updateSpiro() function below the previous lines, we get:

posPen = {
  x: posr.x + p * Math.cos(((R - r) / r) * t),
  y: posr.y - p * Math.sin(((R - r) / r) * t),
};

for a hypotrochoid, and

posPen = {
  x: posr.x - p * Math.cos(((R + r) / r) * t),
  y: posr.y - p * Math.sin(((R + r) / r) * t),
};

for an epitrochoid. Now that we have the absolute position of the fixed point, or pen, we can display the actual result of the spirograph.

Deriving the number of petals

Let’s recall that our parameter is the angle formed by the horizontal and the centre of the rotating circle. When measured in radians, takes the values 0 to where is a function that returns the lowest common multiple. This means that the rotating circle will complete revolutions, thus the Spirograph curve will have petals. Pretty neat, right?

(In my Spirograph web app, I use this fact to ensure that the parametric equations for generating the multi-colour gradient pen ends at , in order to make the Spirograph curve look seamless. The whole colour theory behind this deserves its own post, but for now here is a link to a great post about this.)

Fortunately, calculating the for two numbers and is as simple as:

where is a function that returns the greatest common divisor. In order to obtain the , we can use the Euclidean algorithm:

// Calculate the greatest common divisor of two numbers
function gcd(x, y) {
  while (y) {
    var tmp = y;
    y = x % y;
    x = tmp;
  }
  return x;
}

Now we can calculate the number of petals a Spirograph curve will have. Inserted below are a hypotrochoid and epitrochoid drawn using the same values: , and :

If you count the number of petals for both the hypotrochoid and epitrochoid, both the hypotrochoid and epitrochoid have 25 petals. Let’s check that:

Hypocycloids and epicycloids

Hypocycloids and epicycloids are very similar to hypotrochoids and epitrochoids, however the fixed point is always on the circumference of the rotating circle. This means that we can reduce the equation for a hypotrochoid and epitrochoid to that for a hypocycloid and epicycloid.

This time, let’s say the radius of the larger circle is equal to , remembering is the radius of the smaller circle. We can now write the parametric equations as:

for a hypocycloid, and

for an epicycloid. Why write it in this way instead? The number of cusps, or sharp corners on the curve, is directly correlated to the ratio of the radius of larger circle to the radius of the smaller circle, or . Thus, the number of cusps is directly correlated to .

If is an integer, the curve has cusps:

k = 3	k = 4	k = 5	k = 6	k = 7

Hypocycloids with integer values.

k = 1	k = 2	k = 3	k = 4	k = 5

Epicycloids with integer values.

If is a rational number, that is it can be expressed as where and are integers, the curve has cusps:

k =	k =	k =	k =	k =

Hypocycloids with rational values.

k =	k =	k =	k =	k =

Epicycloids with rational values.

If is an irrational number, the curve never closes.