0:00:01.220,0:00:02.817
Let's start programming.
0:00:02.817,0:00:05.245
We need to begin[br]with understanding shapes, the basics.
0:00:05.245,0:00:06.464
But don't worry, soon enough,
0:00:06.464,0:00:08.246
your shapes will be[br]flying around the screen,
0:00:08.246,0:00:11.098
and changing colors, and all kinds[br]of other cool programming things.
0:00:11.098,0:00:12.772
Just stay with us!
0:00:12.772,0:00:14.636
So let's start with drawing rectangles.
0:00:14.636,0:00:16.516
We type rect for rectangle,
0:00:16.516,0:00:18.990
then (, and then four numbers[br]10, 20, 100, 200--
0:00:18.990,0:00:21.024
and I'll explain what these mean[br]in a moment--
0:00:21.024,0:00:23.938
then ), and at the end,[br]we'll just put a ;
0:00:23.938,0:00:25.515
Look, amazing, a rectangle!
0:00:25.515,0:00:27.563
And that was so neat,[br]so let's do that again.
0:00:27.763,0:00:29.551
We can try different numbers this time.
0:00:30.021,0:00:31.531
Maybe bigger numbers,[br](300, 240
0:00:32.181,0:00:34.031
and then smaller numbers at the end,[br]10, 20)
0:00:34.031,0:00:36.041
and hey look, another rectangle!
0:00:36.041,0:00:39.256
In fact, if we try changing[br]this first number to make it smaller,
0:00:39.256,0:00:40.571
it'll start moving.
0:00:40.751,0:00:43.782
If we change this last number[br]to make it bigger and then smaller,
0:00:43.782,0:00:46.276
then it's just going to grow [br]and then shrink.
0:00:46.276,0:00:47.510
Interesting!
0:00:47.510,0:00:50.545
So, how is all this magic happening,[br]you might wonder?
0:00:51.245,0:00:52.756
Well, remember that your computer
0:00:52.756,0:00:55.507
is just like a really intelligent[br]and obedient dog.
0:00:55.507,0:00:59.778
With a dog, maybe we could tell it[br]to sit, stay, even roll over.
0:00:59.778,0:01:01.503
You would just have to give the command.
0:01:02.023,0:01:05.282
So in code, how would you tell[br]your computer dog to sit?
0:01:05.742,0:01:08.024
Well, the way you would do that
0:01:08.024,0:01:11.255
is you would write[br]the command name, say sit,
0:01:11.255,0:01:13.271
and then you would put[br]( ) afterwards
0:01:13.271,0:01:15.267
to tell it to go do that command[br]you just said,
0:01:15.267,0:01:17.764
and then you put a ; [br]at the end just to say,
0:01:17.764,0:01:19.521
"Yeah, this command is over."
0:01:19.521,0:01:21.829
Then your computer dog would sit down.
0:01:22.219,0:01:25.264
Well of course, your computer[br]on Khan Academy isn't a dog,
0:01:25.264,0:01:27.254
so it doesn't know how[br]to sit or roll over,
0:01:27.254,0:01:30.261
but it does know how to draw rectangles[br]when you tell it rect,
0:01:30.261,0:01:32.058
and that's kind of neat too, right?
0:01:32.298,0:01:34.344
So, that's what [br]we're going to do on this line.
0:01:34.344,0:01:37.161
We'll say the command rect,[br]which is just the name,
0:01:37.161,0:01:39.754
and then we'll put the ( and the )
0:01:39.754,0:01:41.017
to say "go do that",
0:01:41.017,0:01:43.041
and then we'll put the ; at the end.
0:01:43.501,0:01:46.566
That's how your computer knows[br]to go do this special ability, rect.
0:01:47.216,0:01:49.737
Okay, so now let's go back to our rect.
0:01:49.737,0:01:53.502
We have the command name right here[br]and we have those parentheses.
0:01:53.502,0:01:55.770
But what about all these crazy numbers?
0:01:56.250,0:01:59.503
Well, the idea is that the computer[br]really doesn't know enough
0:01:59.503,0:02:01.056
if you just tell it rect.
0:02:01.986,0:02:05.249
To see this, imagine if I gave you[br]a piece of paper,
0:02:05.249,0:02:07.254
and I said I wanted you[br]to draw a rectangle
0:02:07.254,0:02:09.329
exactly the way I wanted it to be.
0:02:09.989,0:02:11.233
Unless you can read my mind,
0:02:11.233,0:02:13.287
you're going to have[br]some questions right away.
0:02:14.507,0:02:15.756
First, you might wonder,
0:02:15.756,0:02:19.075
"Where do you want me[br]to draw the rectangle?"
0:02:19.255,0:02:21.278
And then, what I would say is,
0:02:21.278,0:02:22.527
"How about we just agree
0:02:22.527,0:02:25.796
that this left side of the paper[br]that I just gave you,
0:02:25.796,0:02:27.046
let's just call that zero.
0:02:27.046,0:02:29.815
And let's just agree that this right side[br]is going to be 400."
0:02:30.035,0:02:33.011
Then I could give you a number, [br]say like 100,
0:02:33.011,0:02:36.235
and you would know that that's[br]going to be right about there, maybe,
0:02:36.235,0:02:37.309
roughly.
0:02:37.309,0:02:39.967
Except that will satisfy you for a moment,[br]but then you'd think,
0:02:39.967,0:02:43.165
"Okay, that tells me how far across,[br]but how about how far up and down?"
0:02:43.515,0:02:47.010
Then I could give you another number,[br]let's say maybe 200,
0:02:47.010,0:02:49.750
and I would say,[br]"This is the top, this is 0,
0:02:49.750,0:02:52.646
and again we'll just say that the bottom,[br]that's going to be 400."
0:02:52.646,0:02:53.744
And you would think,
0:02:53.744,0:02:56.802
"200, that's going to be[br]right in the middle here."
0:02:57.402,0:02:59.758
And that's perfect,[br]because now you think, and you say,
0:02:59.758,0:03:02.504
"Okay great, I'm going to draw[br]your rectangle right here
0:03:02.504,0:03:05.580
because it's 100 across, [br]and it's 200 down."
0:03:06.490,0:03:09.056
Except that's still not enough,[br]because now what are you asking?
0:03:09.496,0:03:12.268
Right, you're wondering,[br]"How big do you want the rectangle?"
0:03:12.268,0:03:17.008
And I would say, [br]"How about like, 150 wide?"
0:03:17.008,0:03:20.969
And you'd think, [br]"Well, this is 100, and this is 400,
0:03:20.969,0:03:25.310
so if we want it to be 150 wide,[br]maybe we're gonna go to here?"
0:03:25.530,0:03:28.821
And you think,[br]"Okay, cool, 150 wide, about."
0:03:29.341,0:03:31.238
Then you'd say,[br]"How tall do you want it?"
0:03:31.238,0:03:33.468
I would say, "Not very tall. [br]How about 50 tall?"
0:03:33.718,0:03:37.296
You'll say, "Okay, well 50,[br]maybe that's going to be about that tall?"
0:03:37.506,0:03:39.019
Then you would say, "Awesome!
0:03:39.019,0:03:40.812
I know exactly where you want[br]your rectangle,
0:03:40.812,0:03:42.492
exactly what it should look like.
0:03:42.492,0:03:44.082
I'll go ahead and draw it."
0:03:45.232,0:03:47.562
That's a lot of work[br]for a rectangle, isn't it?
0:03:47.982,0:03:50.265
But the idea is just by giving you[br]those four numbers--
0:03:50.265,0:03:53.547
remember we said 100 across, 200 down,
0:03:54.457,0:03:57.532
150 wide, and then just 50 tall--
0:03:57.822,0:03:59.755
we now are exactly on the same page
0:03:59.755,0:04:01.548
about what this rectangle[br]should look like.
0:04:02.008,0:04:04.252
That's how the computer works too.
0:04:04.252,0:04:06.755
You can just write the command name[br]like we said earlier,
0:04:06.755,0:04:09.744
write the ( and then[br]add in these four numbers,
0:04:09.744,0:04:14.020
100, 200, 150, and then 50,
0:04:14.020,0:04:16.006
) and then a ;
0:04:16.226,0:04:19.303
And it will draw a rectangle[br]exactly where we wanted it to be.
0:04:20.623,0:04:22.263
I guess if we're honest with ourselves,
0:04:22.263,0:04:24.223
that's not really where[br]we wanted the rectangle.
0:04:24.223,0:04:25.583
It's not where we drew it, right?
0:04:25.763,0:04:27.488
So our numbers are a little bit off.
0:04:27.488,0:04:31.273
Let's go ahead and say we want it[br]to really match exactly what we drew.
0:04:31.273,0:04:33.780
We'll move this[br]so it's a little bit further over,
0:04:34.220,0:04:37.254
a little bit less up and down,
0:04:37.714,0:04:42.008
a little bit skinnier,[br]and maybe a tiny bit less tall.
0:04:42.758,0:04:46.024
Now we have it that our rectangle[br]pretty much exactly matches what we drew,
0:04:46.024,0:04:48.771
because we understood[br]what each of these numbers meant,
0:04:48.771,0:04:51.828
and we could change it[br]so it looks like we want it to.
0:04:52.748,0:04:54.767
Now let's think about drawing[br]another rectangle.
0:04:54.767,0:04:56.472
Because the beauty of this is,
0:04:56.472,0:04:58.757
we can draw rectangles[br]wherever we want now.
0:04:59.817,0:05:02.157
How about we draw it[br]all the way in this upper corner,
0:05:02.157,0:05:03.387
all the way up there?
0:05:03.987,0:05:05.558
Let's think of where that would be.
0:05:06.018,0:05:09.502
I guess that would be like 0 across,[br]0 up and down,
0:05:09.502,0:05:13.255
and maybe pretty small,[br]let's say just 50 wide
0:05:13.255,0:05:16.268
and maybe just 10 tall,[br]like a pretty small rectangle.
0:05:16.998,0:05:18.266
We can go ahead and do that.
0:05:18.266,0:05:19.276
We'll type rect,
0:05:19.276,0:05:21.546
and then separating[br]these parameters with , , ,
0:05:22.756,0:05:25.518
we'll go ahead and say,[br]"Alright, cool".
0:05:25.748,0:05:28.551
Well, not so cool because we have[br]this error message that's saying,
0:05:28.551,0:05:31.392
"Oh no![br]It looks like you're missing a )"
0:05:31.392,0:05:32.748
And we say, "Oh yeah, we are."
0:05:32.748,0:05:34.828
So phew, we'll put it back in.[br]It looks great, right?
0:05:34.828,0:05:36.998
Well, not so great because now[br]we have another message
0:05:36.998,0:05:38.447
saying we have a missing semicolon.
0:05:38.447,0:05:40.866
This one is also correct;[br]we could just press "Show Me Where"
0:05:40.866,0:05:42.616
and it would point[br]to the line we just wrote.
0:05:42.616,0:05:43.535
And we just remember,
0:05:43.535,0:05:46.284
"Oh yeah, semicolons are like periods[br]at the ends of the sentences
0:05:46.284,0:05:48.523
to end our lines, and we forgot one!"
0:05:48.523,0:05:52.024
But we can just put it back, no big deal,[br]and everything is good again.
0:05:52.254,0:05:55.295
Check it out, a tiny little rectangle, [br]exactly like we wanted.
0:05:55.745,0:05:58.498
Just like before, we can grow it[br]so that it's bigger,
0:05:58.718,0:06:00.230
we can move it around,
0:06:00.510,0:06:03.262
and we can position it[br]exactly where we want it to be.
0:06:03.262,0:06:06.265
So now you know in detail[br]exactly how this rect thing works.
0:06:06.505,0:06:08.706
We covered what these numbers mean,
0:06:08.706,0:06:12.040
and how you always need to put[br]the command name, the parentheses,
0:06:12.040,0:06:14.964
have a comma separate the numbers,[br]and put the semicolon at the end.
0:06:15.484,0:06:16.482
It seems like a lot,
0:06:16.482,0:06:19.170
but you can go ahead and try it[br]for yourself and get a feel for it.
0:06:19.260,0:06:21.499
Next time, we'll learn about[br]making more shapes,
0:06:21.499,0:06:23.261
and then we'll move on to awesome things
0:06:23.261,0:06:26.342
like making them colorful[br]and having them fly around the screen.