1
00:00:02,518 --> 00:00:03,908
There are three steps 
you need to know about

2
00:00:03,908 --> 00:00:06,528
to make your drawings 
splendiferously colorful.

3
00:00:06,528 --> 00:00:08,559
Let's start by coloring 
the background.

4
00:00:08,559 --> 00:00:11,870
To do that, just type background 
and open parentheses,

5
00:00:11,870 --> 00:00:13,892
and the rest of the line 
will complete for you.

6
00:00:13,892 --> 00:00:17,093
If you look closer, you'll notice that 
this is actually a function call.

7
00:00:17,093 --> 00:00:19,074
See, we have the name 
of the function here,

8
00:00:19,074 --> 00:00:22,235
which is background,
then two parentheses,

9
00:00:22,235 --> 00:00:24,778
and three parameters inside, 
separated by commas.

10
00:00:25,018 --> 00:00:29,782
These three numbers represent 
the amount of red, green, and blue

11
00:00:29,782 --> 00:00:31,226
in the background color.

12
00:00:31,236 --> 00:00:34,792
The numbers can go anywhere 
between 0 and 255,

13
00:00:35,142 --> 00:00:37,393
where 0 means 
there's none of that color,

14
00:00:37,393 --> 00:00:39,797
and 255 means 
we're maxing out on that color.

15
00:00:39,857 --> 00:00:42,973
Right now, I'm maxing out on red, 
and there's no green and blue.

16
00:00:43,073 --> 00:00:45,050
That's why the background is 
a super bright red.

17
00:00:45,102 --> 00:00:48,078
If I make the first number smaller,
then there'll be less red,

18
00:00:48,248 --> 00:00:49,752
so it will look like a darker red.

19
00:00:49,752 --> 00:00:51,242
I can keep playing around 
with these numbers

20
00:00:51,242 --> 00:00:53,068
and seeing what kind of colors
I can come up with.

21
00:00:53,148 --> 00:00:56,144
Or, I can use our handy dandy
color picker,

22
00:00:56,204 --> 00:00:58,942
which will set 
all three numbers for me.

23
00:00:59,552 --> 00:01:00,671
Now it's important to know that

24
00:01:00,671 --> 00:01:02,980
what this background function 
is really doing,

25
00:01:03,030 --> 00:01:06,100
is just drawing a big colored square
over the entire canvas.

26
00:01:06,370 --> 00:01:08,765
If I moved it to the end 
of my program like this,

27
00:01:08,765 --> 00:01:10,500
then it would draw that 
big background square

28
00:01:10,500 --> 00:01:11,905
over all my shapes.

29
00:01:12,165 --> 00:01:13,520
Maybe you're thinking, 
'that's stupid,

30
00:01:13,520 --> 00:01:14,715
why would anybody want that?'

31
00:01:14,715 --> 00:01:16,530
But hey, you never know.

32
00:01:16,770 --> 00:01:18,610
We'll leave it at the top
for now.

33
00:01:19,250 --> 00:01:20,669
Now to color our shapes!

34
00:01:20,819 --> 00:01:22,306
It might be helpful to think 
of the computer

35
00:01:22,306 --> 00:01:23,983
as having a color assistant,

36
00:01:23,983 --> 00:01:27,000
or some sort of color butler.

37
00:01:27,000 --> 00:01:29,357
Basically some dude 
that's in charge of the colors.

38
00:01:29,547 --> 00:01:34,590
This color dude can only hold 
one colored marker in his left hand,

39
00:01:34,620 --> 00:01:39,079
and one bucket of paint 
in his right hand.

40
00:01:39,209 --> 00:01:42,513
The computer uses the colored marker
to draw all of these outlines,

41
00:01:42,513 --> 00:01:44,550
and the bucket of paint 
to fill in the shapes.

42
00:01:44,550 --> 00:01:47,269
Now, the marker is black, 
and the bucket of paint is white.

43
00:01:47,499 --> 00:01:49,060
You can change the color 
of the marker

44
00:01:49,060 --> 00:01:51,531
by calling this function, stroke.

45
00:01:51,531 --> 00:01:55,274
It also autocompletes, 
and then you can pick a color.

46
00:01:55,274 --> 00:01:58,310
This switches out the marker
that color dude is holding,

47
00:01:58,560 --> 00:02:00,230
so that all shapes drawn 
after this line

48
00:02:00,230 --> 00:02:02,180
will be drawn 
with a pink marker.

