WEBVTT

00:00:02.518 --> 00:00:03.908
There are three steps 
you need to know about

00:00:03.908 --> 00:00:06.528
to make your drawings 
splendiferously colorful.

00:00:06.528 --> 00:00:08.559
Let's start by coloring 
the background.

00:00:08.559 --> 00:00:11.870
To do that, just type background 
and open parentheses,

00:00:11.870 --> 00:00:13.892
and the rest of the line 
will complete for you.

00:00:13.892 --> 00:00:17.093
If you look closer, you'll notice that 
this is actually a function call.

00:00:17.093 --> 00:00:19.074
See, we have the name 
of the function here,

00:00:19.074 --> 00:00:22.235
which is background,
then two parentheses,

00:00:22.235 --> 00:00:24.778
and three parameters inside, 
separated by commas.

00:00:25.018 --> 00:00:29.782
These three numbers represent 
the amount of red, green, and blue

00:00:29.782 --> 00:00:31.226
in the background color.

00:00:31.236 --> 00:00:34.792
The numbers can go anywhere 
between 0 and 255,

00:00:35.142 --> 00:00:37.393
where 0 means 
there's none of that color,

00:00:37.393 --> 00:00:39.797
and 255 means 
we're maxing out on that color.

00:00:39.857 --> 00:00:42.973
Right now, I'm maxing out on red, 
and there's no green and blue.

00:00:43.073 --> 00:00:45.050
That's why the background is 
a super bright red.

00:00:45.102 --> 00:00:48.078
If I make the first number smaller,
then there'll be less red,

00:00:48.248 --> 00:00:49.752
so it will look like a darker red.

00:00:49.752 --> 00:00:51.242
I can keep playing around 
with these numbers

00:00:51.242 --> 00:00:53.068
and seeing what kind of colors
I can come up with.

00:00:53.148 --> 00:00:56.144
Or, I can use our handy dandy
color picker,

00:00:56.204 --> 00:00:58.942
which will set 
all three numbers for me.

00:00:59.552 --> 00:01:00.671
Now it's important to know that

00:01:00.671 --> 00:01:02.980
what this background function 
is really doing,

00:01:03.030 --> 00:01:06.100
is just drawing a big colored square
over the entire canvas.

00:01:06.370 --> 00:01:08.765
If I moved it to the end 
of my program like this,

00:01:08.765 --> 00:01:10.500
then it would draw that 
big background square

00:01:10.500 --> 00:01:11.905
over all my shapes.

00:01:12.165 --> 00:01:13.520
Maybe you're thinking, 
'that's stupid,

00:01:13.520 --> 00:01:14.715
why would anybody want that?'

00:01:14.715 --> 00:01:16.530
But hey, you never know.

00:01:16.770 --> 00:01:18.610
We'll leave it at the top
for now.

00:01:19.250 --> 00:01:20.669
Now to color our shapes!

00:01:20.819 --> 00:01:22.306
It might be helpful to think 
of the computer

00:01:22.306 --> 00:01:23.983
as having a color assistant,

00:01:23.983 --> 00:01:27.000
or some sort of color butler.

00:01:27.000 --> 00:01:29.357
Basically some dude 
that's in charge of the colors.

00:01:29.547 --> 00:01:34.590
This color dude can only hold 
one colored marker in his left hand,

00:01:34.620 --> 00:01:39.079
and one bucket of paint 
in his right hand.

00:01:39.209 --> 00:01:42.513
The computer uses the colored marker
to draw all of these outlines,

00:01:42.513 --> 00:01:44.550
and the bucket of paint 
to fill in the shapes.

00:01:44.550 --> 00:01:47.269
Now, the marker is black, 
and the bucket of paint is white.

00:01:47.499 --> 00:01:49.060
You can change the color 
of the marker

00:01:49.060 --> 00:01:51.531
by calling this function, stroke.

00:01:51.531 --> 00:01:55.274
It also autocompletes, 
and then you can pick a color.

00:01:55.274 --> 00:01:58.310
This switches out the marker
that color dude is holding,

00:01:58.560 --> 00:02:00.230
so that all shapes drawn 
after this line

