1
00:00:01,220 --> 00:00:02,817
Let's start programming.
2
00:00:02,817 --> 00:00:05,245
We need to begin
with understanding shapes, the basics.
3
00:00:05,245 --> 00:00:06,464
But don't worry, soon enough,
4
00:00:06,464 --> 00:00:08,246
your shapes will be
flying around the screen,
5
00:00:08,246 --> 00:00:11,098
and changing colors, and all kinds
of other cool programming things.
6
00:00:11,098 --> 00:00:12,772
Just stay with us!
7
00:00:12,772 --> 00:00:14,636
So let's start with drawing rectangles.
8
00:00:14,636 --> 00:00:16,516
We type rect for rectangle,
9
00:00:16,516 --> 00:00:18,990
then (, and then four numbers
10, 20, 100, 200--
10
00:00:18,990 --> 00:00:21,024
and I'll explain what these mean
in a moment--
11
00:00:21,024 --> 00:00:23,938
then ), and at the end,
we'll just put a ;
12
00:00:23,938 --> 00:00:25,515
Look, amazing, a rectangle!
13
00:00:25,515 --> 00:00:27,563
And that was so neat,
so let's do that again.
14
00:00:27,763 --> 00:00:29,551
We can try different numbers this time.
15
00:00:30,021 --> 00:00:31,531
Maybe bigger numbers,
(300, 240
16
00:00:32,181 --> 00:00:34,031
and then smaller numbers at the end,
10, 20)
17
00:00:34,031 --> 00:00:36,041
and hey look, another rectangle!
18
00:00:36,041 --> 00:00:39,256
In fact, if we try changing
this first number to make it smaller,
19
00:00:39,256 --> 00:00:40,571
it'll start moving.
20
00:00:40,751 --> 00:00:43,782
If we change this last number
to make it bigger and then smaller,
21
00:00:43,782 --> 00:00:46,276
then it's just going to grow
and then shrink.
22
00:00:46,276 --> 00:00:47,510
Interesting!
23
00:00:47,510 --> 00:00:50,545
So, how is all this magic happening,
you might wonder?
24
00:00:51,245 --> 00:00:52,756
Well, remember that your computer
25
00:00:52,756 --> 00:00:55,507
is just like a really intelligent
and obedient dog.
26
00:00:55,507 --> 00:00:59,778
With a dog, maybe we could tell it
to sit, stay, even roll over.
27
00:00:59,778 --> 00:01:01,503
You would just have to give the command.
28
00:01:02,023 --> 00:01:05,282
So in code, how would you tell
your computer dog to sit?
29
00:01:05,742 --> 00:01:08,024
Well, the way you would do that
30
00:01:08,024 --> 00:01:11,255
is you would write
the command name, say sit,
31
00:01:11,255 --> 00:01:13,271
and then you would put
( ) afterwards
32
00:01:13,271 --> 00:01:15,267
to tell it to go do that command
you just said,
33
00:01:15,267 --> 00:01:17,764
and then you put a ;
at the end just to say,
34
00:01:17,764 --> 00:01:19,521
"Yeah, this command is over."
35
00:01:19,521 --> 00:01:21,829
Then your computer dog would sit down.
36
00:01:22,219 --> 00:01:25,264
Well of course, your computer
on Khan Academy isn't a dog,
37
00:01:25,264 --> 00:01:27,254
so it doesn't know how
to sit or roll over,
38
00:01:27,254 --> 00:01:30,261
but it does know how to draw rectangles
when you tell it rect,
39
00:01:30,261 --> 00:01:32,058
and that's kind of neat too, right?
40
00:01:32,298 --> 00:01:34,344
So, that's what
we're going to do on this line.
41
00:01:34,344 --> 00:01:37,161
We'll say the command rect,
which is just the name,
42
00:01:37,161 --> 00:01:39,754
and then we'll put the ( and the )
43
00:01:39,754 --> 00:01:41,017
to say "go do that",
44
00:01:41,017 --> 00:01:43,041
and then we'll put the ; at the end.
45
00:01:43,501 --> 00:01:46,566
That's how your computer knows
to go do this special ability, rect.
46
00:01:47,216 --> 00:01:49,737
Okay, so now let's go back to our rect.
47
00:01:49,737 --> 00:01:53,502
We have the command name right here
and we have those parentheses.
48
00:01:53,502 --> 00:01:55,770
But what about all these crazy numbers?
49
00:01:56,250 --> 00:01:59,503
Well, the idea is that the computer
really doesn't know enough
50
00:01:59,503 --> 00:02:01,056
if you just tell it rect.
51
00:02:01,986 --> 00:02:05,249
To see this, imagine if I gave you
a piece of paper,
52
00:02:05,249 --> 00:02:07,254
and I said I wanted you
to draw a rectangle
53
00:02:07,254 --> 00:02:09,329
exactly the way I wanted it to be.
54
00:02:09,989 --> 00:02:11,233
Unless you can read my mind,
55
00:02:11,233 --> 00:02:13,287
you're going to have
some questions right away.
56
00:02:14,507 --> 00:02:15,756
First, you might wonder,
57
00:02:15,756 --> 00:02:19,075
"Where do you want me
to draw the rectangle?"
58
00:02:19,255 --> 00:02:21,278
And then, what I would say is,
59
00:02:21,278 --> 00:02:22,527
"How about we just agree
60
00:02:22,527 --> 00:02:25,796
that this left side of the paper
that I just gave you,
61
00:02:25,796 --> 00:02:27,046
let's just call that zero.
62
00:02:27,046 --> 00:02:29,815
And let's just agree that this right side
is going to be 400."
63
00:02:30,035 --> 00:02:33,011
Then I could give you a number,
say like 100,
64
00:02:33,011 --> 00:02:36,235
and you would know that that's
going to be right about there, maybe,
65
00:02:36,235 --> 00:02:37,309
roughly.
66
00:02:37,309 --> 00:02:39,967
Except that will satisfy you for a moment,
but then you'd think,
67
00:02:39,967 --> 00:02:43,165
"Okay, that tells me how far across,
but how about how far up and down?"
68
00:02:43,515 --> 00:02:47,010
Then I could give you another number,
let's say maybe 200,
69
00:02:47,010 --> 00:02:49,750
and I would say,
"This is the top, this is 0,
70
00:02:49,750 --> 00:02:52,646
and again we'll just say that the bottom,
that's going to be 400."
71
00:02:52,646 --> 00:02:53,744
And you would think,
72
00:02:53,744 --> 00:02:56,802
"200, that's going to be
right in the middle here."
73
00:02:57,402 --> 00:02:59,758
And that's perfect,
because now you think, and you say,
74
00:02:59,758 --> 00:03:02,504
"Okay great, I'm going to draw
your rectangle right here
75
00:03:02,504 --> 00:03:05,580
because it's 100 across,
and it's 200 down."
76
00:03:06,490 --> 00:03:09,056
Except that's still not enough,
because now what are you asking?
77
00:03:09,496 --> 00:03:12,268
Right, you're wondering,
"How big do you want the rectangle?"
78
00:03:12,268 --> 00:03:17,008
And I would say,
"How about like, 150 wide?"
79
00:03:17,008 --> 00:03:20,969
And you'd think,
"Well, this is 100, and this is 400,
80
00:03:20,969 --> 00:03:25,310
so if we want it to be 150 wide,
maybe we're gonna go to here?"
81
00:03:25,530 --> 00:03:28,821
And you think,
"Okay, cool, 150 wide, about."
82
00:03:29,341 --> 00:03:31,238
Then you'd say,
"How tall do you want it?"
83
00:03:31,238 --> 00:03:33,468
I would say, "Not very tall.
How about 50 tall?"
84
00:03:33,718 --> 00:03:37,296
You'll say, "Okay, well 50,
maybe that's going to be about that tall?"
85
00:03:37,506 --> 00:03:39,019
Then you would say, "Awesome!
86
00:03:39,019 --> 00:03:40,812
I know exactly where you want
your rectangle,
87
00:03:40,812 --> 00:03:42,492
exactly what it should look like.
88
00:03:42,492 --> 00:03:44,082
I'll go ahead and draw it."
89
00:03:45,232 --> 00:03:47,562
That's a lot of work
for a rectangle, isn't it?
90
00:03:47,982 --> 00:03:50,265
But the idea is just by giving you
those four numbers--
91
00:03:50,265 --> 00:03:53,547
remember we said 100 across, 200 down,
92
00:03:54,457 --> 00:03:57,532
150 wide, and then just 50 tall--
93
00:03:57,822 --> 00:03:59,755
we now are exactly on the same page
94
00:03:59,755 --> 00:04:01,548
about what this rectangle
should look like.
95
00:04:02,008 --> 00:04:04,252
That's how the computer works too.
96
00:04:04,252 --> 00:04:06,755
You can just write the command name
like we said earlier,
97
00:04:06,755 --> 00:04:09,744
write the ( and then
add in these four numbers,
98
00:04:09,744 --> 00:04:14,020
100, 200, 150, and then 50,
99
00:04:14,020 --> 00:04:16,006
) and then a ;
100
00:04:16,226 --> 00:04:19,303
And it will draw a rectangle
exactly where we wanted it to be.
101
00:04:20,623 --> 00:04:22,263
I guess if we're honest with ourselves,
102
00:04:22,263 --> 00:04:24,223
that's not really where
we wanted the rectangle.
103
00:04:24,223 --> 00:04:25,583
It's not where we drew it, right?
104
00:04:25,763 --> 00:04:27,488
So our numbers are a little bit off.
105
00:04:27,488 --> 00:04:31,273
Let's go ahead and say we want it
to really match exactly what we drew.
106
00:04:31,273 --> 00:04:33,780
We'll move this
so it's a little bit further over,
107
00:04:34,220 --> 00:04:37,254
a little bit less up and down,
108
00:04:37,714 --> 00:04:42,008
a little bit skinnier,
and maybe a tiny bit less tall.
109
00:04:42,758 --> 00:04:46,024
Now we have it that our rectangle
pretty much exactly matches what we drew,
110
00:04:46,024 --> 00:04:48,771
because we understood
what each of these numbers meant,
111
00:04:48,771 --> 00:04:51,828
and we could change it
so it looks like we want it to.
112
00:04:52,748 --> 00:04:54,767
Now let's think about drawing
another rectangle.
113
00:04:54,767 --> 00:04:56,472
Because the beauty of this is,
114
00:04:56,472 --> 00:04:58,757
we can draw rectangles
wherever we want now.
115
00:04:59,817 --> 00:05:02,157
How about we draw it
all the way in this upper corner,
116
00:05:02,157 --> 00:05:03,387
all the way up there?
117
00:05:03,987 --> 00:05:05,558
Let's think of where that would be.
118
00:05:06,018 --> 00:05:09,502
I guess that would be like 0 across,
0 up and down,
119
00:05:09,502 --> 00:05:13,255
and maybe pretty small,
let's say just 50 wide
120
00:05:13,255 --> 00:05:16,268
and maybe just 10 tall,
like a pretty small rectangle.
121
00:05:16,998 --> 00:05:18,266
We can go ahead and do that.
122
00:05:18,266 --> 00:05:19,276
We'll type rect,
123
00:05:19,276 --> 00:05:21,546
and then separating
these parameters with , , ,
124
00:05:22,756 --> 00:05:25,518
we'll go ahead and say,
"Alright, cool".
125
00:05:25,748 --> 00:05:28,551
Well, not so cool because we have
this error message that's saying,
126
00:05:28,551 --> 00:05:31,392
"Oh no!
It looks like you're missing a )"
127
00:05:31,392 --> 00:05:32,748
And we say, "Oh yeah, we are."
128
00:05:32,748 --> 00:05:34,828
So phew, we'll put it back in.
It looks great, right?
129
00:05:34,828 --> 00:05:36,998
Well, not so great because now
we have another message
130
00:05:36,998 --> 00:05:38,447
saying we have a missing semicolon.
131
00:05:38,447 --> 00:05:40,866
This one is also correct;
we could just press "Show Me Where"
132
00:05:40,866 --> 00:05:42,616
and it would point
to the line we just wrote.
133
00:05:42,616 --> 00:05:43,535
And we just remember,
134
00:05:43,535 --> 00:05:46,284
"Oh yeah, semicolons are like periods
at the ends of the sentences
135
00:05:46,284 --> 00:05:48,523
to end our lines, and we forgot one!"
136
00:05:48,523 --> 00:05:52,024
But we can just put it back, no big deal,
and everything is good again.
137
00:05:52,254 --> 00:05:55,295
Check it out, a tiny little rectangle,
exactly like we wanted.
138
00:05:55,745 --> 00:05:58,498
Just like before, we can grow it
so that it's bigger,
139
00:05:58,718 --> 00:06:00,230
we can move it around,
140
00:06:00,510 --> 00:06:03,262
and we can position it
exactly where we want it to be.
141
00:06:03,262 --> 00:06:06,265
So now you know in detail
exactly how this rect thing works.
142
00:06:06,505 --> 00:06:08,706
We covered what these numbers mean,
143
00:06:08,706 --> 00:06:12,040
and how you always need to put
the command name, the parentheses,
144
00:06:12,040 --> 00:06:14,964
have a comma separate the numbers,
and put the semicolon at the end.
145
00:06:15,484 --> 00:06:16,482
It seems like a lot,
146
00:06:16,482 --> 00:06:19,170
but you can go ahead and try it
for yourself and get a feel for it.
147
00:06:19,260 --> 00:06:21,499
Next time, we'll learn about
making more shapes,
148
00:06:21,499 --> 00:06:23,261
and then we'll move on to awesome things
149
00:06:23,261 --> 00:06:26,342
like making them colorful
and having them fly around the screen.