More Drawing (Video Version)

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 explore more
of this whole drawing thing.

What can we make besides rectangles?

We can make ovals using the word ellipse,

which is another command
the computer knows.

We actually have a special
programming word for commands.

We're going to call them functions.

I'll be using the word function
from now on just to mean command.

We'll go ahead and write
the function name ellipse,

and then ( ) and a ;

It's not working!

We have this error message
talking about parameters,

whatever those are.

Can you see what we're missing,
by comparing what we just wrote with rect?

When we just type ellipse,
we aren't telling it the numbers,

like we did for the rectangle.

These numbers here are called parameters.

We say that we pass parameters
into functions,

and they control how the function behaves.

Without the parameters,

the program doesn't know
where you want your ellipse,

or how big to make it.

Now that error message makes
a little more sense.

Let's go ahead and pass in
four parameters again,

to control how far over,
how far down, how wide,

and how tall we want that ellipse to be.

Just like before, we can have some fun
and move around our ellipse,

and even make it grow and shrink.

Now that we've seen the basics,
let's try drawing a big ellipse

right in the middle of the canvas.

The first question you might have is,
where's the middle again?

Just to review,
we have this upper left, 0,

and the right, if you remember, is 400,
and the bottom is 400 as well.

So if we think,
"Where would the middle be?"

We would say, "It's gonna
to be half of 400 over, so 200.

Then half of 400 down, so 200."

We can go ahead and do that.

Let's make our ellipse function,

we'll pass the parameters in,
and make it pretty big.

There it is!

Just for fun, let's put
a rectangle there too.

We'll say rect(200, 200 as well,
and maybe a little bit smaller. 100, 100);

Hm, this is kind of interesting.

What does this little experiment show us?

Well, we can see that
that 200, 200 point

is actually saying where we should put
the center of the ellipse.

But for rectangles it's different,
because for rectangles

the 200, 200 says where we should put
this upper left corner of the rectangle.

That's really important to remember
when we're trying to position our shapes.

Now let's move on to simple lines.

That function name
is just going to be line.

We can pass it four parameters again,

but a line doesn't really have
a size like a rectangle, does it?

So what will these numbers control?

The first and the second parameters,
just like before,

say how far over and down
the line should start.

Whereas the second two parameters--

or sorry, the second set of parameters,
the 90 and the 200--

are going to specify how far over
and how far down the line should end.

Now that we understand how that works,

let's look at something that's going
to seem really weird at first.

What happens if I make the rectangle start
in that upper left corner,

again specifying that upper left corner
of the rectangle as well?

And then really big.

We can even make it that big,
but that's a little bit too big, I think.

We see that it's gradually starting
to make that ellipse disappear.

We can actually make it
disappear completely.

Now we're wondering where it went.

What the program does is it actually
draws your shapes in order.

First it draws that ellipse,
then it draws that rectangle on top,

and then it draws the line.

So that ellipse is still there,
it's just, as you saw, underneath.

This is an important point to remember

because what would happen
if we drew our line first?

We just wouldn't see it at all, would we?

You might do that in your programs
and wonder, "Hey, where did my line go?"

The idea is that it is there,
it's just being hidden right now

both by the ellipse
and also by that rectangle.

We can affect which shapes
are drawn on top of which other shapes

just by changing the order
that we write them in our program.

Now, I just want to introduce
a couple of technical terms

before we finish.

Just like you might have learned in math,

we can use the letter x
to mean how far over

like we've been talking about,

and the letter y to mean how far down.

That might seem a little bit weird
if you're not used to it,

but it's easier to say than
"how far over and how far down"

every single time.

The first two parameters
to our ellipse, for example,

are saying that x should be at 200
and y should be at 229.

There you have it,

just the same thing as saying
"how far over and how far down".

A second really good question
you might have is,

"What units have we been using
this whole time?

Are we saying 200 centimeters,
200 inches, 200 miles?"

We're using units called 'pixels',

and a pixel is a tiny little point
on your screen.

This canvas actually happens
to be 400 pixels wide.

That's why we always say
that this upper left corner is 0,

and over here is 400,
because it's 400 pixels.

Similarly, when we say 200,
we actually mean 200 pixels,

and you probably get the idea.

Fantastic!

Now you know all about the functions
line, ellipse, and rect,

and their parameters.

We covered a lot, but just stick with it,
keep exploring,

and you'll get the hang of it soon.