0:00:00.939,0:00:03.285
Alright, we're ready to get started.

0:00:03.285,0:00:04.702
This is a very exciting moment,

0:00:04.702,0:00:08.799
'cause we're actually going to look at writing lines of code and drawing stuff to the screen.

0:00:08.799,0:00:10.799
So, what does it mean to write a line of code, right?

0:00:10.799,0:00:12.550
A line of code is an instruction.

0:00:12.550,0:00:14.612
What is the instruction we're going to start with?

0:00:14.612,0:00:17.647
The instruction we're going to start with is "draw a rectangle."

0:00:18.017,0:00:21.876
So let's see, what is a rectangle? I think we all know what a rectangle is, hopefully.

0:00:21.876,0:00:24.039
A rectangle is something that looks like this.

0:00:25.978,0:00:30.219
So what does it mean, then, to have an instruction that says "draw a rectangle?"

0:00:30.219,0:00:35.772
Well an instruction is text, and that instruction is going to look like this "rect."

0:00:36.650,0:00:38.999
A function is essentially that command, that instruction.

0:00:38.999,0:00:44.191
It's the word we use, and the function of "rect" is to draw a rectangle in the window.

0:00:44.191,0:00:47.634
So now, we have this function named "rect," we have this rectangle,

0:00:47.634,0:00:49.635
but we can't just say "draw a rectangle,"

0:00:49.635,0:00:50.915
we've got to be more specific, right?

0:00:50.915,0:00:54.276
I can't just tell you to "walk."

0:00:54.276,0:00:58.126
I might want to tell you to walk left or walk right or walk fast or walk slow.

0:00:58.126,0:01:04.525
To make a rectangle with "rect," we've got to say how wide should the rectangle be,

0:01:04.525,0:01:08.672
how high, how tall should the rectangle be, and where should it be on the screen?

0:01:08.672,0:01:11.212
Let's actually start for a moment with where should it be on the screen.

0:01:11.555,0:01:13.249
First, what do I even mean by "screen?"

0:01:13.249,0:01:16.279
You've got this computer screen, I'm in your computer screen, right?

0:01:16.279,0:01:17.931
The screen is a rectangle.

0:01:17.931,0:01:21.558
We're going to be drawing into a smaller rectangle inside your computer screen;

0:01:21.558,0:01:23.089
we're going to call that a canvas.

0:01:23.401,0:01:29.638
So I'm gonna draw a nice big rectangle here, and this is going to be the canvas.

0:01:31.281,0:01:33.754
The canvas is a coordinate system, meaning we can say

0:01:33.754,0:01:37.014
"hey, this point is the point 12, 27,"

0:01:37.014,0:01:40.676
or this point is the point 3, 102, those numbers aren't right,

0:01:40.676,0:01:46.532
but we're going to assign places in this canvas by their x coordinate and their y coordinate.

0:01:47.032,0:01:52.299
This being the x axis, and this being the y axis, right?

0:01:52.299,0:01:56.172
OK this is 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,

0:01:56.172,0:02:01.080
so this would be at pixel number 9 the way that I drew this.

0:02:01.080,0:02:02.609
What do I mean by pixel?

0:02:02.609,0:02:05.141
We have these units of measurement in life, right?

0:02:05.141,0:02:09.121
In the world, we have inches and centimeters and miles and kilometers,

0:02:09.121,0:02:12.346
well on a computer screen, our unit of measurement is a pixel.

0:02:12.346,0:02:16.348
Each pixel is a little tiny dot that has a color on your screen.

0:02:16.348,0:02:20.030
This window has a width in pixels and a height in pixels, and in fact,

0:02:20.030,0:02:24.517
the ones that we are gonna work with in this tutorial are going to have

0:02:24.517,0:02:29.701
a width of 500 and a height of 400.

0:02:29.701,0:02:33.838
So if you think about it, if the width is 500 and this is the middle,

0:02:33.838,0:02:37.562
what would the middle pixel value be? 250.

