[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.08,0:00:05.57,Default,,0000,0000,0000,,Hi! Welcome back! You came back, which I'm very thankful for — thank you very much.
Dialogue: 0,0:00:05.57,0:00:09.60,Default,,0000,0000,0000,,So, hopefully you enjoyed the last exercise you did, and your code is still sitting down there.
Dialogue: 0,0:00:09.60,0:00:13.63,Default,,0000,0000,0000,,Now, by the way, during this section of the tutorial, I am going to start doing stuff,
Dialogue: 0,0:00:13.81,0:00:15.89,Default,,0000,0000,0000,,and the code that you wrote is going to disappear.
Dialogue: 0,0:00:15.89,0:00:18.33,Default,,0000,0000,0000,,But don't worry; there's going to be an option for you to restore it again later.
Dialogue: 0,0:00:18.66,0:00:23.13,Default,,0000,0000,0000,,OK, so what are we missing? We've got shapes: we've got circles, we've got rectangles.
Dialogue: 0,0:00:23.46,0:00:26.71,Default,,0000,0000,0000,,But obviously we're missing something really important in terms of art and design.
Dialogue: 0,0:00:26.71,0:00:27.72,Default,,0000,0000,0000,,We're missing color.
Dialogue: 0,0:00:28.15,0:00:30.47,Default,,0000,0000,0000,,So let's think about that rectangle again.
Dialogue: 0,0:00:30.47,0:00:32.00,Default,,0000,0000,0000,,We have this rectangle.
Dialogue: 0,0:00:34.27,0:00:35.40,Default,,0000,0000,0000,,We have this circle.
Dialogue: 0,0:00:35.62,0:00:42.51,Default,,0000,0000,0000,,What do these shapes have? They have both an outline, which is tracing this rectangle,
Dialogue: 0,0:00:42.51,0:00:48.79,Default,,0000,0000,0000,,which we're going to call — sorry — the "stroke." We also have the interior of the shape,
Dialogue: 0,0:00:48.79,0:00:51.75,Default,,0000,0000,0000,,the interior of the shape which we're going to call the "fill."
Dialogue: 0,0:00:52.42,0:00:55.75,Default,,0000,0000,0000,,So we have two colors that we have to set for every shape.
Dialogue: 0,0:00:55.75,0:00:59.78,Default,,0000,0000,0000,,We have the stroke, which is the outline, and we have the fill, which is the interior.
Dialogue: 0,0:01:00.15,0:01:03.48,Default,,0000,0000,0000,,And just like we learnd these function calls, these commands —
Dialogue: 0,0:01:03.48,0:01:08.53,Default,,0000,0000,0000,,"rect" for rectangle, "ellipse" for ellipse — we're going to have functions for stroke and fill.
Dialogue: 0,0:01:08.53,0:01:10.22,Default,,0000,0000,0000,,So it's going to look like this.
Dialogue: 0,0:01:10.22,0:01:15.81,Default,,0000,0000,0000,,Let's say we're drawing a rectangle, and that rectangle is being drawn at some location.
Dialogue: 0,0:01:15.81,0:01:18.86,Default,,0000,0000,0000,,Uh, I think this is something we had previously.
Dialogue: 0,0:01:18.86,0:01:30.26,Default,,0000,0000,0000,,What we need to do now, before we say "rectangle" is we need to say "stroke" and we need to say "fill."
Dialogue: 0,0:01:33.04,0:01:35.79,Default,,0000,0000,0000,,Every single time that we draw a shape, if we want to color it,
Dialogue: 0,0:01:35.79,0:01:39.19,Default,,0000,0000,0000,,we need to set the stroke and fill before we call that shape function.
Dialogue: 0,0:01:39.57,0:01:41.94,Default,,0000,0000,0000,,This is, again, a moment when order of operations matter.
Dialogue: 0,0:01:41.94,0:01:45.89,Default,,0000,0000,0000,,We don't say, "draw a rectangle — hey it's blue, and it's red on the outside."
Dialogue: 0,0:01:45.89,0:01:48.44,Default,,0000,0000,0000,,We say, "set a pen color..." (in a way it's like a pen)....
Dialogue: 0,0:01:48.44,0:01:52.22,Default,,0000,0000,0000,,"Go and find my red pen and go and find my blue marker.
Dialogue: 0,0:01:52.55,0:01:56.72,Default,,0000,0000,0000,,You use the red pen for the outside and the blue marker for the inside" when I draw that rectangle.
Dialogue: 0,0:01:56.72,0:02:00.90,Default,,0000,0000,0000,,But there's a big question here, right? We know that when we draw a rectangle we give it an x, a y,
Dialogue: 0,0:02:00.90,0:02:04.94,Default,,0000,0000,0000,,a width, and height: those are the values that define what it is to be a rectangle.
Dialogue: 0,0:02:05.72,0:02:09.89,Default,,0000,0000,0000,,What values do we give a stroke or a fill? How do we tie numbers to color?
Dialogue: 0,0:02:09.89,0:02:14.83,Default,,0000,0000,0000,,Let's say we have the number 0, and we say the number 0 means black.
Dialogue: 0,0:02:15.58,0:02:21.66,Default,,0000,0000,0000,,And let's say we have the number 255, and the number 255 means white.
Dialogue: 0,0:02:22.50,0:02:26.05,Default,,0000,0000,0000,,So any value in between, any value in between is some gray.
Dialogue: 0,0:02:26.55,0:02:30.54,Default,,0000,0000,0000,,127 would be, like, half the way between white and black.
Dialogue: 0,0:02:30.54,0:02:34.40,Default,,0000,0000,0000,,253 would be really white, but not all the way white.
Dialogue: 0,0:02:34.40,0:02:37.93,Default,,0000,0000,0000,,Right? So can really imagine this and obviously just trying out these numbers would make much more sense.
Dialogue: 0,0:02:37.93,0:02:44.05,Default,,0000,0000,0000,,So we could say something like "stroke (0)" and we would have a black outline.
Dialogue: 0,0:02:44.05,0:02:45.94,Default,,0000,0000,0000,,Let's actually bring up the code editor below,
Dialogue: 0,0:02:45.94,0:02:51.98,Default,,0000,0000,0000,,and let's add a stroke (0) and a fill for one of our shapes down there, for the rectangle below.
Dialogue: 0,0:02:51.98,0:02:59.57,Default,,0000,0000,0000,,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.
Dialogue: 0,0:02:59.93,0:03:00.60,Default,,0000,0000,0000,,Great.
Dialogue: 0,0:03:00.60,0:03:04.35,Default,,0000,0000,0000,,So, I want to move on quickly though, however, to … even though this is nice,
Dialogue: 0,0:03:04.35,0:03:07.70,Default,,0000,0000,0000,,and we can see that we can do grayscale colors, really,
Dialogue: 0,0:03:07.70,0:03:10.80,Default,,0000,0000,0000,,what you probably want to do is make all sorts of … you know, what's your favorite color?
Dialogue: 0,0:03:10.80,0:03:15.34,Default,,0000,0000,0000,,Pink? Purple? Green? Blue? You want to make "color" color, how do we do that?
Dialogue: 0,0:03:15.34,0:03:21.32,Default,,0000,0000,0000,,So, with one number — if we put one number here in stroke, we have a grayscale color,
Dialogue: 0,0:03:21.32,0:03:27.74,Default,,0000,0000,0000,,but if we put three numbers in, like if I put numbers like this (255, 0, 0),
Dialogue: 0,0:03:27.74,0:03:32.50,Default,,0000,0000,0000,,what we now have done is we've created an RGB color.
Dialogue: 0,0:03:32.50,0:03:40.41,Default,,0000,0000,0000,,RGB: we have a little bit of red, we have some amount of green, and we have some amount of blue.
Dialogue: 0,0:03:40.41,0:03:42.89,Default,,0000,0000,0000,,The arguments are red, green, and blue.
Dialogue: 0,0:03:42.89,0:03:46.39,Default,,0000,0000,0000,,And it has the same … it follows the same scale as grayscale.
Dialogue: 0,0:03:46.39,0:03:52.80,Default,,0000,0000,0000,,In the case of red, 255 is all the red you could imagine; 0 is no red.
Dialogue: 0,0:03:52.80,0:03:53.80,Default,,0000,0000,0000,,So it's like mixing colors.
Dialogue: 0,0:03:53.80,0:03:57.25,Default,,0000,0000,0000,,I mean, it's something you might have done, um, you know, fingerpainting, or mixing colors,
Dialogue: 0,0:03:57.25,0:04:00.00,Default,,0000,0000,0000,,and you get a little red, you get a little blue, and you put them together,
Dialogue: 0,0:04:00.00,0:04:02.82,Default,,0000,0000,0000,,and I think maybe you get purple, something like that.
Dialogue: 0,0:04:02.82,0:04:04.72,Default,,0000,0000,0000,,Um, this same principle is happening here.
Dialogue: 0,0:04:04.72,0:04:08.67,Default,,0000,0000,0000,,You're adding a variable amount of red, a variable amount of blue and mixing colors.
Dialogue: 0,0:04:08.67,0:04:11.97,Default,,0000,0000,0000,,The thing that you should realize, though, is it's not like mixing paints,
Dialogue: 0,0:04:11.97,0:04:16.05,Default,,0000,0000,0000,,that what color actually does on the computer is really like mixing light.
Dialogue: 0,0:04:16.05,0:04:19.94,Default,,0000,0000,0000,,It's more like imagining that you had three flashlights — a red flashlight, a green flashlight,
Dialogue: 0,0:04:19.94,0:04:24.69,Default,,0000,0000,0000,,and a blue flashlight — and you could turn them up or down and shine them on the same point.
Dialogue: 0,0:04:24.69,0:04:29.91,Default,,0000,0000,0000,,So let's switch over again and open up the code editor below, and let's add a stroke and a fill.
Dialogue: 0,0:04:30.30,0:04:32.62,Default,,0000,0000,0000,,The stroke and the fill are still there from rectangle.
Dialogue: 0,0:04:32.62,0:04:38.52,Default,,0000,0000,0000,,Let's make the stroke red, which would be all red, (255, 0, 0),
Dialogue: 0,0:04:38.52,0:04:44.18,Default,,0000,0000,0000,,and let's make a fill that's all blue, (0, 0, 255).
Dialogue: 0,0:04:44.18,0:04:47.44,Default,,0000,0000,0000,,Let's run that, and now we see a red outline with a blue interior.
Dialogue: 0,0:04:47.88,0:04:52.17,Default,,0000,0000,0000,,You probably want lots of other colors, and it might be hard to figure out what color do I want?
Dialogue: 0,0:04:52.17,0:04:57.48,Default,,0000,0000,0000,,Well, if you notice, if you click on fill, and I'm going to do this for you, a wheel (a color picker)
Dialogue: 0,0:04:57.48,0:05:00.93,Default,,0000,0000,0000,,pops up where you could move the mouse around and you can select the color you want,
Dialogue: 0,0:05:00.93,0:05:05.38,Default,,0000,0000,0000,,and it shows you what are the red, what are the green, and what are the blue values for that color.
Dialogue: 0,0:05:05.38,0:05:11.25,Default,,0000,0000,0000,,So, you can type in your values manually or you can use the color picker to set values.
Dialogue: 0,0:05:11.68,0:05:16.86,Default,,0000,0000,0000,,We know now how to set the outline or the fill, the stroke or the fill of these shapes.
Dialogue: 0,0:05:16.86,0:05:20.48,Default,,0000,0000,0000,,But remember, there is this canvas that we're drawing into.
Dialogue: 0,0:05:20.48,0:05:25.04,Default,,0000,0000,0000,,But what if you want, actually, to fill in a color in the background?
Dialogue: 0,0:05:25.04,0:05:29.62,Default,,0000,0000,0000,,So there is one more function that we are going to learn as part of this little tutorial,
Dialogue: 0,0:05:29.62,0:05:31.53,Default,,0000,0000,0000,,which is "background ()".
Dialogue: 0,0:05:31.53,0:05:35.40,Default,,0000,0000,0000,,So, I'm going to add that now to the code editor below, background (),
Dialogue: 0,0:05:35.40,0:05:38.61,Default,,0000,0000,0000,,and I'm going to put a color in there that's a nice, soft yellow.
Dialogue: 0,0:05:38.61,0:05:40.90,Default,,0000,0000,0000,,And then now we're going to run it.
Dialogue: 0,0:05:40.90,0:05:42.58,Default,,0000,0000,0000,,We're going to see that yellow is the background.
Dialogue: 0,0:05:42.58,0:05:44.46,Default,,0000,0000,0000,,So, why don't you take a minute, actually.
Dialogue: 0,0:05:44.46,0:05:48.20,Default,,0000,0000,0000,,Try the color picker on the background, and pick a different color.
Dialogue: 0,0:05:50.52,0:05:52.62,Default,,0000,0000,0000,,You're going to have to press "run your code" when you're ready.
Dialogue: 0,0:05:54.26,0:05:57.57,Default,,0000,0000,0000,,Did the color you picked appear in the background? Hopefully it did.
Dialogue: 0,0:05:57.57,0:06:01.35,Default,,0000,0000,0000,,OK, so this really wraps up the end of this section about color.
Dialogue: 0,0:06:01.35,0:06:05.72,Default,,0000,0000,0000,,You know, what did we first do? We first learned we could put rectangles and ellipses of any size
Dialogue: 0,0:06:05.72,0:06:08.28,Default,,0000,0000,0000,,anywhere on the screen.
Dialogue: 0,0:06:08.53,0:06:13.53,Default,,0000,0000,0000,,Now we can assign any of them different strokes, different fills, and we can put a background color.
Dialogue: 0,0:06:13.53,0:06:16.38,Default,,0000,0000,0000,,I'm going to put below an example for you to start with.
Dialogue: 0,0:06:16.38,0:06:19.46,Default,,0000,0000,0000,,It's a nice design that has a bunch of shapes and a bunch of colors in it.
Dialogue: 0,0:06:19.46,0:06:24.35,Default,,0000,0000,0000,,You can use this, tweak it to make your own design, or — you'll also see when this video ends —
Dialogue: 0,0:06:24.35,0:06:29.68,Default,,0000,0000,0000,,there will be an option for you to revert back to your previous code that you had at the end of lesson 1.
Dialogue: 0,0:06:29.68,0:06:33.18,Default,,0000,0000,0000,,So if you want to go find that creature or alien you made and start adding color to it,
Dialogue: 0,0:06:33.18,0:06:35.37,Default,,0000,0000,0000,,that's what you could do for this exercise.
Dialogue: 0,0:06:35.37,0:06:37.74,Default,,0000,0000,0000,,I'll talk to you later, and enjoy this exercise.