0:00:00.960,0:00:03.029
Let's explore more[br]of this whole drawing thing.

0:00:03.029,0:00:05.270
What can we make besides rectangles?

0:00:05.270,0:00:07.716
We can make ovals using the word <i>ellipse</i>,

0:00:07.716,0:00:09.966
which is another command[br]the computer knows.

0:00:09.966,0:00:12.775
We actually have a special[br]programming word for commands.

0:00:12.775,0:00:14.751
We're going to call them <i>functions</i>.

0:00:14.751,0:00:17.790
I'll be using the word <i>function</i>[br]from now on just to mean command.

0:00:18.510,0:00:20.836
We'll go ahead and write[br]the function name <i>ellipse</i>,

0:00:20.836,0:00:22.790
and then <i>( ) </i> and a <i>;</i>

0:00:23.000,0:00:24.005
It's not working!

0:00:24.005,0:00:26.136
We have this error message[br]talking about parameters,

0:00:26.136,0:00:27.367
whatever those are.

0:00:27.367,0:00:30.330
Can you see what we're missing,[br]by comparing what we just wrote with <i>rect</i>?

0:00:30.922,0:00:33.291
When we just type <i>ellipse</i>,[br]we aren't telling it the numbers,

0:00:33.291,0:00:35.030
like we did for the rectangle.

0:00:35.030,0:00:37.060
These numbers here are called parameters.

0:00:37.550,0:00:40.500
We say that we pass parameters[br]into functions,

0:00:40.500,0:00:43.000
and they control how the function behaves.

0:00:45.470,0:00:46.523
Without the parameters,

0:00:46.523,0:00:48.716
the program doesn't know[br]where you want your ellipse,

0:00:48.716,0:00:49.881
or how big to make it.

0:00:50.211,0:00:52.530
Now that error message makes[br]a little more sense.

0:00:52.530,0:00:54.717
Let's go ahead and pass in[br]four parameters again,

0:00:54.717,0:00:58.505
to control how far over,[br]how far down, how wide,

0:00:58.505,0:01:00.563
and how tall we want that ellipse to be.

0:01:00.753,0:01:03.771
Just like before, we can have some fun[br]and move around our ellipse,

0:01:03.771,0:01:05.775
and even make it grow and shrink.

0:01:08.205,0:01:11.633
Now that we've seen the basics,[br]let's try drawing a big ellipse

0:01:11.633,0:01:13.292
right in the middle of the canvas.

0:01:14.012,0:01:16.535
The first question you might have is,[br]where's the middle again?

0:01:17.505,0:01:20.299
Just to review,[br]we have this upper left, 0,

0:01:20.299,0:01:25.490
and the right, if you remember, is 400, [br]and the bottom is 400 as well.

0:01:25.490,0:01:27.761
So if we think,[br]"Where would the middle be?"

0:01:27.761,0:01:31.285
We would say, "It's gonna[br]to be half of 400 over, so 200.

0:01:31.285,0:01:33.759
Then half of 400 down, so 200."

0:01:33.759,0:01:35.024
We can go ahead and do that.

0:01:35.024,0:01:36.746
Let's make our <i>ellipse</i> function,

0:01:36.746,0:01:40.788
we'll pass the parameters in,[br]and make it pretty big.

0:01:41.468,0:01:42.810
There it is!

0:01:43.480,0:01:45.772
Just for fun, let's put[br]a rectangle there too.

0:01:46.242,0:01:50.216
We'll say <i>rect(200, 200</i> as well,[br]and maybe a little bit smaller. <i>100, 100);</i>

0:01:50.216,0:01:53.005
Hm, this is kind of interesting.

0:01:53.005,0:01:54.813
What does this little experiment show us?

0:01:55.243,0:01:58.000
Well, we can see that[br]that <i>200, 200</i> point

0:01:58.000,0:02:01.767
is actually saying where we should put[br]the center of the ellipse.

0:02:01.767,0:02:04.498
But for rectangles it's different,[br]because for rectangles

0:02:04.498,0:02:08.539
the <i>200, 200</i> says where we should put[br]this upper left corner of the rectangle.

0:02:09.969,0:02:13.202
That's really important to remember[br]when we're trying to position our shapes.

0:02:14.752,0:02:16.565
Now let's move on to simple lines.

0:02:16.825,0:02:19.278
That function name[br]is just going to be <i>line</i>.

0:02:19.478,0:02:21.773
We can pass it four parameters again,

0:02:21.773,0:02:24.984
but a line doesn't really have[br]a size like a rectangle, does it?

0:02:25.234,0:02:27.225
So what will these numbers control?

0:02:28.485,0:02:31.270
The first and the second parameters,[br]just like before,

