Lesson 7

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 0.

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.

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);