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.

How Computers Make Colour

How do computers make the colours you see on your laptop screen or your smartphone display?

Mixing Colours

Let’s go back to our earliest experiences of colour, when we were very young and had pots of paint to play with. What happened when we mixed yellow and blue paint?

When we mixed yellow and blue paint, we got a kind of green. Many artists are familiar with mixing paint colours, though it is a skill that takes time to develop. You may already be familiar with primary colours which are mixed to make other colours.

When computers create colours, they also mix primary colours. But there is an important difference we need to be aware of.

When we mix paint, the resulting colours get darker and darker. Mixing in more and different paints, gives us darker and darker colours, until we almost have black. In real life, we often end up with a muddy dark brown.

When we mix coloured light, the resulting colours get lighter and lighter. If we mix more and different coloured lights, the results will be lighter and lighter colours, until we get to white. Here’s a picture showing coloured red and green torches, not paint, being mixed.

You can see that when the lights overlap, we have yellow, a lighter colour than red or green.

So we’ve just seen two different ways in which colours combine

• Mixing paint results in darker and darker colours. 

• Mixing light results in lighter and lighter colours.

Additive and Subtractive Colour

You don’t have to know why this is but it is interesting. White light is made of of a mixture of purer colours. You will have seen them separated out with a prism, or a rainbow in the sky, where raindrops act like prisms. Paint, pigments and dyes work by absorbing some of these parts of white light, leaving the remainder to be reflected back. Adding more, and different, paints means more of the elements of white light are absorbed, leaving less and less to be reflected. That’s why the results get darker. This is why mixing paints is called subtractive colour mixing.

The subtractive primary colours are cyan, magenta and yellow. You may have noticed your colour printer mixes colours from inks of these primary colours.

Mixing coloured light is just that, adding together different parts of white light. Mixing different colours means adding more and more of the elements of white light. If we had all the elements of white light, we’d end up with white light! This is like the opposite of a prism or a rainbow. Instead of separating out the rainbow colours, we’d adding them in. That’s why mixing light is called additive colour mixing.

The additive primary colours are red, green and blue.

What is important for us, is to know that computer screens, like a laptop display, a smartphone or tablet screen, make colours by mixing red, green and blue light.

Computer displays are made of tiny little coloured squares called pixels. Those pixels are actually made of 3 smaller bits, which are teeny weeny red, green and blue lights. By turning on each of these three colours by different amounts, the pixel takes on different colours. So to make yellow, a pixel will have the teeny weeny red and green lights turned on, but not the blue light.

With Processing, we can mix these primary colours to make our own colours too. We can have very fine control over the exact colour we want.

So let’s look at some examples of mixing red, green and blue light to get a feel for how it works.

Let’s start at the top left. The first example shows only red light switched on. There is no green or blue light in the mix. You won’t be surprised that makes a red pixel! The next example along, is the same but this time the red light has been turned down to about half strength. This makes the resulting colour darker, not lighter, because there is less light overall. If we turned down the red to zero, we’d have no light contributing to the mix at all, and we’d end up with black.

The next row shows all three red, green and blue turned on about half. The important point here is that they are all turned on at an equal level. This gives us a mid grey. The next example is the same but this time the amount that all three red, green and blue are turned on is a bit higher, about three quarters of the way up. The result is a lighter grey. That’s because there is more light contributing to the mix. If we turned the levels up to the max, we’d get white.

The last row is more interesting. Here we show how light mixing creates different colours. Mixing red and green light makes yellow. How do we make it darker? Well, we’ve just seen how reducing the amount of light being mixed makes the result darker. So having levels of 50% red and green would create a darker yellow. That’s not a surprise, the first two rows show this happening. So here’s a more interesting question: how do we make the yellow lighter? Hmm. Well, we know we need to add more light somehow. We can’t add more red or green as those are already at the maximum level. The only option left to us is to add more blue light. It works! Think of like this. Red and green but no blue makes yellow. But an equal amount of all three makes a neutral grey. So we’ve just taken a light grey and added some yellow to it, to make a light yellow.

Don’t worry about being able to predict what colours will result from mixing red, green and blue light. You develop a feel for it over time, and even professionals don’t need to be able to do it without help. You can find many tools on the web, or in your favourite photo editing software.

Here’s a good tool for mixing red, green and blue, or just RGB, to make colours https://www.w3schools.com/colors/colors_rgb.asp. Here is the tool being used to make the darker yellow.

Have a play yourself, moving the sliders to add more or less red, green and blue elements. It’s quite fun mixing light to create colours. I really encourage you to do this, as this is the only way to start to get a feel for what combinations make which colours, and how light or dark they are.

0-255: Computer History

Did you notice that the tool shows the sliders going from a low of 0 all the up to a maximum of 255? Why isn’t this 0 to 100%, or maybe 0 to 1? Those would make sense. What sense does a top level of 255 make?

That 255 is an antique from history. When I was little, in the 1980s, computers were much less powerful than they are today. The numbers they could easily store in their memory maxed out at 255. To have bigger numbers, they had to do complicated things joining bits of memory together. You may know that computers store only 1s and 0s, and eight of these can represent numbers from 0 to 255. Eight bits was the size of a normal memory store. That’s where the phrase 8-bit comes from. The red, green and blue colour levels were stored in memory that could only go from 0 to 255.

So RGB values going from 0 to 255 have stayed with us. Today, you’ll see this in your favourite photo editing software, tools like Photoshop, Krita, Gimp and many more. The following shows a tool I use. You can see the sliders and RGB values going up to 255. You can also see I’ve made a light yellow and used the paintbrush to make a light yellow mark.

---

This blog post is based on content for a book I'm working on: Make Your Own Algorithmic Art