0:00:01.075,0:00:05.571
Hi! Welcome back! You came back, which I'm very thankful for — thank you very much.

0:00:05.571,0:00:09.600
So, hopefully you enjoyed the last exercise you did, and your code is still sitting down there.

0:00:09.600,0:00:13.628
Now, by the way, during this section of the tutorial, I am going to start doing stuff,

0:00:13.814,0:00:15.887
and the code that you wrote is going to disappear.

0:00:15.887,0:00:18.331
But don't worry; there's going to be an option for you to restore it again later.

0:00:18.663,0:00:23.134
OK, so what are we missing? We've got shapes: we've got circles, we've got rectangles.

0:00:23.459,0:00:26.714
But obviously we're missing something really important in terms of art and design.

0:00:26.714,0:00:27.717
We're missing color.

0:00:28.146,0:00:30.474
So let's think about that rectangle again.

0:00:30.474,0:00:32.003
We have this rectangle.

0:00:34.266,0:00:35.403
We have this circle.

0:00:35.620,0:00:42.510
What do these shapes have? They have both an outline, which is tracing this rectangle,

0:00:42.510,0:00:48.789
which we're going to call — sorry — the "stroke." We also have the interior of the shape,

0:00:48.789,0:00:51.752
the interior of the shape which we're going to call the "fill."

0:00:52.418,0:00:55.746
So we have two colors that we have to set for every shape.

0:00:55.746,0:00:59.780
We have the stroke, which is the outline, and we have the fill, which is the interior.

0:01:00.147,0:01:03.476
And just like we learnd these function calls, these commands —

0:01:03.476,0:01:08.529
"rect" for rectangle, "ellipse" for ellipse — we're going to have functions for stroke and fill.

0:01:08.529,0:01:10.218
So it's going to look like this.

0:01:10.218,0:01:15.813
Let's say we're drawing a rectangle, and that rectangle is being drawn at some location.

0:01:15.813,0:01:18.858
Uh, I think this is something we had previously.

0:01:18.858,0:01:30.255
What we need to do now, before we say "rectangle" is we need to say "stroke" and we need to say "fill."

0:01:33.035,0:01:35.786
Every single time that we draw a shape, if we want to color it,

0:01:35.786,0:01:39.194
we need to set the stroke and fill before we call that shape function.

0:01:39.567,0:01:41.943
This is, again, a moment when order of operations matter.

0:01:41.943,0:01:45.891
We don't say, "draw a rectangle — hey it's blue, and it's red on the outside."

