3.4 Principle 4: Colour

Knowing how to set colours is an important part of creative coding and will be crucial for your wallpaper project. On this page, you will learn how to use the fill and stroke commands to use the full colour spectrum.

By default, p5.js defines colour values using RGB (Red, Green, and Blue) as a value ranging from 0 to 255, where 0 signifies the absence of the colour and 255 represents the highest intensity of that colour. These three colours are the primary colours, from which additional colours can be created by blending these colours in varying ratios. For example, a yellow colour in RGB is created using a mix of red and green using the RGB values: 255,255,0.

Figure  8  How RGB colours mix; the maximum value of all three primary RGB colours creates a white colour: 255,255,255

Show description|Hide description

The image shows the RGB primary colours and how they overlap to create different colours. The top circle is labelled with an ‘R’ and the circle is coloured red. In the bottom right, a circle is coloured blue and labelled with a ‘B’. In the bottom left, a circle is coloured green and labelled with a ‘G’. These three circles overlap, creating new colours where one colour meets another. Where the red and blue circles overlap, the new shade is a light magenta. Where the red and green circles overlap, the overlapped colour is yellow. Where the green and blue circles overlap, this is denoted with a light teal blue. In the centre, where all three circles overlap, the colour is shown in white.

Figure  8  How RGB colours mix; the maximum value of all three primary RGB colours creates a white colour: 255,255,255

In Program 4 below, click on the small rectangular box on the canvas and you should see a colour picker appear. It allows you to pick different colours and see their RGB values at the same time.

Use the colour picker to change the colour of the square a few times. Notice how the numerical RGB values change as you select different colours.

Download this video clip.Video player: Video 6

Show transcript | Hide transcript

Transcript: Video 6  Changing and playing with colour

CHRISTIAN NOLD

In this video, I’m going to show you how to change the colour of the squares and play around with these colour values. I’m going to show you how to change the stroke colour, which is controlled here in line 8, But also the fill of the squares, which is controlled individually for each square here. So, because we change the fill four times, we can have four different colours of squares.

The stroke is only set at the beginning, so the stroke is the same for all of the squares. So if I change the stroke colour here to 255, it changes from a grey into an orange, and that goes across all the squares. So let me just revert that, and we’re back to a grey. Ok, I’m just going to change this first square, and I’m going to change it from a cyan into a red.

So, I’m going to go here to line 10 to the fill, and I’m going to change this to 255. And I’m going to change that to 0 and 0. So we have 255, 0, 0, and that is a red. For the second shape, I’m going to change that to be a green. So, I’m going to change that to be 0, 255, 0.

There you go. So, we have red, green, blue. So, we have 255 of the green. That’s why that’s green. So, for the third square, I’m going to change that to be a blue. So, 0, 0, 255. OK, that’s blue. For the final square, I’m going to change it from a black, which is 0, 0, 0 into a white by doing 255, 255, 255.

Now we have a white. That’s OK, but I think we can play around a little bit more. Why don’t I change the colour and control it with the mouse? So, I’m just going to go to the stroke colour, and I’m going to change that to mouseX. So now, as I move the cursor around, you can see the colour is controlled by the position of the cursor.

And I can do the same thing for the fill of the different squares. So I can have mouseX here, I can have mouseY here, mouseX here, for example, and maybe mouseY here. Ooh, now you can see all the colours are changing as I’m moving the cursor around. Both the x and the y-coordinates are controlling the colours.

That’s fine, but I can also do that to some of the other pink numbers. So, for example, this location of the square, I can change that to mouseX. Well, look. So basically, that square is following me around. I can change that to mouseY, mouseX, mouseY, and let’s just see what happens.

Whoa! Something crazy is happening. That’s pretty fun. The colours are changing, and the position of the squares are changing. And this way, you can play around with the colour values and even the positions. So why don’t you have a play around and see what you can come up with?

End transcript: Video 6  Changing and playing with colour

Download

Video 6  Changing and playing with colour