Black, White, and In Between
So far, all of our shapes have looked pretty boring. Let’s learn how we can add some color to them!
When we talk about colors, we use words like ‘red’ and ‘pink’, but computers don’t know what these words mean. Instead, we have to use numbers to tell the computer what color to use. We pass these numbers as attributes to the a new function called
fill, which fills the middle of the shape with the color we give it.
Let’s take a look at how we do this. Type the following line at the top of your program:
We are telling the program to run the function
fill with an attribute of
Sets the color used to fill shapesLearn More
If you just drew a face at the end of the previous lesson, your code might look a little bit like this:
fill(0); ellipse(25,30,30,30); ellipse(75,30,30,30); rect(20,60,60,20);
When we typed
fill(0); at the top of the program, we told the computer to
fill all of the shapes after it with a color of
0. The color
0 is black, so the eyes and mouth will now look black.
We have to tell the program which color to pick before we draw any shapes, kind of like how you need to pick a color before you draw something on a piece of paper. If your face’s color is still white, make sure that you put the fill function at the top of the program.
Colors are expressed as numbers from 0 to 255. The number 255 might sound like a strange one to pick (why not 100?), but it’s a quirk with how computers store numbers. You will see the number 255 quite a lot when you write programs!
The color 0 is black, and the color 255 is white. Every color between white and black has a number between 0 and 255. Here is what some of these numbers look like:
Let’s try changing the program so that we have different colors for each part of the face:
fill(0); ellipse(25,30,30,30); fill(130); ellipse(75,30,30,30); fill(255); rect(20,60,60,20);
Change the color of the face you made in your last program. You can make it black, white, or anything in between.