There are three steps you need to know about
to make your drawings splendiferously colorful.
Let's start by coloring the background.
To do that, just type background and open parentheses,
and the rest of the line will complete for you.
If you look closer, you'll notice that this is actually a function call.
See, we have the name of the function here,
which is background, then two parentheses,
and three parameters inside, separated by commas.
These three numbers represent the amount of red, green, and blue
in the background color.
The numbers can go anywhere between 0 and 255,
where 0 means there's none of that color,
and 255 means we're maxing out on that color.
Right now, I'm maxing out on red, and there's no green and blue.
That's why the background is a super bright red.
If I make the first number smaller, then there'll be less red,
so it will look like a darker red.
I can keep playing around with these numbers
and seeing what kind of colors I can come up with.
Or, I can use our handy dandy color picker,
which will set all three numbers for me.
Now it's important to know that
what this background function is really doing,
is just drawing a big colored square over the entire canvas.
If I moved it to the end of my program like this,
then it would draw that big background square
over all my shapes.
Maybe you're thinking, 'that's stupid,
why would anybody want that?'
But hey, you never know.
We'll leave it at the top for now.
Now to color our shapes!
It might be helpful to think of the computer
as having a color assistant,
or some sort of color butler.
Basically some dude that's in charge of the colors.
This color dude can only hold one colored marker in his left hand,
and one bucket of paint in his right hand.
The computer uses the colored marker to draw all of these outlines,
and the bucket of paint to fill in the shapes.
Now, the marker is black, and the bucket of paint is white.
You can change the color of the marker
by calling this function, stroke.
It also autocompletes, and then you can pick a color.
This switches out the marker that color dude is holding,
so that all shapes drawn after this line
will be drawn with a pink marker.
Sometimes you don't want outlines on your shapes.
There's a function for that too!
It's called noStroke, and for the first time,
we see a function that doesn't take any parameters.
We just have this empty set of parentheses, and a semi-colon,
and now you can see our shapes have no outlines.
We can switch out the color dude's paint bucket
by calling this function, Fill.
Now, from this line of code forward,
you will fill in all the shapes with this bright red color.
Just like we have a noStroke function,
we also have a noFill function, which also takes no parameters.
This makes all of our shapes transparent - they're not filled in.
Now let's go ahead and actually color this dude.
We start off by drawing a triangle for his body.
I'm going to pick a stroke color for it,
set the outline,
I don't know... let's do a dark green.
Now we pick a fill color.
Hmm, what would be nice? Maybe a lighter green.
A lighter green. It's nice.
For his face, we don't want his face to have a green outline,
so I'll change stroke color for his face.
I'll pick a dark tan brown-ish outline.
Now I'll pick a different fill color.
Yikes!
What's a good face color? Hmm...
That's kind of a face color, right?
Now, the next two lines, these two ellipses, are his hands.
I want his hands to be the same color as his face.
So we're not going to switch out the marker
or paint bucket.
We're just going to leave stroke and fill the same,
and move on to his mouth.
His mouth is just this line,
and lines don't have fill colors because there's nothing to fill in.
But we can change the stroke color of this line.
Yeah, red's a pretty good color for his mouth.
Now, his glasses frames.
Once gain, we only need to set the stroke.
What's a good color for glasses?
Black is pretty classic.
For his glasses lenses,
I want the rectangles to have the same outline as his frame.
I'm not going to change the stroke, but I will give it a fill color.
Let's make it black to match the frames.
There we go, our dude is colored!
Awwwwww, yeah!