IntroToDrawingFixed

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

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.