[Script Info] Title: [Events] Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text Dialogue: 0,0:00:00.94,0:00:03.28,Default,,0000,0000,0000,,Alright, we're ready to get started. Dialogue: 0,0:00:03.28,0:00:04.70,Default,,0000,0000,0000,,This is a very exciting moment, Dialogue: 0,0:00:04.70,0:00:08.80,Default,,0000,0000,0000,,'cause we're actually going to look at writing lines of code and drawing stuff to the screen. Dialogue: 0,0:00:08.80,0:00:10.80,Default,,0000,0000,0000,,So, what does it mean to write a line of code, right? Dialogue: 0,0:00:10.80,0:00:12.55,Default,,0000,0000,0000,,A line of code is an instruction. Dialogue: 0,0:00:12.55,0:00:14.61,Default,,0000,0000,0000,,What is the instruction we're going to start with? Dialogue: 0,0:00:14.61,0:00:17.65,Default,,0000,0000,0000,,The instruction we're going to start with is "draw a rectangle." Dialogue: 0,0:00:18.02,0:00:21.88,Default,,0000,0000,0000,,So let's see, what is a rectangle? I think we all know what a rectangle is, hopefully. Dialogue: 0,0:00:21.88,0:00:24.04,Default,,0000,0000,0000,,A rectangle is something that looks like this. Dialogue: 0,0:00:25.98,0:00:30.22,Default,,0000,0000,0000,,So what does it mean, then, to have an instruction that says "draw a rectangle?" Dialogue: 0,0:00:30.22,0:00:35.77,Default,,0000,0000,0000,,Well an instruction is text, and that instruction is going to look like this "rect." Dialogue: 0,0:00:36.65,0:00:38.100,Default,,0000,0000,0000,,A function is essentially that command, that instruction. Dialogue: 0,0:00:38.100,0:00:44.19,Default,,0000,0000,0000,,It's the word we use, and the function of "rect" is to draw a rectangle in the window. Dialogue: 0,0:00:44.19,0:00:47.63,Default,,0000,0000,0000,,So now, we have this function named "rect," we have this rectangle, Dialogue: 0,0:00:47.63,0:00:49.64,Default,,0000,0000,0000,,but we can't just say "draw a rectangle," Dialogue: 0,0:00:49.64,0:00:50.92,Default,,0000,0000,0000,,we've got to be more specific, right? Dialogue: 0,0:00:50.92,0:00:54.28,Default,,0000,0000,0000,,I can't just tell you to "walk." Dialogue: 0,0:00:54.28,0:00:58.13,Default,,0000,0000,0000,,I might want to tell you to walk left or walk right or walk fast or walk slow. Dialogue: 0,0:00:58.13,0:01:04.52,Default,,0000,0000,0000,,To make a rectangle with "rect," we've got to say how wide should the rectangle be, Dialogue: 0,0:01:04.52,0:01:08.67,Default,,0000,0000,0000,,how high, how tall should the rectangle be, and where should it be on the screen? Dialogue: 0,0:01:08.67,0:01:11.21,Default,,0000,0000,0000,,Let's actually start for a moment with where should it be on the screen. Dialogue: 0,0:01:11.56,0:01:13.25,Default,,0000,0000,0000,,First, what do I even mean by "screen?" Dialogue: 0,0:01:13.25,0:01:16.28,Default,,0000,0000,0000,,You've got this computer screen, I'm in your computer screen, right? Dialogue: 0,0:01:16.28,0:01:17.93,Default,,0000,0000,0000,,The screen is a rectangle. Dialogue: 0,0:01:17.93,0:01:21.56,Default,,0000,0000,0000,,We're going to be drawing into a smaller rectangle inside your computer screen; Dialogue: 0,0:01:21.56,0:01:23.09,Default,,0000,0000,0000,,we're going to call that a canvas. Dialogue: 0,0:01:23.40,0:01:29.64,Default,,0000,0000,0000,,So I'm gonna draw a nice big rectangle here, and this is going to be the canvas. Dialogue: 0,0:01:31.28,0:01:33.75,Default,,0000,0000,0000,,The canvas is a coordinate system, meaning we can say Dialogue: 0,0:01:33.75,0:01:37.01,Default,,0000,0000,0000,,"hey, this point is the point 12, 27," Dialogue: 0,0:01:37.01,0:01:40.68,Default,,0000,0000,0000,,or this point is the point 3, 102, those numbers aren't right, Dialogue: 0,0:01:40.68,0:01:46.53,Default,,0000,0000,0000,,but we're going to assign places in this canvas by their x coordinate and their y coordinate. Dialogue: 0,0:01:47.03,0:01:52.30,Default,,0000,0000,0000,,This being the x axis, and this being the y axis, right? Dialogue: 0,0:01:52.30,0:01:56.17,Default,,0000,0000,0000,,OK this is 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, Dialogue: 0,0:01:56.17,0:02:01.08,Default,,0000,0000,0000,,so this would be at pixel number 9 the way that I drew this. Dialogue: 0,0:02:01.08,0:02:02.61,Default,,0000,0000,0000,,What do I mean by pixel? Dialogue: 0,0:02:02.61,0:02:05.14,Default,,0000,0000,0000,,We have these units of measurement in life, right? Dialogue: 0,0:02:05.14,0:02:09.12,Default,,0000,0000,0000,,In the world, we have inches and centimeters and miles and kilometers, Dialogue: 0,0:02:09.12,0:02:12.35,Default,,0000,0000,0000,,well on a computer screen, our unit of measurement is a pixel. Dialogue: 0,0:02:12.35,0:02:16.35,Default,,0000,0000,0000,,Each pixel is a little tiny dot that has a color on your screen. Dialogue: 0,0:02:16.35,0:02:20.03,Default,,0000,0000,0000,,This window has a width in pixels and a height in pixels, and in fact, Dialogue: 0,0:02:20.03,0:02:24.52,Default,,0000,0000,0000,,the ones that we are gonna work with in this tutorial are going to have Dialogue: 0,0:02:24.52,0:02:29.70,Default,,0000,0000,0000,,a width of 500 and a height of 400. Dialogue: 0,0:02:29.70,0:02:33.84,Default,,0000,0000,0000,,So if you think about it, if the width is 500 and this is the middle, Dialogue: 0,0:02:33.84,0:02:37.56,Default,,0000,0000,0000,,what would the middle pixel value be? 250. Dialogue: 0,0:02:37.56,0:02:41.56,Default,,0000,0000,0000,,I didn't really draw this terribly to scale, but if this were the middle, Dialogue: 0,0:02:41.56,0:02:44.83,Default,,0000,0000,0000,,what would the middle from 0-400 be? 200. Dialogue: 0,0:02:44.83,0:02:50.05,Default,,0000,0000,0000,,And in fact, we're going to need to plug these values into our rectangle function. Dialogue: 0,0:02:50.05,0:02:53.21,Default,,0000,0000,0000,,Now I need more space to write so I'm going to start writing rectangle down here again. Dialogue: 0,0:02:53.21,0:02:56.18,Default,,0000,0000,0000,,Rectangle, and now we're going to need parentheses. Dialogue: 0,0:02:56.18,0:03:00.05,Default,,0000,0000,0000,,Parentheses, and at the end, a semicolon. Dialogue: 0,0:03:00.05,0:03:05.15,Default,,0000,0000,0000,,Every line of code, every instruction that we write is going to end with a semicolon. Dialogue: 0,0:03:05.15,0:03:07.37,Default,,0000,0000,0000,,It's going to be the function name, Dialogue: 0,0:03:07.37,0:03:12.04,Default,,0000,0000,0000,,followed by parentheses with stuff in the middle that we'll see in a second, and a semicolon. Dialogue: 0,0:03:12.04,0:03:15.19,Default,,0000,0000,0000,,What goes in the middle? Well this is that stuff. Dialogue: 0,0:03:15.19,0:03:17.02,Default,,0000,0000,0000,,This is the parameters of the rectangle. Dialogue: 0,0:03:17.02,0:03:21.15,Default,,0000,0000,0000,,It's how wide is it, how high is it, and where is it x,y. Dialogue: 0,0:03:21.15,0:03:25.12,Default,,0000,0000,0000,,So by the way, the rectangle's coordinate is the top left of the rectangle. Dialogue: 0,0:03:25.12,0:03:30.00,Default,,0000,0000,0000,,It's x,y, which is at x = 250, y = 200. Dialogue: 0,0:03:30.00,0:03:34.23,Default,,0000,0000,0000,,250, 200. Dialogue: 0,0:03:34.23,0:03:39.27,Default,,0000,0000,0000,,So we are now adding these parameters to how we define a rectangle, with an x and a y, Dialogue: 0,0:03:39.27,0:03:40.96,Default,,0000,0000,0000,,and now let's give it a width. Dialogue: 0,0:03:40.96,0:03:45.68,Default,,0000,0000,0000,,Let's say the width of this rectangle is 150 and the height of this rectangle is 100. Dialogue: 0,0:03:45.68,0:03:55.08,Default,,0000,0000,0000,,So now we have an x, we have a y, and now we also have a width and we also have a height. Dialogue: 0,0:03:55.54,0:03:57.24,Default,,0000,0000,0000,,Whoa, big moment here! Dialogue: 0,0:03:57.24,0:04:00.59,Default,,0000,0000,0000,,This is a big moment in our computer programming lives Dialogue: 0,0:04:00.59,0:04:05.75,Default,,0000,0000,0000,,if you've never done computer programming before, this is your very first line of code. Dialogue: 0,0:04:05.75,0:04:10.20,Default,,0000,0000,0000,,We now have a function name, we have the arguments to that function, Dialogue: 0,0:04:10.20,0:04:11.23,Default,,0000,0000,0000,,where is that rectangle? Dialogue: 0,0:04:11.23,0:04:14.97,Default,,0000,0000,0000,,Where is its x, where is its y, what is its width, and what is its height? Dialogue: 0,0:04:14.97,0:04:17.54,Default,,0000,0000,0000,,As soon as we write this line of code and execute it, Dialogue: 0,0:04:17.54,0:04:20.14,Default,,0000,0000,0000,,we're going to see this rectangle on the screen. Dialogue: 0,0:04:20.14,0:04:23.61,Default,,0000,0000,0000,,OK, so now something really exciting is gonna happen, hopefully. Dialogue: 0,0:04:23.61,0:04:27.19,Default,,0000,0000,0000,,I'm gonna get much smaller, I'm suddenly in the corner of the window, Dialogue: 0,0:04:27.19,0:04:29.06,Default,,0000,0000,0000,,and below me, there's a code editor. Dialogue: 0,0:04:29.06,0:04:32.08,Default,,0000,0000,0000,,What's a code editor? A code editor is a place where you can type code. Dialogue: 0,0:04:32.08,0:04:34.78,Default,,0000,0000,0000,,It's just a text box; you can type and put stuff there. Dialogue: 0,0:04:34.78,0:04:36.52,Default,,0000,0000,0000,,What are you gonna put there? This. Dialogue: 0,0:04:36.52,0:04:37.55,Default,,0000,0000,0000,,This instruction. Dialogue: 0,0:04:37.55,0:04:39.37,Default,,0000,0000,0000,,You don't have to do the typing yet, you're gonna get your chance; Dialogue: 0,0:04:39.37,0:04:42.11,Default,,0000,0000,0000,,I'm actually gonna add that line of code for you there automatically. Dialogue: 0,0:04:42.11,0:04:44.49,Default,,0000,0000,0000,,Look, that line of code is there. Does it look the same? Dialogue: 0,0:04:44.49,0:04:50.06,Default,,0000,0000,0000,,rect (250, 200, 150, 100); Dialogue: 0,0:04:50.06,0:04:51.40,Default,,0000,0000,0000,,That's the line of code. Dialogue: 0,0:04:51.40,0:04:55.89,Default,,0000,0000,0000,,So now, where are we gonna see the results of that line of code? Right over here. Dialogue: 0,0:04:55.89,0:04:58.07,Default,,0000,0000,0000,,Right over here, that canvas is going to appear. Dialogue: 0,0:04:58.07,0:04:59.84,Default,,0000,0000,0000,,How big is that canvas going to be? Dialogue: 0,0:04:59.84,0:05:04.09,Default,,0000,0000,0000,,That canvas is going to be 500 pixels wide and 400 pixels high. Dialogue: 0,0:05:04.09,0:05:07.21,Default,,0000,0000,0000,,Notice, by the way, that there's nothing in the canvas right now, Dialogue: 0,0:05:07.21,0:05:09.100,Default,,0000,0000,0000,,but I'm going to add some rulers above and below. Dialogue: 0,0:05:09.100,0:05:12.95,Default,,0000,0000,0000,,Those rulers are going to show you where the pixels are, Dialogue: 0,0:05:12.95,0:05:16.62,Default,,0000,0000,0000,,so as you're trying to figure out where to draw stuff, those rulers will be helpful hints for you. Dialogue: 0,0:05:16.62,0:05:19.58,Default,,0000,0000,0000,,You can always toggle the rulers off with the toggle rulers button. Dialogue: 0,0:05:19.58,0:05:22.05,Default,,0000,0000,0000,,See? I toggled them off. See? I toggled them on. Dialogue: 0,0:05:22.05,0:05:23.25,Default,,0000,0000,0000,,Boy this is fun! Dialogue: 0,0:05:23.25,0:05:25.76,Default,,0000,0000,0000,,OK, now, uh, whoa, what do we gotta do? Dialogue: 0,0:05:25.76,0:05:27.19,Default,,0000,0000,0000,,OK, that code below? That rectangle? Dialogue: 0,0:05:27.19,0:05:29.79,Default,,0000,0000,0000,,It's time for us to run that code. I'm going to run it for you. Dialogue: 0,0:05:29.79,0:05:33.86,Default,,0000,0000,0000,,Do you see the rectangle there? That's the instruction, now you've got the rectangle. Dialogue: 0,0:05:33.86,0:05:36.30,Default,,0000,0000,0000,,We ran our first computer program; it's very exciting, Dialogue: 0,0:05:36.30,0:05:39.24,Default,,0000,0000,0000,,and now, now it's time for you to make a change. Dialogue: 0,0:05:39.24,0:05:41.66,Default,,0000,0000,0000,,To change the code and run your first computer program. Dialogue: 0,0:05:41.66,0:05:45.25,Default,,0000,0000,0000,,So try doing something like, just make the rectangle a little bit taller. Dialogue: 0,0:05:45.25,0:05:48.77,Default,,0000,0000,0000,,Instead of a height of 100, what if you give it a height of 200? Dialogue: 0,0:05:48.77,0:05:51.48,Default,,0000,0000,0000,,Change the number from 100 to 200. Dialogue: 0,0:05:51.48,0:05:54.21,Default,,0000,0000,0000,,Did you change that number? Dialogue: 0,0:05:54.61,0:05:57.80,Default,,0000,0000,0000,,Now look, I'm gonna add a button called "run this code," Dialogue: 0,0:05:58.10,0:06:02.36,Default,,0000,0000,0000,,that button, if you press it, will execute the code that you've written. Dialogue: 0,0:06:02.36,0:06:07.10,Default,,0000,0000,0000,,Press that button. Do you see now that the rectangle is a little bit bigger? Dialogue: 0,0:06:07.34,0:06:08.68,Default,,0000,0000,0000,,Try making one more change. Dialogue: 0,0:06:08.68,0:06:11.02,Default,,0000,0000,0000,,Maybe move the rectangle to the left or right and run your code again. Dialogue: 0,0:06:15.95,0:06:17.86,Default,,0000,0000,0000,,You got it! Looks pretty good to me. Dialogue: 0,0:06:18.26,0:06:21.89,Default,,0000,0000,0000,,OK great, you know, you can always pause the video if you want more time to experiment. Dialogue: 0,0:06:21.89,0:06:25.70,Default,,0000,0000,0000,,So just pause the video, experiment, and hit play, and I'll keep talking. Dialogue: 0,0:06:25.70,0:06:28.15,Default,,0000,0000,0000,,You could also just pause the video if you wanted to stop listening to me talk; Dialogue: 0,0:06:28.15,0:06:29.61,Default,,0000,0000,0000,,that's quite OK with me. Dialogue: 0,0:06:29.61,0:06:32.32,Default,,0000,0000,0000,,OK, so this is really the fundamentals we've got here. Dialogue: 0,0:06:32.32,0:06:35.25,Default,,0000,0000,0000,,What I'm going to be asking you to do is make up your own design. Dialogue: 0,0:06:35.25,0:06:37.10,Default,,0000,0000,0000,,You can have more than one rectangle, right? Dialogue: 0,0:06:37.10,0:06:39.26,Default,,0000,0000,0000,,Below, I'm going to add 2 more rectangles. Dialogue: 0,0:06:39.26,0:06:40.89,Default,,0000,0000,0000,,Now there's 3 rectangles on the screen. Dialogue: 0,0:06:40.89,0:06:44.86,Default,,0000,0000,0000,,OK? So you can start to add them, put them in different places, but you know what? Dialogue: 0,0:06:44.86,0:06:48.49,Default,,0000,0000,0000,,You're probably going to feel quite limited to what kind of designs you can make Dialogue: 0,0:06:48.49,0:06:50.78,Default,,0000,0000,0000,,if all you could ever do is draw a rectangle, Dialogue: 0,0:06:50.78,0:06:54.75,Default,,0000,0000,0000,,so let's add one more shape to our set of shapes that we can draw. Dialogue: 0,0:06:54.75,0:06:58.32,Default,,0000,0000,0000,,The nice thing is we're just writing a new function, a new command, Dialogue: 0,0:06:58.32,0:07:00.32,Default,,0000,0000,0000,,and it's exactly the same thing as rectangle; Dialogue: 0,0:07:00.32,0:07:03.24,Default,,0000,0000,0000,,the only difference is we write the word ellipse, Dialogue: 0,0:07:04.09,0:07:09.18,Default,,0000,0000,0000,,and now we give the ellipse an x, the ellipse a y, the ellipse a width, and the ellipse a height. Dialogue: 0,0:07:09.18,0:07:12.11,Default,,0000,0000,0000,,With an ellipse, or at least a circle, when we think of a circle, Dialogue: 0,0:07:12.11,0:07:14.81,Default,,0000,0000,0000,,we think of a circle as having a diameter. Dialogue: 0,0:07:14.81,0:07:20.96,Default,,0000,0000,0000,,A diameter is the distance from one side of the circle to the other through the center. Dialogue: 0,0:07:21.71,0:07:22.87,Default,,0000,0000,0000,,So that's what a circle is. Dialogue: 0,0:07:22.87,0:07:27.10,Default,,0000,0000,0000,,But an ellipse can be something that's like a squashed circle that's very short, Dialogue: 0,0:07:27.10,0:07:32.08,Default,,0000,0000,0000,,or maybe very tall and thin, like this is an ellipse, or this is an ellipse. Dialogue: 0,0:07:32.08,0:07:36.23,Default,,0000,0000,0000,,And in these cases, we have a different height and a different width. Right? Dialogue: 0,0:07:36.58,0:07:39.88,Default,,0000,0000,0000,,The width and height, if they're equal, it's a circle, if they're different, it's an ellipse. Dialogue: 0,0:07:40.47,0:07:44.78,Default,,0000,0000,0000,,If you ever make these values equal, like if I say 200, 200, Dialogue: 0,0:07:44.78,0:07:50.21,Default,,0000,0000,0000,,and if I put this at the same location, 250, 200, we're going to get a circle. Dialogue: 0,0:07:50.52,0:07:52.65,Default,,0000,0000,0000,,Now where is that circle going to be? Dialogue: 0,0:07:52.90,0:07:57.54,Default,,0000,0000,0000,,When we drew our rectangle, we gave it an x, y location. 250, 200. Dialogue: 0,0:07:57.54,0:08:02.69,Default,,0000,0000,0000,,That's this point. This rectangle is drawn with that point being the corner of the rectangle. Dialogue: 0,0:08:02.69,0:08:08.51,Default,,0000,0000,0000,,A circle, an ellipse, is different. The x, y point we're defining is the center of that circle. Dialogue: 0,0:08:08.51,0:08:15.79,Default,,0000,0000,0000,,So here is our 200 pixel by, 200 pixel wide and 200 pixel tall circle. Dialogue: 0,0:08:15.79,0:08:19.31,Default,,0000,0000,0000,,It's right there. With the x, y at the center. Dialogue: 0,0:08:19.31,0:08:21.43,Default,,0000,0000,0000,,So our code editor now just has one rectangle. Dialogue: 0,0:08:21.43,0:08:24.30,Default,,0000,0000,0000,,It's that rectangle we drew below, and there it is in the canvas. Dialogue: 0,0:08:24.30,0:08:29.06,Default,,0000,0000,0000,,Let's add this line of code here, the ellipse. Let's put that ellipse there. Dialogue: 0,0:08:29.06,0:08:30.32,Default,,0000,0000,0000,,And I'm going to run it for you. Dialogue: 0,0:08:30.32,0:08:31.58,Default,,0000,0000,0000,,Look, there's the ellipse! Dialogue: 0,0:08:31.58,0:08:33.61,Default,,0000,0000,0000,,Now, notice something a bit strange here. Dialogue: 0,0:08:33.61,0:08:35.06,Default,,0000,0000,0000,,The ellipse is covering up the rectangle. Dialogue: 0,0:08:35.06,0:08:38.69,Default,,0000,0000,0000,,This brings up a very important point in terms of programming computer graphics. Dialogue: 0,0:08:38.69,0:08:42.44,Default,,0000,0000,0000,,The order that we write our lines of code is incredibly important, right? Dialogue: 0,0:08:42.44,0:08:46.97,Default,,0000,0000,0000,,Because if the rectangle is drawn first, the ellipse is drawn second, the ellipse is drawn on top of it. Dialogue: 0,0:08:46.97,0:08:51.50,Default,,0000,0000,0000,,Now, I'm going to swap those lines of code, I switch them, and run it again. Dialogue: 0,0:08:51.50,0:08:54.13,Default,,0000,0000,0000,,Notice now the rectangle is on top of the ellipse. Dialogue: 0,0:08:54.13,0:08:57.82,Default,,0000,0000,0000,,So how you choose to write the order of the shapes that you're drawing, Dialogue: 0,0:08:57.82,0:09:00.80,Default,,0000,0000,0000,,it's really an important point in creating your design. Dialogue: 0,0:09:00.80,0:09:04.50,Default,,0000,0000,0000,,Alright, I think we've really come to the end of this first tutorial, Dialogue: 0,0:09:04.50,0:09:07.60,Default,,0000,0000,0000,,and it's time now for you to do your first exercise. Dialogue: 0,0:09:07.60,0:09:10.82,Default,,0000,0000,0000,,I'm going to leave you with a code example that you can use to get started from. Dialogue: 0,0:09:10.82,0:09:14.65,Default,,0000,0000,0000,,So I'm filling in below a nice code example, you can see the design over here. Dialogue: 0,0:09:14.65,0:09:17.36,Default,,0000,0000,0000,,And what you should work on is try to make your own design. Dialogue: 0,0:09:17.36,0:09:20.58,Default,,0000,0000,0000,,You can make a self-portrait, or a creature or an alien. Dialogue: 0,0:09:20.58,0:09:22.87,Default,,0000,0000,0000,,Something friendly or scary, whatever you think. Dialogue: 0,0:09:22.87,0:09:23.99,Default,,0000,0000,0000,,You can design a building. Dialogue: 0,0:09:23.99,0:09:28.27,Default,,0000,0000,0000,,Any simple design that you can do with rectangles and ellipses. Dialogue: 0,0:09:28.27,0:09:32.72,Default,,0000,0000,0000,,You can use this example to build off of, or you can just erase it and start from scratch. Dialogue: 0,0:09:32.72,0:09:34.73,Default,,0000,0000,0000,,So take a little time to do this exercise. Dialogue: 0,0:09:34.73,0:09:37.89,Default,,0000,0000,0000,,When you're done, select that you're ready, and the next video will appear, Dialogue: 0,0:09:37.89,0:09:40.15,Default,,0000,0000,0000,,and we're gonna take the, in the next video, we're gonna do Dialogue: 0,0:09:40.15,0:09:42.40,Default,,0000,0000,0000,,what you're probably wondering about already, which is like, Dialogue: 0,0:09:42.40,0:09:45.88,Default,,0000,0000,0000,,"uh, can I make these red or blue or some color that I want?" Dialogue: 0,0:09:45.88,0:09:48.98,Default,,0000,0000,0000,,After you do your exercise we're going to introduce color. Dialogue: 0,0:09:48.98,0:09:54.23,Default,,0000,0000,0000,,So enjoy and I look forward to seeing you back, if you come back, for the next tutorial. Dialogue: 0,0:09:54.23,0:09:55.92,Default,,0000,0000,0000,,OK, bye bye.