Now that we've learned to control colors, let's change the colors of the things that we are going to draw. So, we've got four commands to do this: fill, noFill, stroke, and noStroke. I'm going to start by showing you how fill works. So, I've got a sketch here, and it's drawing some shapes on the canvas, and you can see that they're all in black. So, what fill does is it changes the inside color of the shapes. I'm going to use it, first of all, just in the setup function. So, I'm going to set fill to a red color. So, I'm going to go 255,0,0. You can see it takes exactly the same arguments as background. There we can see, we now have some red shapes. I'll do another couple of colors just to show you the difference. There we have yellow, and I'll try a blue. Now, we can also change it so that the shapes aren't filled at all. What I'd like you to do is look carefully at these shapes at the bottom and spot the difference. So, I'm going to start with a fill of white, and now I'm going to change this. I'm going to get rid of this command. I'm going to go for noFill, and noFill doesn't take any arguments. Now you can see the shapes have become transparent because there's nothing inside of those shapes. In fact, if I was to change the background color, you could see that more clearly. So, the next thing to do is to control the colors of the outlines of the shapes. For that, we need the stroke command. Now, this works pretty much the same as the fill command. So, I type stroke, and I can put in three colors: R, G, and B. So, I'm going to set it to a red color first of all and just for variety, I'll set it to a blue color now, and you will see the difference. We might also want the shapes not to have any outline at all. So, I'm going to take off of noFill, and then I'm going to set, instead of setting stroke, I'm going to set noStroke. Again, this command doesn't take any arguments. Just for reference, I'm just going to change the color of the shapes now so that you can see that as well. So, I'll set the shapes back to yellow, and you can see they're yellow but without an outline. Now, you might want those shapes actually to all have different colors. It's at this point that we move these commands out of the setup function and into the draw function. So, here, what I'm going to do is I'm going to set the first rectangle to be yellow. I'm going to do that by typing fill just before I draw that rectangle. Now, currently, everything is yellow, but perhaps I want the rest of the shapes to be red. So, what I'll do is after this rectangle command, I'll type fill again and I'll set the color to red. So, it's a little bit like fill is controlling a paintbrush that the program has. It can only have one brush in its hand at a time. Every time I call fill, it changes what the color of that brush is and then continues to use it as long as it's painting. Now, this can cause some problems, and I'm going to show you the problem now. You might think that you have started by setting the color to yellow in your setup function, and that will draw your rectangle in yellow, and then you think you want the rest of the shapes to be in red. Now, can you predict what's going to happen here? Let's try it. All the shapes appear to be red. The problem here is that the setup function runs once, but the draw function runs over and over again. So, very briefly, the rectangle was indeed yellow. But on the next frame, which called the fill function and made it red, and then all the shapes subsequently drawn had been red. So, a good rule of thumb is to make sure that you always set the color at the beginning of the draw function, and I'm going to do that now. One more thing we might want to do now is to add some different outlines to our shapes as well. So, I'm going to just add a couple of outlines so that we can see that. So, I'm going to set the outline here to green, and I'm going to set the outline here to blue. Again, we can see that same problem. Now our yellow rectangle has a blue outline because the draw loop is repeated and we haven't set no stroke. So, if I want that yellow rectangle not to have an outline, I need to put noStroke at the beginning of my draw function. There we go. We fixed it. There's one more thing that you might want to experiment with, and that is transparency or Alpha value. The way we do this is we add a fourth argument to the fill command. So, I'm going to show it to you with these bottom shapes that are overlaid. I'm going to put in a fill command here, and I'm going to set the color to red. But now, I'm going to add in another value here. So, I'm going to start by putting this value at 255. Now, 255 will mean that the shape is completely opaque. So, so far, nothing has changed. But if I change that and make it 0, for example, the shape will be completely transparent. If I put it somewhere in between, say, 100, we'll find that the shape now has a kind of semi-transparency, and you can see this very nice effect where the two shapes are overlaid and the color gets darker. So, that's a really good interesting thing for you to experiment with. I've shown you everything you need to know about fill and stroke. So, experiment on this sketch, but also try the hacky tech exercise, Robot Parade.