0:02:37.562,0:02:41.565
I didn't really draw this terribly to scale, but if this were the middle,

0:02:41.565,0:02:44.828
what would the middle from 0-400 be? 200.

0:02:44.828,0:02:50.050
And in fact, we're going to need to plug these values into our rectangle function.

0:02:50.050,0:02:53.210
Now I need more space to write so I'm going to start writing rectangle down here again.

0:02:53.210,0:02:56.178
Rectangle, and now we're going to need parentheses.

0:02:56.178,0:03:00.052
Parentheses, and at the end, a semicolon.

0:03:00.052,0:03:05.150
Every line of code, every instruction that we write is going to end with a semicolon.

0:03:05.150,0:03:07.370
It's going to be the function name,

0:03:07.370,0:03:12.039
followed by parentheses with stuff in the middle that we'll see in a second, and a semicolon.

0:03:12.039,0:03:15.192
What goes in the middle? Well this is that stuff.

0:03:15.192,0:03:17.018
This is the parameters of the rectangle.

0:03:17.018,0:03:21.148
It's how wide is it, how high is it, and where is it x,y.

0:03:21.148,0:03:25.125
So by the way, the rectangle's coordinate is the top left of the rectangle.

0:03:25.125,0:03:30.004
It's x,y, which is at x = 250, y = 200.

0:03:30.004,0:03:34.226
250, 200.

0:03:34.226,0:03:39.273
So we are now adding these parameters to how we define a rectangle, with an x and a y,

0:03:39.273,0:03:40.955
and now let's give it a width.

0:03:40.955,0:03:45.678
Let's say the width of this rectangle is 150 and the height of this rectangle is 100.

0:03:45.678,0:03:55.076
So now we have an x, we have a y, and now we also have a width and we also have a height.

0:03:55.540,0:03:57.237
Whoa, big moment here!

0:03:57.237,0:04:00.590
This is a big moment in our computer programming lives

0:04:00.590,0:04:05.750
if you've never done computer programming before, this is your very first line of code.

0:04:05.750,0:04:10.205
We now have a function name, we have the arguments to that function,

0:04:10.205,0:04:11.234
where is that rectangle?

0:04:11.234,0:04:14.967
Where is its x, where is its y, what is its width, and what is its height?

0:04:14.967,0:04:17.545
As soon as we write this line of code and execute it,

0:04:17.545,0:04:20.141
we're going to see this rectangle on the screen.

0:04:20.141,0:04:23.607
OK, so now something really exciting is gonna happen, hopefully.

0:04:23.607,0:04:27.189
I'm gonna get much smaller, I'm suddenly in the corner of the window,

0:04:27.189,0:04:29.064
and below me, there's a code editor.

0:04:29.064,0:04:32.083
What's a code editor? A code editor is a place where you can type code.

0:04:32.083,0:04:34.779
It's just a text box; you can type and put stuff there.

0:04:34.779,0:04:36.517
What are you gonna put there? This.

0:04:36.517,0:04:37.550
This instruction.

0:04:37.550,0:04:39.367
You don't have to do the typing yet, you're gonna get your chance;

0:04:39.367,0:04:42.113
I'm actually gonna add that line of code for you there automatically.

0:04:42.113,0:04:44.494
Look, that line of code is there. Does it look the same?

0:04:44.494,0:04:50.060
rect (250, 200, 150, 100);

0:04:50.060,0:04:51.399
That's the line of code.

0:04:51.399,0:04:55.893
So now, where are we gonna see the results of that line of code? Right over here.

0:04:55.893,0:04:58.068
Right over here, that canvas is going to appear.

0:04:58.068,0:04:59.836
How big is that canvas going to be?

0:04:59.836,0:05:04.087
That canvas is going to be 500 pixels wide and 400 pixels high.

0:05:04.087,0:05:07.207
Notice, by the way, that there's nothing in the canvas right now,

0:05:07.207,0:05:09.995
but I'm going to add some rulers above and below.

