Spirograph!

My young daughter and I were doodling and we came up with the following sketch.

The idea was simple. We place evenly spaced markers around the edge of a circle, and then draw lines between them. If you follow the blue lines, you can see they start at a marker, miss a marker, and end at the next marker. The yellow lines skip two markers.

Could we create some algorithmic art based on these ideas?

Going Around a Circle

We need a mathematical way to move around a circle in evenly spaced steps. How can we do this? The easiest way is to start with how we naturally think about following the outline of a circle - we naturally think about turning in even steps. That means we increase our angle of turn in even steps. We're familiar with angles to measure the amount of turn from our time at school.  The following shows some examples of counting angles in degrees.

Computers, and programming languages like Processing and p5js, internally work in terms of horizontal and vertical (x, y) coordinates. That means we need to translate our moving around a circle by counting the angle, into (x, y) coordinates. Luckily there is some maths that helps us.

The maths allows us to translate from the world of angles into the world of (x,y) coordinates. You can see from the diagram above that point P is at an angle A, around a circle which has radius R. what we want is to be able to say how far across, x, and how far up, y, that point is. The maths tell us how to do that:

• x = R cos(A)
• y = R sin(A)

The cos() and sin() are mathematical trigonometry functions, which you can find on most calculators, and in many programming languages, including Processing.

If we count up the angles A from 0 to 90 degrees in steps of 10, and use that trigonometry to calculate x and y coordinates, and mark those points with little red dots, we get the following.

That shows the maths works. If we carried on counting beyond 90 to 360 degrees, we'd get a full circle of dots.

Skip Step Patterns

The following shows the idea of drawing lines between these markers, but missing a few markers, like our original doodle.

You can see how we can count up the angle in steps, just like we've done, and that point can be the start of the line. You can also see that the end of the line is at a point that's just a few angle steps ahead. The diagram shows the point 6 steps ahead. If we were counting the angle up in steps of 10 degrees, the end point would be at (angle + 60) degrees.

If we repeat this process of drawing lines, we can create nice patterns like the following, which shows 2 overlaid patterns created from different skip steps.

We can have a lot of fun varying the number of skip steps to create different patterns. But let's do something even more ambitious.

Gears

Have a look at the following diagram. It shows a new imaginary circle centred at point P. That smaller circle, shown green, has a point Q that goes around its edge, just like point P went around the big circle's edge.

You can also see that we've set the point Q to go around faster than point Q. Whenever point P is at an angle A, point Q is further along at point 2A. That's just a choice we've made for now. There is some basis for this - this systems works like gears, where the smaller cog turns faster than the larger cog.

What would happen if we plotted points Q as they went around that circle? We can calculate the (x,y) coordinates of Q by realising we can calculate how far Q is from P just like we did before.

We can use the same trigonometric equations to tell us how far along x2 and up y2 the point Q is from P. You can see from the diagram the coordinates of Q are then (x1 + x2, y1 + y2). We've renamed the location of P to be (x1, y1).

Here's the result.

That's interesting, but not really that exciting. What happens if we make Q go faster at 5A not 2A?

That's much more interesting. In fact we have spend hours tweaking the angular speed of Q to get different patterns.

Let's not be satisfied with that though. Look at the following diagram.

Now we have yet another, even smaller red circle attached to the medium sized green one. That one has a point S that turns around the centre which is point Q. And we know point Q turns around point P. Here's we've chosen to have point S turn even faster at an angular speed of 15A, that is fifteen times faster than point P goes around the big circle.

We can do the same maths to work out the position of point S. Here's the result of setting Q to speed 5A and S to speed 20A.

That's an interesting pattern. It loops in on itself, which we expect as the smaller circles create tighter loops, along a broader trajectory set by the bigger circles. The dots make it harder to see the fine detail, so let's increment the angle A in smaller units of 0.1 degrees - that's a tiny turn! We can also set the red dots to be translucent - which helps to see more detail when things get overcrowded. Here it is again.

Much better. We can see the denser areas where the points are closer together because the point S is moving more slowly.

Now, let's do one more enhancement. Let's take the angle for each of the points on the large, medium and small circles, and add some variation to them. So if we take an angle A for point P, we can create several new versions of this by adding a small amount to it. If we added 1 degree to it, nine times, we'd get nine new angles, A+1, A+2, A+2 ... A+9. Let's call this new additive parameter t, which we can add to each of the angles for points P, Q and S. The following diagrams shows the idea.

You can see that several versions of P are calculated at angle (A + 0.3t) where t varies, say from 0 to 100. Similarly, point P has versions with angles 5(A + 0.2t), and point S has 15(A + 0.1t). You can see that we've multiplied the t by quite small fractions - that's just arrived at through experimenting with what works and what doesn't.

Plotting the points that correspond to the point S, for every variation that comes from these little additions should give some interesting results.

This one is based on the same pattern above with angular speeds: P at A, P at 5A and Q at 15A, and the angles for P varied by 0.1t, Q by 0.2t and S by 0.3t.

It's really nice! The source code is at https://www.openprocessing.org/sketch/474017. Feel free to copy and change it.

Experimenting with both the angular speeds, and also the angle variations give us a wide variety of interesting, natural forms. This one looks very ribbon like.

A simpler one.

This one looks very cloudy.

I really like this one, which is also online at https://www.openprocessing.org/sketch/476269. It evokes some kind of alien sea creature!

---

This blog is adapted from a section of my upcoming gentle introduction to algorithmic art - Make Your Own Algorithmic Art, which starts from no assumed expertise in coding or maths, and goes gently from there.

Join in with the Algorithmic Art meetup group, which meets monthly in London.