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