0:05:09.995,0:05:12.949
Those rulers are going to show you where the pixels are,

0:05:12.949,0:05:16.624
so as you're trying to figure out where to draw stuff, those rulers will be helpful hints for you.

0:05:16.624,0:05:19.577
You can always toggle the rulers off with the toggle rulers button.

0:05:19.577,0:05:22.053
See? I toggled them off. See? I toggled them on.

0:05:22.053,0:05:23.247
Boy this is fun!

0:05:23.247,0:05:25.758
OK, now, uh, whoa, what do we gotta do?

0:05:25.758,0:05:27.188
OK, that code below? That rectangle?

0:05:27.188,0:05:29.786
It's time for us to run that code. I'm going to run it for you.

0:05:29.786,0:05:33.856
Do you see the rectangle there? That's the instruction, now you've got the rectangle.

0:05:33.856,0:05:36.299
We ran our first computer program; it's very exciting,

0:05:36.299,0:05:39.235
and now, now it's time for you to make a change.

0:05:39.235,0:05:41.658
To change the code and run your first computer program.

0:05:41.658,0:05:45.250
So try doing something like, just make the rectangle a little bit taller.

0:05:45.250,0:05:48.769
Instead of a height of 100, what if you give it a height of 200?

0:05:48.769,0:05:51.477
Change the number from 100 to 200.

0:05:51.477,0:05:54.207
Did you change that number?

0:05:54.611,0:05:57.799
Now look, I'm gonna add a button called "run this code,"

0:05:58.096,0:06:02.363
that button, if you press it, will execute the code that you've written.

0:06:02.363,0:06:07.095
Press that button. Do you see now that the rectangle is a little bit bigger?

0:06:07.343,0:06:08.675
Try making one more change.

0:06:08.675,0:06:11.019
Maybe move the rectangle to the left or right and run your code again.

0:06:15.948,0:06:17.855
You got it! Looks pretty good to me.

0:06:18.262,0:06:21.890
OK great, you know, you can always pause the video if you want more time to experiment.

0:06:21.890,0:06:25.703
So just pause the video, experiment, and hit play, and I'll keep talking.

0:06:25.703,0:06:28.150
You could also just pause the video if you wanted to stop listening to me talk;

0:06:28.150,0:06:29.614
that's quite OK with me.

0:06:29.614,0:06:32.321
OK, so this is really the fundamentals we've got here.

0:06:32.321,0:06:35.247
What I'm going to be asking you to do is make up your own design.

0:06:35.247,0:06:37.100
You can have more than one rectangle, right?

0:06:37.100,0:06:39.258
Below, I'm going to add 2 more rectangles.

0:06:39.258,0:06:40.886
Now there's 3 rectangles on the screen.

0:06:40.886,0:06:44.858
OK? So you can start to add them, put them in different places, but you know what?

0:06:44.858,0:06:48.494
You're probably going to feel quite limited to what kind of designs you can make

0:06:48.494,0:06:50.778
if all you could ever do is draw a rectangle,

0:06:50.778,0:06:54.751
so let's add one more shape to our set of shapes that we can draw.

0:06:54.751,0:06:58.322
The nice thing is we're just writing a new function, a new command,

0:06:58.322,0:07:00.323
and it's exactly the same thing as rectangle;

0:07:00.323,0:07:03.239
the only difference is we write the word ellipse,

0:07:04.087,0:07:09.176
and now we give the ellipse an x, the ellipse a y, the ellipse a width, and the ellipse a height.

0:07:09.176,0:07:12.112
With an ellipse, or at least a circle, when we think of a circle,

0:07:12.112,0:07:14.812
we think of a circle as having a diameter.

0:07:14.812,0:07:20.965
A diameter is the distance from one side of the circle to the other through the center.

0:07:21.714,0:07:22.874
So that's what a circle is.

0:07:22.874,0:07:27.102
But an ellipse can be something that's like a squashed circle that's very short,