0:02:31.270,0:02:34.265
say how far over and down[br]the line should start.

0:02:34.545,0:02:36.561
Whereas the second two parameters--

0:02:36.981,0:02:40.017
or sorry, the second set of parameters,[br]the <i>90</i> and the <i>200</i>--

0:02:40.017,0:02:43.533
are going to specify how far over[br]and how far down the line should end.

0:02:46.523,0:02:48.242
Now that we understand how that works,

0:02:48.242,0:02:51.761
let's look at something that's going[br]to seem really weird at first.

0:02:52.501,0:02:56.757
What happens if I make the rectangle start[br]in that upper left corner,

0:02:56.757,0:03:00.283
again specifying that upper left corner[br]of the rectangle as well?

0:03:00.533,0:03:02.281
And then really big.

0:03:03.991,0:03:07.017
We can even make it that big,[br]but that's a little bit too big, I think.

0:03:07.777,0:03:11.760
We see that it's gradually starting[br]to make that ellipse disappear.

0:03:11.910,0:03:13.780
We can actually make it[br]disappear completely.

0:03:14.760,0:03:16.543
Now we're wondering where it went.

0:03:17.773,0:03:21.502
What the program does is it actually[br]draws your shapes in order.

0:03:21.502,0:03:24.702
First it draws that ellipse,[br]then it draws that rectangle on top,

0:03:24.702,0:03:26.502
and then it draws the line.

0:03:26.502,0:03:29.762
So that ellipse is still there,[br]it's just, as you saw, underneath.

0:03:30.772,0:03:32.500
This is an important point to remember

0:03:32.500,0:03:35.808
because what would happen[br]if we drew our line first?

0:03:36.498,0:03:38.520
We just wouldn't see it at all, would we?

0:03:38.520,0:03:41.730
You might do that in your programs[br]and wonder, "Hey, where did my line go?"

0:03:41.740,0:03:45.023
The idea is that it is there,[br]it's just being hidden right now

0:03:45.023,0:03:48.050
both by the ellipse[br]and also by that rectangle.

0:03:50.250,0:03:53.501
We can affect which shapes[br]are drawn on top of which other shapes

0:03:53.501,0:03:56.562
just by changing the order[br]that we write them in our program.

0:03:58.592,0:04:01.031
Now, I just want to introduce[br]a couple of technical terms

0:04:01.031,0:04:02.280
before we finish.

0:04:02.770,0:04:04.512
Just like you might have learned in math,

0:04:04.512,0:04:07.494
we can use the letter <i>x</i>[br]to mean how far over

0:04:07.494,0:04:09.216
like we've been talking about,

0:04:09.216,0:04:11.528
and the letter <i>y</i> to mean how far down.

0:04:11.528,0:04:14.001
That might seem a little bit weird[br]if you're not used to it,

0:04:14.001,0:04:17.232
but it's easier to say than[br]"how far over and how far down"

0:04:17.232,0:04:18.543
every single time.

0:04:19.493,0:04:22.216
The first two parameters[br]to our ellipse, for example,

0:04:22.216,0:04:27.528
are saying that <i>x</i> should be at 200[br]and <i>y</i> should be at 229.

0:04:28.968,0:04:30.250
There you have it,

0:04:30.250,0:04:33.042
just the same thing as saying[br]"how far over and how far down".

0:04:33.982,0:04:36.034
A second really good question[br]you might have is,

0:04:36.034,0:04:38.564
"What units have we been using[br]this whole time?

0:04:38.794,0:04:42.763
Are we saying 200 centimeters,[br]200 inches, 200 miles?"

0:04:42.763,0:04:44.810
We're using units called 'pixels',

0:04:45.260,0:04:47.787
and a pixel is a tiny little point[br]on your screen.

0:04:48.477,0:04:51.957
This canvas actually happens[br]to be 400 pixels wide.

0:04:52.287,0:04:56.497
That's why we always say[br]that this upper left corner is 0,

0:04:56.497,0:05:00.588
and over here is 400,[br]because it's 400 pixels.

0:05:01.508,0:05:04.784
Similarly, when we say 200,[br]we actually mean 200 pixels,

0:05:04.784,0:05:06.540
and you probably get the idea.

0:05:07.180,0:05:08.303
Fantastic!

0:05:08.303,0:05:10.788
Now you know all about the functions[br]<i>line</i>, <i>ellipse</i>, and <i>rect</i>,

0:05:10.788,0:05:12.003
and their parameters.

0:05:12.253,0:05:14.791
We covered a lot, but just stick with it,[br]keep exploring,

0:05:14.791,0:05:16.423
and you'll get the hang of it soon.