[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:00.96,0:00:03.03,Default,,0000,0000,0000,,Let's explore more\Nof this whole drawing thing. Dialogue: 0,0:00:03.03,0:00:05.27,Default,,0000,0000,0000,,What can we make besides rectangles? Dialogue: 0,0:00:05.27,0:00:07.72,Default,,0000,0000,0000,,We can make ovals using the word {\i1}ellipse{\i0}, Dialogue: 0,0:00:07.72,0:00:09.97,Default,,0000,0000,0000,,which is another command\Nthe computer knows. Dialogue: 0,0:00:09.97,0:00:12.78,Default,,0000,0000,0000,,We actually have a special\Nprogramming word for commands. Dialogue: 0,0:00:12.78,0:00:14.75,Default,,0000,0000,0000,,We're going to call them {\i1}functions{\i0}. Dialogue: 0,0:00:14.75,0:00:17.79,Default,,0000,0000,0000,,I'll be using the word {\i1}function{\i0}\Nfrom now on just to mean command. Dialogue: 0,0:00:18.51,0:00:20.84,Default,,0000,0000,0000,,We'll go ahead and write\Nthe function name {\i1}ellipse{\i0}, Dialogue: 0,0:00:20.84,0:00:22.79,Default,,0000,0000,0000,,and then {\i1}( ) {\i0} and a {\i1};{\i0} Dialogue: 0,0:00:23.00,0:00:24.00,Default,,0000,0000,0000,,It's not working! Dialogue: 0,0:00:24.00,0:00:26.14,Default,,0000,0000,0000,,We have this error message\Ntalking about parameters, Dialogue: 0,0:00:26.14,0:00:27.37,Default,,0000,0000,0000,,whatever those are. Dialogue: 0,0:00:27.37,0:00:30.33,Default,,0000,0000,0000,,Can you see what we're missing,\Nby comparing what we just wrote with {\i1}rect{\i0}? Dialogue: 0,0:00:30.92,0:00:33.29,Default,,0000,0000,0000,,When we just type {\i1}ellipse{\i0},\Nwe aren't telling it the numbers, Dialogue: 0,0:00:33.29,0:00:35.03,Default,,0000,0000,0000,,like we did for the rectangle. Dialogue: 0,0:00:35.03,0:00:37.06,Default,,0000,0000,0000,,These numbers here are called parameters. Dialogue: 0,0:00:37.55,0:00:40.50,Default,,0000,0000,0000,,We say that we pass parameters\Ninto functions, Dialogue: 0,0:00:40.50,0:00:43.00,Default,,0000,0000,0000,,and they control how the function behaves. Dialogue: 0,0:00:45.47,0:00:46.52,Default,,0000,0000,0000,,Without the parameters, Dialogue: 0,0:00:46.52,0:00:48.72,Default,,0000,0000,0000,,the program doesn't know\Nwhere you want your ellipse, Dialogue: 0,0:00:48.72,0:00:49.88,Default,,0000,0000,0000,,or how big to make it. Dialogue: 0,0:00:50.21,0:00:52.53,Default,,0000,0000,0000,,Now that error message makes\Na little more sense. Dialogue: 0,0:00:52.53,0:00:54.72,Default,,0000,0000,0000,,Let's go ahead and pass in\Nfour parameters again, Dialogue: 0,0:00:54.72,0:00:58.50,Default,,0000,0000,0000,,to control how far over,\Nhow far down, how wide, Dialogue: 0,0:00:58.50,0:01:00.56,Default,,0000,0000,0000,,and how tall we want that ellipse to be. Dialogue: 0,0:01:00.75,0:01:03.77,Default,,0000,0000,0000,,Just like before, we can have some fun\Nand move around our ellipse, Dialogue: 0,0:01:03.77,0:01:05.78,Default,,0000,0000,0000,,and even make it grow and shrink. Dialogue: 0,0:01:08.20,0:01:11.63,Default,,0000,0000,0000,,Now that we've seen the basics,\Nlet's try drawing a big ellipse Dialogue: 0,0:01:11.63,0:01:13.29,Default,,0000,0000,0000,,right in the middle of the canvas. Dialogue: 0,0:01:14.01,0:01:16.54,Default,,0000,0000,0000,,The first question you might have is,\Nwhere's the middle again? Dialogue: 0,0:01:17.50,0:01:20.30,Default,,0000,0000,0000,,Just to review,\Nwe have this upper left, 0, Dialogue: 0,0:01:20.30,0:01:25.49,Default,,0000,0000,0000,,and the right, if you remember, is 400, \Nand the bottom is 400 as well. Dialogue: 0,0:01:25.49,0:01:27.76,Default,,0000,0000,0000,,So if we think,\N"Where would the middle be?" Dialogue: 0,0:01:27.76,0:01:31.28,Default,,0000,0000,0000,,We would say, "It's gonna\Nto be half of 400 over, so 200. Dialogue: 0,0:01:31.28,0:01:33.76,Default,,0000,0000,0000,,Then half of 400 down, so 200." Dialogue: 0,0:01:33.76,0:01:35.02,Default,,0000,0000,0000,,We can go ahead and do that. Dialogue: 0,0:01:35.02,0:01:36.75,Default,,0000,0000,0000,,Let's make our {\i1}ellipse{\i0} function, Dialogue: 0,0:01:36.75,0:01:40.79,Default,,0000,0000,0000,,we'll pass the parameters in,\Nand make it pretty big. Dialogue: 0,0:01:41.47,0:01:42.81,Default,,0000,0000,0000,,There it is! Dialogue: 0,0:01:43.48,0:01:45.77,Default,,0000,0000,0000,,Just for fun, let's put\Na rectangle there too. Dialogue: 0,0:01:46.24,0:01:50.22,Default,,0000,0000,0000,,We'll say {\i1}rect(200, 200{\i0} as well,\Nand maybe a little bit smaller. {\i1}100, 100);{\i0} Dialogue: 0,0:01:50.22,0:01:53.00,Default,,0000,0000,0000,,Hm, this is kind of interesting. Dialogue: 0,0:01:53.00,0:01:54.81,Default,,0000,0000,0000,,What does this little experiment show us? Dialogue: 0,0:01:55.24,0:01:58.00,Default,,0000,0000,0000,,Well, we can see that\Nthat {\i1}200, 200{\i0} point Dialogue: 0,0:01:58.00,0:02:01.77,Default,,0000,0000,0000,,is actually saying where we should put\Nthe center of the ellipse. Dialogue: 0,0:02:01.77,0:02:04.50,Default,,0000,0000,0000,,But for rectangles it's different,\Nbecause for rectangles Dialogue: 0,0:02:04.50,0:02:08.54,Default,,0000,0000,0000,,the {\i1}200, 200{\i0} says where we should put\Nthis upper left corner of the rectangle. Dialogue: 0,0:02:09.97,0:02:13.20,Default,,0000,0000,0000,,That's really important to remember\Nwhen we're trying to position our shapes. Dialogue: 0,0:02:14.75,0:02:16.56,Default,,0000,0000,0000,,Now let's move on to simple lines. Dialogue: 0,0:02:16.82,0:02:19.28,Default,,0000,0000,0000,,That function name\Nis just going to be {\i1}line{\i0}. Dialogue: 0,0:02:19.48,0:02:21.77,Default,,0000,0000,0000,,We can pass it four parameters again, Dialogue: 0,0:02:21.77,0:02:24.98,Default,,0000,0000,0000,,but a line doesn't really have\Na size like a rectangle, does it? Dialogue: 0,0:02:25.23,0:02:27.22,Default,,0000,0000,0000,,So what will these numbers control? Dialogue: 0,0:02:28.48,0:02:31.27,Default,,0000,0000,0000,,The first and the second parameters,\Njust like before, Dialogue: 0,0:02:31.27,0:02:34.26,Default,,0000,0000,0000,,say how far over and down\Nthe line should start. Dialogue: 0,0:02:34.54,0:02:36.56,Default,,0000,0000,0000,,Whereas the second two parameters-- Dialogue: 0,0:02:36.98,0:02:40.02,Default,,0000,0000,0000,,or sorry, the second set of parameters,\Nthe {\i1}90{\i0} and the {\i1}200{\i0}-- Dialogue: 0,0:02:40.02,0:02:43.53,Default,,0000,0000,0000,,are going to specify how far over\Nand how far down the line should end. Dialogue: 0,0:02:46.52,0:02:48.24,Default,,0000,0000,0000,,Now that we understand how that works, Dialogue: 0,0:02:48.24,0:02:51.76,Default,,0000,0000,0000,,let's look at something that's going\Nto seem really weird at first. Dialogue: 0,0:02:52.50,0:02:56.76,Default,,0000,0000,0000,,What happens if I make the rectangle start\Nin that upper left corner, Dialogue: 0,0:02:56.76,0:03:00.28,Default,,0000,0000,0000,,again specifying that upper left corner\Nof the rectangle as well? Dialogue: 0,0:03:00.53,0:03:02.28,Default,,0000,0000,0000,,And then really big. Dialogue: 0,0:03:03.99,0:03:07.02,Default,,0000,0000,0000,,We can even make it that big,\Nbut that's a little bit too big, I think. Dialogue: 0,0:03:07.78,0:03:11.76,Default,,0000,0000,0000,,We see that it's gradually starting\Nto make that ellipse disappear. Dialogue: 0,0:03:11.91,0:03:13.78,Default,,0000,0000,0000,,We can actually make it\Ndisappear completely. Dialogue: 0,0:03:14.76,0:03:16.54,Default,,0000,0000,0000,,Now we're wondering where it went. Dialogue: 0,0:03:17.77,0:03:21.50,Default,,0000,0000,0000,,What the program does is it actually\Ndraws your shapes in order. Dialogue: 0,0:03:21.50,0:03:24.70,Default,,0000,0000,0000,,First it draws that ellipse,\Nthen it draws that rectangle on top, Dialogue: 0,0:03:24.70,0:03:26.50,Default,,0000,0000,0000,,and then it draws the line. Dialogue: 0,0:03:26.50,0:03:29.76,Default,,0000,0000,0000,,So that ellipse is still there,\Nit's just, as you saw, underneath. Dialogue: 0,0:03:30.77,0:03:32.50,Default,,0000,0000,0000,,This is an important point to remember Dialogue: 0,0:03:32.50,0:03:35.81,Default,,0000,0000,0000,,because what would happen\Nif we drew our line first? Dialogue: 0,0:03:36.50,0:03:38.52,Default,,0000,0000,0000,,We just wouldn't see it at all, would we? Dialogue: 0,0:03:38.52,0:03:41.73,Default,,0000,0000,0000,,You might do that in your programs\Nand wonder, "Hey, where did my line go?" Dialogue: 0,0:03:41.74,0:03:45.02,Default,,0000,0000,0000,,The idea is that it is there,\Nit's just being hidden right now Dialogue: 0,0:03:45.02,0:03:48.05,Default,,0000,0000,0000,,both by the ellipse\Nand also by that rectangle. Dialogue: 0,0:03:50.25,0:03:53.50,Default,,0000,0000,0000,,We can affect which shapes\Nare drawn on top of which other shapes Dialogue: 0,0:03:53.50,0:03:56.56,Default,,0000,0000,0000,,just by changing the order\Nthat we write them in our program. Dialogue: 0,0:03:58.59,0:04:01.03,Default,,0000,0000,0000,,Now, I just want to introduce\Na couple of technical terms Dialogue: 0,0:04:01.03,0:04:02.28,Default,,0000,0000,0000,,before we finish. Dialogue: 0,0:04:02.77,0:04:04.51,Default,,0000,0000,0000,,Just like you might have learned in math, Dialogue: 0,0:04:04.51,0:04:07.49,Default,,0000,0000,0000,,we can use the letter {\i1}x{\i0}\Nto mean how far over Dialogue: 0,0:04:07.49,0:04:09.22,Default,,0000,0000,0000,,like we've been talking about, Dialogue: 0,0:04:09.22,0:04:11.53,Default,,0000,0000,0000,,and the letter {\i1}y{\i0} to mean how far down. Dialogue: 0,0:04:11.53,0:04:14.00,Default,,0000,0000,0000,,That might seem a little bit weird\Nif you're not used to it, Dialogue: 0,0:04:14.00,0:04:17.23,Default,,0000,0000,0000,,but it's easier to say than\N"how far over and how far down" Dialogue: 0,0:04:17.23,0:04:18.54,Default,,0000,0000,0000,,every single time. Dialogue: 0,0:04:19.49,0:04:22.22,Default,,0000,0000,0000,,The first two parameters\Nto our ellipse, for example, Dialogue: 0,0:04:22.22,0:04:27.53,Default,,0000,0000,0000,,are saying that {\i1}x{\i0} should be at 200\Nand {\i1}y{\i0} should be at 229. Dialogue: 0,0:04:28.97,0:04:30.25,Default,,0000,0000,0000,,There you have it, Dialogue: 0,0:04:30.25,0:04:33.04,Default,,0000,0000,0000,,just the same thing as saying\N"how far over and how far down". Dialogue: 0,0:04:33.98,0:04:36.03,Default,,0000,0000,0000,,A second really good question\Nyou might have is, Dialogue: 0,0:04:36.03,0:04:38.56,Default,,0000,0000,0000,,"What units have we been using\Nthis whole time? Dialogue: 0,0:04:38.79,0:04:42.76,Default,,0000,0000,0000,,Are we saying 200 centimeters,\N200 inches, 200 miles?" Dialogue: 0,0:04:42.76,0:04:44.81,Default,,0000,0000,0000,,We're using units called 'pixels', Dialogue: 0,0:04:45.26,0:04:47.79,Default,,0000,0000,0000,,and a pixel is a tiny little point\Non your screen. Dialogue: 0,0:04:48.48,0:04:51.96,Default,,0000,0000,0000,,This canvas actually happens\Nto be 400 pixels wide. Dialogue: 0,0:04:52.29,0:04:56.50,Default,,0000,0000,0000,,That's why we always say\Nthat this upper left corner is 0, Dialogue: 0,0:04:56.50,0:05:00.59,Default,,0000,0000,0000,,and over here is 400,\Nbecause it's 400 pixels. Dialogue: 0,0:05:01.51,0:05:04.78,Default,,0000,0000,0000,,Similarly, when we say 200,\Nwe actually mean 200 pixels, Dialogue: 0,0:05:04.78,0:05:06.54,Default,,0000,0000,0000,,and you probably get the idea. Dialogue: 0,0:05:07.18,0:05:08.30,Default,,0000,0000,0000,,Fantastic! Dialogue: 0,0:05:08.30,0:05:10.79,Default,,0000,0000,0000,,Now you know all about the functions\N{\i1}line{\i0}, {\i1}ellipse{\i0}, and {\i1}rect{\i0}, Dialogue: 0,0:05:10.79,0:05:12.00,Default,,0000,0000,0000,,and their parameters. Dialogue: 0,0:05:12.25,0:05:14.79,Default,,0000,0000,0000,,We covered a lot, but just stick with it,\Nkeep exploring, Dialogue: 0,0:05:14.79,0:05:16.42,Default,,0000,0000,0000,,and you'll get the hang of it soon.