Transcript

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?