0:07:27.102,0:07:32.081
or maybe very tall and thin, like this is an ellipse, or this is an ellipse.

0:07:32.081,0:07:36.234
And in these cases, we have a different height and a different width. Right?

0:07:36.584,0:07:39.876
The width and height, if they're equal, it's a circle, if they're different, it's an ellipse.

0:07:40.470,0:07:44.785
If you ever make these values equal, like if I say 200, 200,

0:07:44.785,0:07:50.214
and if I put this at the same location, 250, 200, we're going to get a circle.

0:07:50.522,0:07:52.651
Now where is that circle going to be?

0:07:52.901,0:07:57.541
When we drew our rectangle, we gave it an x, y location. 250, 200.

0:07:57.541,0:08:02.694
That's this point. This rectangle is drawn with that point being the corner of the rectangle.

0:08:02.694,0:08:08.510
A circle, an ellipse, is different. The x, y point we're defining is the center of that circle.

0:08:08.510,0:08:15.788
So here is our 200 pixel by, 200 pixel wide and 200 pixel tall circle.

0:08:15.788,0:08:19.309
It's right there. With the x, y at the center.

0:08:19.309,0:08:21.429
So our code editor now just has one rectangle.

0:08:21.429,0:08:24.295
It's that rectangle we drew below, and there it is in the canvas.

0:08:24.295,0:08:29.059
Let's add this line of code here, the ellipse. Let's put that ellipse there.

0:08:29.059,0:08:30.320
And I'm going to run it for you.

0:08:30.320,0:08:31.582
Look, there's the ellipse!

0:08:31.582,0:08:33.610
Now, notice something a bit strange here.

0:08:33.610,0:08:35.063
The ellipse is covering up the rectangle.

0:08:35.063,0:08:38.688
This brings up a very important point in terms of programming computer graphics.

0:08:38.688,0:08:42.438
The order that we write our lines of code is incredibly important, right?

0:08:42.438,0:08:46.969
Because if the rectangle is drawn first, the ellipse is drawn second, the ellipse is drawn on top of it.

0:08:46.969,0:08:51.501
Now, I'm going to swap those lines of code, I switch them, and run it again.

0:08:51.501,0:08:54.128
Notice now the rectangle is on top of the ellipse.

0:08:54.128,0:08:57.823
So how you choose to write the order of the shapes that you're drawing,

0:08:57.823,0:09:00.805
it's really an important point in creating your design.

0:09:00.805,0:09:04.503
Alright, I think we've really come to the end of this first tutorial,

0:09:04.503,0:09:07.601
and it's time now for you to do your first exercise.

0:09:07.601,0:09:10.822
I'm going to leave you with a code example that you can use to get started from.

0:09:10.822,0:09:14.646
So I'm filling in below a nice code example, you can see the design over here.

0:09:14.646,0:09:17.360
And what you should work on is try to make your own design.

0:09:17.360,0:09:20.578
You can make a self-portrait, or a creature or an alien.

0:09:20.578,0:09:22.868
Something friendly or scary, whatever you think.

0:09:22.868,0:09:23.991
You can design a building.

0:09:23.991,0:09:28.266
Any simple design that you can do with rectangles and ellipses.

0:09:28.266,0:09:32.720
You can use this example to build off of, or you can just erase it and start from scratch.

0:09:32.720,0:09:34.726
So take a little time to do this exercise.

0:09:34.726,0:09:37.893
When you're done, select that you're ready, and the next video will appear,

0:09:37.893,0:09:40.150
and we're gonna take the, in the next video, we're gonna do

0:09:40.150,0:09:42.397
what you're probably wondering about already, which is like,

0:09:42.397,0:09:45.879
"uh, can I make these red or blue or some color that I want?"

0:09:45.879,0:09:48.982
After you do your exercise we're going to introduce color.

0:09:48.982,0:09:54.233
So enjoy and I look forward to seeing you back, if you come back, for the next tutorial.

0:09:54.233,0:09:55.925
OK, bye bye.