-
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!