Let's start programming.
We need to begin with understanding shapes, the basics.
But don't worry, soon enough,
your shapes will be flying around the screen,
and changing colors, and all kinds of other cool programming things.
Just stay with us!
So let's start with drawing rectangles.
We type rect for rectangle,
then (, and then four numbers 10, 20, 100, 200--
and I'll explain what these mean in a moment--
then ), and at the end, we'll just put a ;
Look, amazing, a rectangle!
And that was so neat, so let's do that again.
We can try different numbers this time.
Maybe bigger numbers, (300, 240
and then smaller numbers at the end, 10, 20)
and hey look, another rectangle!
In fact, if we try changing this first number to make it smaller,
it'll start moving.
If we change this last number to make it bigger and then smaller,
then it's just going to grow and then shrink.
Interesting!
So, how is all this magic happening, you might wonder?
Well, remember that your computer
is just like a really intelligent and obedient dog.
With a dog, maybe we could tell it to sit, stay, even roll over.
You would just have to give the command.
So in code, how would you tell your computer dog to sit?
Well, the way you would do that
is you would write the command name, say sit,
and then you would put ( ) afterwards
to tell it to go do that command you just said,
and then you put a ; at the end just to say,
"Yeah, this command is over."
Then your computer dog would sit down.
Well of course, your computer on Khan Academy isn't a dog,
so it doesn't know how to sit or roll over,
but it does know how to draw rectangles when you tell it rect,
and that's kind of neat too, right?
So, that's what we're going to do on this line.
We'll say the command rect, which is just the name,
and then we'll put the ( and the )
to say "go do that",
and then we'll put the ; at the end.
That's how your computer knows to go do this special ability, rect.
Okay, so now let's go back to our rect.
We have the command name right here and we have those parentheses.
But what about all these crazy numbers?
Well, the idea is that the computer really doesn't know enough
if you just tell it rect.
To see this, imagine if I gave you a piece of paper,
and I said I wanted you to draw a rectangle
exactly the way I wanted it to be.
Unless you can read my mind,
you're going to have some questions right away.
First, you might wonder,
"Where do you want me to draw the rectangle?"
And then, what I would say is,
"How about we just agree
that this left side of the paper that I just gave you,
let's just call that zero.
And let's just agree that this right side is going to be 400."
Then I could give you a number, say like 100,
and you would know that that's going to be right about there, maybe,
roughly.
Except that will satisfy you for a moment, but then you'd think,
"Okay, that tells me how far across, but how about how far up and down?"
Then I could give you another number, let's say maybe 200,
and I would say, "This is the top, this is 0,
and again we'll just say that the bottom, that's going to be 400."
And you would think,
"200, that's going to be right in the middle here."
And that's perfect, because now you think, and you say,
"Okay great, I'm going to draw your rectangle right here
because it's 100 across, and it's 200 down."
Except that's still not enough, because now what are you asking?
Right, you're wondering, "How big do you want the rectangle?"
And I would say, "How about like, 150 wide?"
And you'd think, "Well, this is 100, and this is 400,
so if we want it to be 150 wide, maybe we're gonna go to here?"
And you think, "Okay, cool, 150 wide, about."
Then you'd say, "How tall do you want it?"
I would say, "Not very tall. How about 50 tall?"
You'll say, "Okay, well 50, maybe that's going to be about that tall?"
Then you would say, "Awesome!
I know exactly where you want your rectangle,
exactly what it should look like.
I'll go ahead and draw it."
That's a lot of work for a rectangle, isn't it?
But the idea is just by giving you those four numbers--
remember we said 100 across, 200 down,
150 wide, and then just 50 tall--
we now are exactly on the same page
about what this rectangle should look like.
That's how the computer works too.
You can just write the command name like we said earlier,
write the ( and then add in these four numbers,
100, 200, 150, and then 50,
) and then a ;
And it will draw a rectangle exactly where we wanted it to be.
I guess if we're honest with ourselves,
that's not really where we wanted the rectangle.
It's not where we drew it, right?
So our numbers are a little bit off.
Let's go ahead and say we want it to really match exactly what we drew.
We'll move this so it's a little bit further over,
a little bit less up and down,
a little bit skinnier, and maybe a tiny bit less tall.
Now we have it that our rectangle pretty much exactly matches what we drew,
because we understood what each of these numbers meant,
and we could change it so it looks like we want it to.
Now let's think about drawing another rectangle.
Because the beauty of this is,
we can draw rectangles wherever we want now.
How about we draw it all the way in this upper corner,
all the way up there?
Let's think of where that would be.
I guess that would be like 0 across, 0 up and down,
and maybe pretty small, let's say just 50 wide
and maybe just 10 tall, like a pretty small rectangle.
We can go ahead and do that.
We'll type rect,
and then separating these parameters with , , ,
we'll go ahead and say, "Alright, cool".
Well, not so cool because we have this error message that's saying,
"Oh no! It looks like you're missing a )"
And we say, "Oh yeah, we are."
So phew, we'll put it back in. It looks great, right?
Well, not so great because now we have another message
saying we have a missing semicolon.
This one is also correct; we could just press "Show Me Where"
and it would point to the line we just wrote.
And we just remember,
"Oh yeah, semicolons are like periods at the ends of the sentences
to end our lines, and we forgot one!"
But we can just put it back, no big deal, and everything is good again.
Check it out, a tiny little rectangle, exactly like we wanted.
Just like before, we can grow it so that it's bigger,
we can move it around,
and we can position it exactly where we want it to be.
So now you know in detail exactly how this rect thing works.
We covered what these numbers mean,
and how you always need to put the command name, the parentheses,
have a comma separate the numbers, and put the semicolon at the end.
It seems like a lot,
but you can go ahead and try it for yourself and get a feel for it.
Next time, we'll learn about making more shapes,
and then we'll move on to awesome things
like making them colorful and having them fly around the screen.