WEBVTT 00:00:01.075 --> 00:00:05.571 Hi! Welcome back! You came back, which I'm very thankful for — thank you very much. 00:00:05.571 --> 00:00:09.600 So, hopefully you enjoyed the last exercise you did, and your code is still sitting down there. 00:00:09.600 --> 00:00:13.628 Now, by the way, during this section of the tutorial, I am going to start doing stuff, 00:00:13.814 --> 00:00:15.887 and the code that you wrote is going to disappear. 00:00:15.887 --> 00:00:18.331 But don't worry; there's going to be an option for you to restore it again later. 00:00:18.663 --> 00:00:23.134 OK, so what are we missing? We've got shapes: we've got circles, we've got rectangles. 00:00:23.459 --> 00:00:26.714 But obviously we're missing something really important in terms of art and design. 00:00:26.714 --> 00:00:27.717 We're missing color. 00:00:28.146 --> 00:00:30.474 So let's think about that rectangle again. 00:00:30.474 --> 00:00:32.003 We have this rectangle. 00:00:34.266 --> 00:00:35.403 We have this circle. 00:00:35.620 --> 00:00:42.510 What do these shapes have? They have both an outline, which is tracing this rectangle, 00:00:42.510 --> 00:00:48.789 which we're going to call — sorry — the "stroke." We also have the interior of the shape, 00:00:48.789 --> 00:00:51.752 the interior of the shape which we're going to call the "fill." 00:00:52.418 --> 00:00:55.746 So we have two colors that we have to set for every shape. 00:00:55.746 --> 00:00:59.780 We have the stroke, which is the outline, and we have the fill, which is the interior. 00:01:00.147 --> 00:01:03.476 And just like we learnd these function calls, these commands — 00:01:03.476 --> 00:01:08.529 "rect" for rectangle, "ellipse" for ellipse — we're going to have functions for stroke and fill. 00:01:08.529 --> 00:01:10.218 So it's going to look like this. 00:01:10.218 --> 00:01:15.813 Let's say we're drawing a rectangle, and that rectangle is being drawn at some location. 00:01:15.813 --> 00:01:18.858 Uh, I think this is something we had previously. 00:01:18.858 --> 00: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." 00:01:33.035 --> 00:01:35.786 Every single time that we draw a shape, if we want to color it, 00:01:35.786 --> 00:01:39.194 we need to set the stroke and fill before we call that shape function. 00:01:39.567 --> 00:01:41.943 This is, again, a moment when order of operations matter. 00:01:41.943 --> 00:01:45.891 We don't say, "draw a rectangle — hey it's blue, and it's red on the outside." 00:01:45.891 --> 00:01:48.443 We say, "set a pen color..." (in a way it's like a pen).... 00:01:48.443 --> 00:01:52.224 "Go and find my red pen and go and find my blue marker. 00:01:52.548 --> 00:01:56.716 You use the red pen for the outside and the blue marker for the inside" when I draw that rectangle. 00:01:56.716 --> 00: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, 00:02:00.902 --> 00:02:04.941 a width, and height: those are the values that define what it is to be a rectangle. 00:02:05.721 --> 00:02:09.890 What values do we give a stroke or a fill? How do we tie numbers to color? 00:02:09.890 --> 00:02:14.829 Let's say we have the number 0, and we say the number 0 means black. 00:02:15.581 --> 00:02:21.656 And let's say we have the number 255, and the number 255 means white. 00:02:22.496 --> 00:02:26.054 So any value in between, any value in between is some gray. 00:02:26.554 --> 00:02:30.535 127 would be, like, half the way between white and black. 00:02:30.535 --> 00:02:34.399 253 would be really white, but not all the way white. 00:02:34.399 --> 00:02:37.929 Right? So can really imagine this and obviously just trying out these numbers would make much more sense. 00:02:37.929 --> 00:02:44.048 So we could say something like "stroke (0)" and we would have a black outline. 00:02:44.048 --> 00:02:45.939 Let's actually bring up the code editor below, 00:02:45.939 --> 00:02:51.979 and let's add a stroke (0) and a fill for one of our shapes down there, for the rectangle below. 00:02:51.979 --> 00: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. 00:02:59.933 --> 00:03:00.595 Great. 00:03:00.595 --> 00:03:04.353 So, I want to move on quickly though, however, to … even though this is nice, 00:03:04.353 --> 00:03:07.703 and we can see that we can do grayscale colors, really, 00:03:07.703 --> 00:03:10.805 what you probably want to do is make all sorts of … you know, what's your favorite color? 00:03:10.805 --> 00:03:15.341 Pink? Purple? Green? Blue? You want to make "color" color, how do we do that? 00:03:15.341 --> 00:03:21.323 So, with one number — if we put one number here in stroke, we have a grayscale color, 00:03:21.323 --> 00:03:27.736 but if we put three numbers in, like if I put numbers like this (255, 0, 0), 00:03:27.736 --> 00:03:32.500 what we now have done is we've created an RGB color. 00:03:32.500 --> 00:03:40.409 RGB: we have a little bit of red, we have some amount of green, and we have some amount of blue. 00:03:40.409 --> 00:03:42.887 The arguments are red, green, and blue. 00:03:42.887 --> 00:03:46.388 And it has the same … it follows the same scale as grayscale. 00:03:46.388 --> 00:03:52.804 In the case of red, 255 is all the red you could imagine; 0 is no red. 00:03:52.804 --> 00:03:53.802 So it's like mixing colors. 00:03:53.802 --> 00:03:57.252 I mean, it's something you might have done, um, you know, fingerpainting, or mixing colors, 00:03:57.252 --> 00:04:00.005 and you get a little red, you get a little blue, and you put them together, 00:04:00.005 --> 00:04:02.820 and I think maybe you get purple, something like that. 00:04:02.820 --> 00:04:04.722 Um, this same principle is happening here. 00:04:04.722 --> 00:04:08.671 You're adding a variable amount of red, a variable amount of blue and mixing colors. 00:04:08.671 --> 00:04:11.970 The thing that you should realize, though, is it's not like mixing paints, 00:04:11.970 --> 00:04:16.052 that what color actually does on the computer is really like mixing light. 00:04:16.052 --> 00:04:19.935 It's more like imagining that you had three flashlights — a red flashlight, a green flashlight, 00:04:19.935 --> 00:04:24.692 and a blue flashlight — and you could turn them up or down and shine them on the same point. 00:04:24.692 --> 00: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. 00:04:30.303 --> 00:04:32.618 The stroke and the fill are still there from rectangle. 00:04:32.618 --> 00:04:38.522 Let's make the stroke red, which would be all red, (255, 0, 0), 00:04:38.522 --> 00:04:44.185 and let's make a fill that's all blue, (0, 0, 255). 00:04:44.185 --> 00:04:47.436 Let's run that, and now we see a red outline with a blue interior. 00:04:47.883 --> 00:04:52.173 You probably want lots of other colors, and it might be hard to figure out what color do I want? 00:04:52.173 --> 00: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) 00:04:57.475 --> 00:05:00.928 pops up where you could move the mouse around and you can select the color you want, 00:05:00.928 --> 00:05:05.375 and it shows you what are the red, what are the green, and what are the blue values for that color. 00:05:05.375 --> 00:05:11.251 So, you can type in your values manually or you can use the color picker to set values. 00:05:11.678 --> 00:05:16.857 We know now how to set the outline or the fill, the stroke or the fill of these shapes. 00:05:16.857 --> 00:05:20.483 But remember, there is this canvas that we're drawing into. 00:05:20.483 --> 00:05:25.043 But what if you want, actually, to fill in a color in the background? 00:05:25.043 --> 00:05:29.619 So there is one more function that we are going to learn as part of this little tutorial, 00:05:29.619 --> 00:05:31.528 which is "background ()". 00:05:31.528 --> 00:05:35.402 So, I'm going to add that now to the code editor below, background (), 00:05:35.402 --> 00:05:38.606 and I'm going to put a color in there that's a nice, soft yellow. 00:05:38.606 --> 00:05:40.901 And then now we're going to run it. 00:05:40.901 --> 00:05:42.584 We're going to see that yellow is the background. 00:05:42.584 --> 00:05:44.464 So, why don't you take a minute, actually. 00:05:44.464 --> 00:05:48.197 Try the color picker on the background, and pick a different color. 00:05:50.519 --> 00:05:52.619 You're going to have to press "run your code" when you're ready. 00:05:54.259 --> 00:05:57.571 Did the color you picked appear in the background? Hopefully it did. 00:05:57.571 --> 00:06:01.350 OK, so this really wraps up the end of this section about color. 00:06:01.350 --> 00:06:05.715 You know, what did we first do? We first learned we could put rectangles and ellipses of any size 00:06:05.715 --> 00:06:08.281 anywhere on the screen. 00:06:08.529 --> 00:06:13.531 Now we can assign any of them different strokes, different fills, and we can put a background color. 00:06:13.531 --> 00:06:16.383 I'm going to put below an example for you to start with. 00:06:16.383 --> 00:06:19.459 It's a nice design that has a bunch of shapes and a bunch of colors in it. 00:06:19.459 --> 00:06:24.352 You can use this, tweak it to make your own design, or — you'll also see when this video ends — 00:06:24.352 --> 00: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. 00:06:29.683 --> 00:06:33.183 So if you want to go find that creature or alien you made and start adding color to it, 00:06:33.183 --> 00:06:35.370 that's what you could do for this exercise. 00:06:35.370 --> 00:06:37.742 I'll talk to you later, and enjoy this exercise.