0:00:02.518,0:00:03.908
There are three steps [br]you need to know about

0:00:03.908,0:00:06.528
to make your drawings [br]splendiferously colorful.

0:00:06.528,0:00:08.559
Let's start by coloring [br]the background.

0:00:08.559,0:00:11.870
To do that, just type background [br]and open parentheses,

0:00:11.870,0:00:13.892
and the rest of the line [br]will complete for you.

0:00:13.892,0:00:17.093
If you look closer, you'll notice that [br]this is actually a function call.

0:00:17.093,0:00:19.074
See, we have the name [br]of the function here,

0:00:19.074,0:00:22.235
which is background,[br]then two parentheses,

0:00:22.235,0:00:24.778
and three parameters inside, [br]separated by commas.

0:00:25.018,0:00:29.782
These three numbers represent [br]the amount of red, green, and blue

0:00:29.782,0:00:31.226
in the background color.

0:00:31.236,0:00:34.792
The numbers can go anywhere [br]between 0 and 255,

0:00:35.142,0:00:37.393
where 0 means [br]there's none of that color,

0:00:37.393,0:00:39.797
and 255 means [br]we're maxing out on that color.

0:00:39.857,0:00:42.973
Right now, I'm maxing out on red, [br]and there's no green and blue.

0:00:43.073,0:00:45.050
That's why the background is [br]a super bright red.

0:00:45.102,0:00:48.078
If I make the first number smaller,[br]then there'll be less red,

0:00:48.248,0:00:49.752
so it will look like a darker red.

0:00:49.752,0:00:51.242
I can keep playing around [br]with these numbers

0:00:51.242,0:00:53.068
and seeing what kind of colors[br]I can come up with.

0:00:53.148,0:00:56.144
Or, I can use our handy dandy[br]color picker,

0:00:56.204,0:00:58.942
which will set [br]all three numbers for me.

0:00:59.552,0:01:00.671
Now it's important to know that

0:01:00.671,0:01:02.980
what this background function [br]is really doing,

0:01:03.030,0:01:06.100
is just drawing a big colored square[br]over the entire canvas.

0:01:06.370,0:01:08.765
If I moved it to the end [br]of my program like this,

0:01:08.765,0:01:10.500
then it would draw that [br]big background square

0:01:10.500,0:01:11.905
over all my shapes.

0:01:12.165,0:01:13.520
Maybe you're thinking, [br]'that's stupid,

0:01:13.520,0:01:14.715
why would anybody want that?'

0:01:14.715,0:01:16.530
But hey, you never know.

0:01:16.770,0:01:18.610
We'll leave it at the top[br]for now.

0:01:19.250,0:01:20.669
Now to color our shapes!

0:01:20.819,0:01:22.306
It might be helpful to think [br]of the computer

0:01:22.306,0:01:23.983
as having a color assistant,

0:01:23.983,0:01:27.000
or some sort of color butler.

0:01:27.000,0:01:29.357
Basically some dude [br]that's in charge of the colors.

0:01:29.547,0:01:34.590
This color dude can only hold [br]one colored marker in his left hand,

0:01:34.620,0:01:39.079
and one bucket of paint [br]in his right hand.

0:01:39.209,0:01:42.513
The computer uses the colored marker[br]to draw all of these outlines,

0:01:42.513,0:01:44.550
and the bucket of paint [br]to fill in the shapes.

0:01:44.550,0:01:47.269
Now, the marker is black, [br]and the bucket of paint is white.

0:01:47.499,0:01:49.060
You can change the color [br]of the marker

0:01:49.060,0:01:51.531
by calling this function, stroke.

0:01:51.531,0:01:55.274
It also autocompletes, [br]and then you can pick a color.

0:01:55.274,0:01:58.310
This switches out the marker[br]that color dude is holding,

0:01:58.560,0:02:00.230
so that all shapes drawn [br]after this line

0:02:00.230,0:02:02.180
will be drawn [br]with a pink marker.