0:01:45.891,0:01:48.443
We say, "set a pen color..." (in a way it's like a pen)....

0:01:48.443,0:01:52.224
"Go and find my red pen and go and find my blue marker.

0:01:52.548,0:01:56.716
You use the red pen for the outside and the blue marker for the inside" when I draw that rectangle.

0:01:56.716,0:02:00.902
But there's a big question here, right? We know that when we draw a rectangle we give it an x, a y,

0:02:00.902,0:02:04.941
a width, and height: those are the values that define what it is to be a rectangle.

0:02:05.721,0:02:09.890
What values do we give a stroke or a fill? How do we tie numbers to color?

0:02:09.890,0:02:14.829
Let's say we have the number 0, and we say the number 0 means black.

0:02:15.581,0:02:21.656
And let's say we have the number 255, and the number 255 means white.

0:02:22.496,0:02:26.054
So any value in between, any value in between is some gray.

0:02:26.554,0:02:30.535
127 would be, like, half the way between white and black.

0:02:30.535,0:02:34.399
253 would be really white, but not all the way white.

0:02:34.399,0:02:37.929
Right? So can really imagine this and obviously just trying out these numbers would make much more sense.

0:02:37.929,0:02:44.048
So we could say something like "stroke (0)" and we would have a black outline.

0:02:44.048,0:02:45.939
Let's actually bring up the code editor below,

0:02:45.939,0:02:51.979
and let's add a stroke (0) and a fill for one of our shapes down there, for the rectangle below.

0:02:51.979,0:02:59.571
OK, see how the stroke and fill are placed before we call rect, and that they are setting the colors that you're seeing in the canvas on the left.

0:02:59.933,0:03:00.595
Great.

0:03:00.595,0:03:04.353
So, I want to move on quickly though, however, to … even though this is nice,

0:03:04.353,0:03:07.703
and we can see that we can do grayscale colors, really,

0:03:07.703,0:03:10.805
what you probably want to do is make all sorts of … you know, what's your favorite color?

0:03:10.805,0:03:15.341
Pink? Purple? Green? Blue? You want to make "color" color, how do we do that?

0:03:15.341,0:03:21.323
So, with one number — if we put one number here in stroke, we have a grayscale color,

0:03:21.323,0:03:27.736
but if we put three numbers in, like if I put numbers like this (255, 0, 0),

0:03:27.736,0:03:32.500
what we now have done is we've created an RGB color.

0:03:32.500,0:03:40.409
RGB: we have a little bit of red, we have some amount of green, and we have some amount of blue.

0:03:40.409,0:03:42.887
The arguments are red, green, and blue.

0:03:42.887,0:03:46.388
And it has the same … it follows the same scale as grayscale.

0:03:46.388,0:03:52.804
In the case of red, 255 is all the red you could imagine; 0 is no red.

0:03:52.804,0:03:53.802
So it's like mixing colors.

0:03:53.802,0:03:57.252
I mean, it's something you might have done, um, you know, fingerpainting, or mixing colors,

0:03:57.252,0:04:00.005
and you get a little red, you get a little blue, and you put them together,

0:04:00.005,0:04:02.820
and I think maybe you get purple, something like that.

0:04:02.820,0:04:04.722
Um, this same principle is happening here.

0:04:04.722,0:04:08.671
You're adding a variable amount of red, a variable amount of blue and mixing colors.

0:04:08.671,0:04:11.970
The thing that you should realize, though, is it's not like mixing paints,

0:04:11.970,0:04:16.052
that what color actually does on the computer is really like mixing light.

0:04:16.052,0:04:19.935
It's more like imagining that you had three flashlights — a red flashlight, a green flashlight,

0:04:19.935,0:04:24.692
and a blue flashlight — and you could turn them up or down and shine them on the same point.

0:04:24.692,0:04:29.910
So let's switch over again and open up the code editor below, and let's add a stroke and a fill.

0:04:30.303,0:04:32.618
The stroke and the fill are still there from rectangle.

0:04:32.618,0:04:38.522
Let's make the stroke red, which would be all red, (255, 0, 0),

0:04:38.522,0:04:44.185
and let's make a fill that's all blue, (0, 0, 255).

0:04:44.185,0:04:47.436
Let's run that, and now we see a red outline with a blue interior.

0:04:47.883,0:04:52.173
You probably want lots of other colors, and it might be hard to figure out what color do I want?

0:04:52.173,0:04:57.475
Well, if you notice, if you click on fill, and I'm going to do this for you, a wheel (a color picker)

0:04:57.475,0:05:00.928
pops up where you could move the mouse around and you can select the color you want,

0:05:00.928,0:05:05.375
and it shows you what are the red, what are the green, and what are the blue values for that color.

0:05:05.375,0:05:11.251
So, you can type in your values manually or you can use the color picker to set values.

0:05:11.678,0:05:16.857
We know now how to set the outline or the fill, the stroke or the fill of these shapes.

0:05:16.857,0:05:20.483
But remember, there is this canvas that we're drawing into.

0:05:20.483,0:05:25.043
But what if you want, actually, to fill in a color in the background?

0:05:25.043,0:05:29.619
So there is one more function that we are going to learn as part of this little tutorial,

0:05:29.619,0:05:31.528
which is "background ()".

0:05:31.528,0:05:35.402
So, I'm going to add that now to the code editor below, background (),

0:05:35.402,0:05:38.606
and I'm going to put a color in there that's a nice, soft yellow.

0:05:38.606,0:05:40.901
And then now we're going to run it.

0:05:40.901,0:05:42.584
We're going to see that yellow is the background.

0:05:42.584,0:05:44.464
So, why don't you take a minute, actually.

0:05:44.464,0:05:48.197
Try the color picker on the background, and pick a different color.

0:05:50.519,0:05:52.619
You're going to have to press "run your code" when you're ready.

0:05:54.259,0:05:57.571
Did the color you picked appear in the background? Hopefully it did.

0:05:57.571,0:06:01.350
OK, so this really wraps up the end of this section about color.

0:06:01.350,0:06:05.715
You know, what did we first do? We first learned we could put rectangles and ellipses of any size

0:06:05.715,0:06:08.281
anywhere on the screen.

0:06:08.529,0:06:13.531
Now we can assign any of them different strokes, different fills, and we can put a background color.

0:06:13.531,0:06:16.383
I'm going to put below an example for you to start with.

0:06:16.383,0:06:19.459
It's a nice design that has a bunch of shapes and a bunch of colors in it.

0:06:19.459,0:06:24.352
You can use this, tweak it to make your own design, or — you'll also see when this video ends —

0:06:24.352,0:06:29.683
there will be an option for you to revert back to your previous code that you had at the end of lesson 1.

0:06:29.683,0:06:33.183
So if you want to go find that creature or alien you made and start adding color to it,

0:06:33.183,0:06:35.370
that's what you could do for this exercise.

0:06:35.370,0:06:37.742
I'll talk to you later, and enjoy this exercise.