00:02:00.230 --> 00:02:02.180
will be drawn 
with a pink marker.

00:02:02.320 --> 00:02:04.950
Sometimes you don't want outlines
on your shapes.

00:02:05.010 --> 00:02:06.544
There's a function for that too!

00:02:06.544 --> 00:02:10.175
It's called noStroke,
and for the first time,

00:02:10.175 --> 00:02:12.686
we see a function that doesn't take
any parameters.

00:02:12.686 --> 00:02:17.009
We just have this empty set 
of parentheses, and a semi-colon,

00:02:17.009 --> 00:02:19.428
and now you can see our shapes
have no outlines.

00:02:19.868 --> 00:02:21.531
We can switch out 
the color dude's paint bucket

00:02:21.531 --> 00:02:24.594
by calling this function, Fill.

00:02:25.484 --> 00:02:27.509
Now, from this line of code forward,

00:02:27.509 --> 00:02:29.924
you will fill in all the shapes 
with this bright red color.

00:02:30.024 --> 00:02:31.961
Just like we have a noStroke function,

00:02:31.961 --> 00:02:37.308
we also have a noFill function, 
which also takes no parameters.

00:02:38.028 --> 00:02:41.297
This makes all of our shapes transparent
- they're not filled in.

00:02:42.247 --> 00:02:44.273
Now let's go ahead 
and actually color this dude.

00:02:44.273 --> 00:02:46.987
We start off by drawing a triangle
for his body.

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

00:02:49.022 --> 00:02:50.479
set the outline, 


00:02:51.219 --> 00:02:54.856
I don't know...
let's do a dark green.

00:02:56.246 --> 00:02:58.407
Now we pick a fill color.

00:02:58.757 --> 00:03:02.241
Hmm, what would be nice? 
Maybe a lighter green.

00:03:02.241 --> 00:03:04.475
A lighter green.
It's nice.

00:03:04.965 --> 00:03:07.547
For his face, we don't want his face
to have a green outline,

00:03:07.547 --> 00:03:10.189
so I'll change stroke color for his face.

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

00:03:18.262 --> 00:03:19.767
Now I'll pick a different fill color.

00:03:19.767 --> 00:03:20.942
Yikes!

00:03:21.202 --> 00:03:24.777
What's a good face color? Hmm...

00:03:25.217 --> 00:03:29.343
That's kind of a face color, right?

00:03:30.033 --> 00:03:33.104
Now, the next two lines, 
these two ellipses, are his hands.

00:03:33.214 --> 00:03:35.651
I want his hands to be 
the same color as his face.

00:03:35.801 --> 00:03:37.269
So we're not going to 
switch out the marker

00:03:37.269 --> 00:03:38.507
or paint bucket.

00:03:38.507 --> 00:03:40.837
We're just going to leave stroke
and fill the same,

00:03:40.837 --> 00:03:42.250
and move on to his mouth.

00:03:42.460 --> 00:03:44.891
His mouth is just this line,

00:03:46.551 --> 00:03:50.592
and lines don't have fill colors
because there's nothing to fill in.

00:03:50.672 --> 00:03:53.153
But we can change the stroke color 
of this line.

00:03:54.063 --> 00:03:56.156
Yeah, red's a pretty good color
for his mouth.

00:03:56.246 --> 00:03:57.814
Now, his glasses frames.

00:03:57.834 --> 00:04:00.005
Once gain, 
we only need to set the stroke.

00:04:00.085 --> 00:04:01.748
What's a good color for glasses?

00:04:01.838 --> 00:04:03.683
Black is pretty classic.

00:04:03.793 --> 00:04:07.724
For his glasses lenses,

00:04:07.814 --> 00:04:11.465
I want the rectangles to have 
the same outline as his frame.

00:04:11.465 --> 00:04:14.796
I'm not going to change the stroke,
but I will give it a fill color.

00:04:17.126 --> 00:04:20.032
Let's make it black 
to match the frames.

00:04:20.032 --> 00:04:22.487
There we go, 
our dude is colored!

00:04:22.487 --> 00:04:26.070
Awwwwww, yeah!