0:02:02.320,0:02:04.950
Sometimes you don't want outlines[br]on your shapes.

0:02:05.010,0:02:06.544
There's a function for that too!

0:02:06.544,0:02:10.175
It's called noStroke,[br]and for the first time,

0:02:10.175,0:02:12.686
we see a function that doesn't take[br]any parameters.

0:02:12.686,0:02:17.009
We just have this empty set [br]of parentheses, and a semi-colon,

0:02:17.009,0:02:19.428
and now you can see our shapes[br]have no outlines.

0:02:19.868,0:02:21.531
We can switch out [br]the color dude's paint bucket

0:02:21.531,0:02:24.594
by calling this function, Fill.

0:02:25.484,0:02:27.509
Now, from this line of code forward,

0:02:27.509,0:02:29.924
you will fill in all the shapes [br]with this bright red color.

0:02:30.024,0:02:31.961
Just like we have a noStroke function,

0:02:31.961,0:02:37.308
we also have a noFill function, [br]which also takes no parameters.

0:02:38.028,0:02:41.297
This makes all of our shapes transparent[br]- they're not filled in.

0:02:42.247,0:02:44.273
Now let's go ahead [br]and actually color this dude.

0:02:44.273,0:02:46.987
We start off by drawing a triangle[br]for his body.

0:02:46.987,0:02:49.022
I'm going to pick a stroke color for it,

0:02:49.022,0:02:50.479
set the outline, [br]

0:02:51.219,0:02:54.856
I don't know...[br]let's do a dark green.

0:02:56.246,0:02:58.407
Now we pick a fill color.

0:02:58.757,0:03:02.241
Hmm, what would be nice? [br]Maybe a lighter green.

0:03:02.241,0:03:04.475
A lighter green.[br]It's nice.

0:03:04.965,0:03:07.547
For his face, we don't want his face[br]to have a green outline,

0:03:07.547,0:03:10.189
so I'll change stroke color for his face.

0:03:12.899,0:03:17.802
I'll pick a dark tan brown-ish outline.

0:03:18.262,0:03:19.767
Now I'll pick a different fill color.

0:03:19.767,0:03:20.942
Yikes!

0:03:21.202,0:03:24.777
What's a good face color? Hmm...

0:03:25.217,0:03:29.343
That's kind of a face color, right?

0:03:30.033,0:03:33.104
Now, the next two lines, [br]these two ellipses, are his hands.

0:03:33.214,0:03:35.651
I want his hands to be [br]the same color as his face.

0:03:35.801,0:03:37.269
So we're not going to [br]switch out the marker

0:03:37.269,0:03:38.507
or paint bucket.

0:03:38.507,0:03:40.837
We're just going to leave stroke[br]and fill the same,

0:03:40.837,0:03:42.250
and move on to his mouth.

0:03:42.460,0:03:44.891
His mouth is just this line,

0:03:46.551,0:03:50.592
and lines don't have fill colors[br]because there's nothing to fill in.

0:03:50.672,0:03:53.153
But we can change the stroke color [br]of this line.

0:03:54.063,0:03:56.156
Yeah, red's a pretty good color[br]for his mouth.

0:03:56.246,0:03:57.814
Now, his glasses frames.

0:03:57.834,0:04:00.005
Once gain, [br]we only need to set the stroke.

0:04:00.085,0:04:01.748
What's a good color for glasses?

0:04:01.838,0:04:03.683
Black is pretty classic.

0:04:03.793,0:04:07.724
For his glasses lenses,

0:04:07.814,0:04:11.465
I want the rectangles to have [br]the same outline as his frame.

0:04:11.465,0:04:14.796
I'm not going to change the stroke,[br]but I will give it a fill color.

0:04:17.126,0:04:20.032
Let's make it black [br]to match the frames.

0:04:20.032,0:04:22.487
There we go, [br]our dude is colored!

0:04:22.487,0:04:26.070
Awwwwww, yeah!