49
00:02:02,320 --> 00:02:04,950
Sometimes you don't want outlines
on your shapes.

50
00:02:05,010 --> 00:02:06,544
There's a function for that too!

51
00:02:06,544 --> 00:02:10,175
It's called noStroke,
and for the first time,

52
00:02:10,175 --> 00:02:12,686
we see a function that doesn't take
any parameters.

53
00:02:12,686 --> 00:02:17,009
We just have this empty set 
of parentheses, and a semi-colon,

54
00:02:17,009 --> 00:02:19,428
and now you can see our shapes
have no outlines.

55
00:02:19,868 --> 00:02:21,531
We can switch out 
the color dude's paint bucket

56
00:02:21,531 --> 00:02:24,594
by calling this function, Fill.

57
00:02:25,484 --> 00:02:27,509
Now, from this line of code forward,

58
00:02:27,509 --> 00:02:29,924
you will fill in all the shapes 
with this bright red color.

59
00:02:30,024 --> 00:02:31,961
Just like we have a noStroke function,

60
00:02:31,961 --> 00:02:37,308
we also have a noFill function, 
which also takes no parameters.

61
00:02:38,028 --> 00:02:41,297
This makes all of our shapes transparent
- they're not filled in.

62
00:02:42,247 --> 00:02:44,273
Now let's go ahead 
and actually color this dude.

63
00:02:44,273 --> 00:02:46,987
We start off by drawing a triangle
for his body.

64
00:02:46,987 --> 00:02:49,022
I'm going to pick a stroke color for it,

65
00:02:49,022 --> 00:02:50,479
set the outline, 


66
00:02:51,219 --> 00:02:54,856
I don't know...
let's do a dark green.

67
00:02:56,246 --> 00:02:58,407
Now we pick a fill color.

68
00:02:58,757 --> 00:03:02,241
Hmm, what would be nice? 
Maybe a lighter green.

69
00:03:02,241 --> 00:03:04,475
A lighter green.
It's nice.

70
00:03:04,965 --> 00:03:07,547
For his face, we don't want his face
to have a green outline,

71
00:03:07,547 --> 00:03:10,189
so I'll change stroke color for his face.

72
00:03:12,899 --> 00:03:17,802
I'll pick a dark tan brown-ish outline.

73
00:03:18,262 --> 00:03:19,767
Now I'll pick a different fill color.

74
00:03:19,767 --> 00:03:20,942
Yikes!

75
00:03:21,202 --> 00:03:24,777
What's a good face color? Hmm...

76
00:03:25,217 --> 00:03:29,343
That's kind of a face color, right?

77
00:03:30,033 --> 00:03:33,104
Now, the next two lines, 
these two ellipses, are his hands.

78
00:03:33,214 --> 00:03:35,651
I want his hands to be 
the same color as his face.

79
00:03:35,801 --> 00:03:37,269
So we're not going to 
switch out the marker

80
00:03:37,269 --> 00:03:38,507
or paint bucket.

81
00:03:38,507 --> 00:03:40,837
We're just going to leave stroke
and fill the same,

82
00:03:40,837 --> 00:03:42,250
and move on to his mouth.

83
00:03:42,460 --> 00:03:44,891
His mouth is just this line,

84
00:03:46,551 --> 00:03:50,592
and lines don't have fill colors
because there's nothing to fill in.

85
00:03:50,672 --> 00:03:53,153
But we can change the stroke color 
of this line.

86
00:03:54,063 --> 00:03:56,156
Yeah, red's a pretty good color
for his mouth.

87
00:03:56,246 --> 00:03:57,814
Now, his glasses frames.

88
00:03:57,834 --> 00:04:00,005
Once gain, 
we only need to set the stroke.

89
00:04:00,085 --> 00:04:01,748
What's a good color for glasses?

90
00:04:01,838 --> 00:04:03,683
Black is pretty classic.

91
00:04:03,793 --> 00:04:07,724
For his glasses lenses,

92
00:04:07,814 --> 00:04:11,465
I want the rectangles to have 
the same outline as his frame.

93
00:04:11,465 --> 00:04:14,796
I'm not going to change the stroke,
but I will give it a fill color.

94
00:04:17,126 --> 00:04:20,032
Let's make it black 
to match the frames.

95
00:04:20,032 --> 00:04:22,487
There we go, 
our dude is colored!

96
00:04:22,487 --> 00:04:26,070
Awwwwww, yeah!