WEBVTT
00:00:00.960 --> 00:00:03.029
Let's explore more
of this whole drawing thing.
00:00:03.029 --> 00:00:05.270
What can we make besides rectangles?
00:00:05.270 --> 00:00:07.716
We can make ovals using the word ellipse,
00:00:07.716 --> 00:00:09.966
which is another command
the computer knows.
00:00:09.966 --> 00:00:12.775
We actually have a special
programming word for commands.
00:00:12.775 --> 00:00:14.751
We're going to call them functions.
00:00:14.751 --> 00:00:17.790
I'll be using the word function
from now on just to mean command.
00:00:18.510 --> 00:00:20.836
We'll go ahead and write
the function name ellipse,
00:00:20.836 --> 00:00:22.790
and then ( ) and a ;
00:00:23.000 --> 00:00:24.005
It's not working!
00:00:24.005 --> 00:00:26.136
We have this error message
talking about parameters,
00:00:26.136 --> 00:00:27.367
whatever those are.
00:00:27.367 --> 00:00:30.330
Can you see what we're missing,
by comparing what we just wrote with rect?
00:00:30.922 --> 00:00:33.291
When we just type ellipse,
we aren't telling it the numbers,
00:00:33.291 --> 00:00:35.030
like we did for the rectangle.
00:00:35.030 --> 00:00:37.060
These numbers here are called parameters.
00:00:37.550 --> 00:00:40.500
We say that we pass parameters
into functions,
00:00:40.500 --> 00:00:43.000
and they control how the function behaves.
00:00:45.470 --> 00:00:46.523
Without the parameters,
00:00:46.523 --> 00:00:48.716
the program doesn't know
where you want your ellipse,
00:00:48.716 --> 00:00:49.881
or how big to make it.
00:00:50.211 --> 00:00:52.530
Now that error message makes
a little more sense.
00:00:52.530 --> 00:00:54.717
Let's go ahead and pass in
four parameters again,
00:00:54.717 --> 00:00:58.505
to control how far over,
how far down, how wide,
00:00:58.505 --> 00:01:00.563
and how tall we want that ellipse to be.
00:01:00.753 --> 00:01:03.771
Just like before, we can have some fun
and move around our ellipse,
00:01:03.771 --> 00:01:05.775
and even make it grow and shrink.
00:01:08.205 --> 00:01:11.633
Now that we've seen the basics,
let's try drawing a big ellipse
00:01:11.633 --> 00:01:13.292
right in the middle of the canvas.
00:01:14.012 --> 00:01:16.535
The first question you might have is,
where's the middle again?
00:01:17.505 --> 00:01:20.299
Just to review,
we have this upper left, 0,
00:01:20.299 --> 00:01:25.490
and the right, if you remember, is 400,
and the bottom is 400 as well.
00:01:25.490 --> 00:01:27.761
So if we think,
"Where would the middle be?"
00:01:27.761 --> 00:01:31.285
We would say, "It's gonna
to be half of 400 over, so 200.
00:01:31.285 --> 00:01:33.759
Then half of 400 down, so 200."
00:01:33.759 --> 00:01:35.024
We can go ahead and do that.
00:01:35.024 --> 00:01:36.746
Let's make our ellipse function,
00:01:36.746 --> 00:01:40.788
we'll pass the parameters in,
and make it pretty big.
00:01:41.468 --> 00:01:42.810
There it is!
00:01:43.480 --> 00:01:45.772
Just for fun, let's put
a rectangle there too.
00:01:46.242 --> 00:01:50.216
We'll say rect(200, 200 as well,
and maybe a little bit smaller. 100, 100);
00:01:50.216 --> 00:01:53.005
Hm, this is kind of interesting.
00:01:53.005 --> 00:01:54.813
What does this little experiment show us?
00:01:55.243 --> 00:01:58.000
Well, we can see that
that 200, 200 point
00:01:58.000 --> 00:02:01.767
is actually saying where we should put
the center of the ellipse.
00:02:01.767 --> 00:02:04.498
But for rectangles it's different,
because for rectangles
00:02:04.498 --> 00:02:08.539
the 200, 200 says where we should put
this upper left corner of the rectangle.
00:02:09.969 --> 00:02:13.202
That's really important to remember
when we're trying to position our shapes.
00:02:14.752 --> 00:02:16.565
Now let's move on to simple lines.
00:02:16.825 --> 00:02:19.278
That function name
is just going to be line.
00:02:19.478 --> 00:02:21.773
We can pass it four parameters again,
00:02:21.773 --> 00:02:24.984
but a line doesn't really have
a size like a rectangle, does it?
00:02:25.234 --> 00:02:27.225
So what will these numbers control?
00:02:28.485 --> 00:02:31.270
The first and the second parameters,
just like before,
00:02:31.270 --> 00:02:34.265
say how far over and down
the line should start.
00:02:34.545 --> 00:02:36.561
Whereas the second two parameters--
00:02:36.981 --> 00:02:40.017
or sorry, the second set of parameters,
the 90 and the 200--
00:02:40.017 --> 00:02:43.533
are going to specify how far over
and how far down the line should end.
00:02:46.523 --> 00:02:48.242
Now that we understand how that works,
00:02:48.242 --> 00:02:51.761
let's look at something that's going
to seem really weird at first.
00:02:52.501 --> 00:02:56.757
What happens if I make the rectangle start
in that upper left corner,
00:02:56.757 --> 00:03:00.283
again specifying that upper left corner
of the rectangle as well?
00:03:00.533 --> 00:03:02.281
And then really big.
00:03:03.991 --> 00:03:07.017
We can even make it that big,
but that's a little bit too big, I think.
00:03:07.777 --> 00:03:11.760
We see that it's gradually starting
to make that ellipse disappear.
00:03:11.910 --> 00:03:13.780
We can actually make it
disappear completely.
00:03:14.760 --> 00:03:16.543
Now we're wondering where it went.
00:03:17.773 --> 00:03:21.502
What the program does is it actually
draws your shapes in order.
00:03:21.502 --> 00:03:24.702
First it draws that ellipse,
then it draws that rectangle on top,
00:03:24.702 --> 00:03:26.502
and then it draws the line.
00:03:26.502 --> 00:03:29.762
So that ellipse is still there,
it's just, as you saw, underneath.
00:03:30.772 --> 00:03:32.500
This is an important point to remember
00:03:32.500 --> 00:03:35.808
because what would happen
if we drew our line first?
00:03:36.498 --> 00:03:38.520
We just wouldn't see it at all, would we?
00:03:38.520 --> 00:03:41.730
You might do that in your programs
and wonder, "Hey, where did my line go?"
00:03:41.740 --> 00:03:45.023
The idea is that it is there,
it's just being hidden right now
00:03:45.023 --> 00:03:48.050
both by the ellipse
and also by that rectangle.
00:03:50.250 --> 00:03:53.501
We can affect which shapes
are drawn on top of which other shapes
00:03:53.501 --> 00:03:56.562
just by changing the order
that we write them in our program.
00:03:58.592 --> 00:04:01.031
Now, I just want to introduce
a couple of technical terms
00:04:01.031 --> 00:04:02.280
before we finish.
00:04:02.770 --> 00:04:04.512
Just like you might have learned in math,
00:04:04.512 --> 00:04:07.494
we can use the letter x
to mean how far over
00:04:07.494 --> 00:04:09.216
like we've been talking about,
00:04:09.216 --> 00:04:11.528
and the letter y to mean how far down.
00:04:11.528 --> 00:04:14.001
That might seem a little bit weird
if you're not used to it,
00:04:14.001 --> 00:04:17.232
but it's easier to say than
"how far over and how far down"
00:04:17.232 --> 00:04:18.543
every single time.
00:04:19.493 --> 00:04:22.216
The first two parameters
to our ellipse, for example,
00:04:22.216 --> 00:04:27.528
are saying that x should be at 200
and y should be at 229.
00:04:28.968 --> 00:04:30.250
There you have it,
00:04:30.250 --> 00:04:33.042
just the same thing as saying
"how far over and how far down".
00:04:33.982 --> 00:04:36.034
A second really good question
you might have is,
00:04:36.034 --> 00:04:38.564
"What units have we been using
this whole time?
00:04:38.794 --> 00:04:42.763
Are we saying 200 centimeters,
200 inches, 200 miles?"
00:04:42.763 --> 00:04:44.810
We're using units called 'pixels',
00:04:45.260 --> 00:04:47.787
and a pixel is a tiny little point
on your screen.
00:04:48.477 --> 00:04:51.957
This canvas actually happens
to be 400 pixels wide.
00:04:52.287 --> 00:04:56.497
That's why we always say
that this upper left corner is 0,
00:04:56.497 --> 00:05:00.588
and over here is 400,
because it's 400 pixels.
00:05:01.508 --> 00:05:04.784
Similarly, when we say 200,
we actually mean 200 pixels,
00:05:04.784 --> 00:05:06.540
and you probably get the idea.
00:05:07.180 --> 00:05:08.303
Fantastic!
00:05:08.303 --> 00:05:10.788
Now you know all about the functions
line, ellipse, and rect,
00:05:10.788 --> 00:05:12.003
and their parameters.
00:05:12.253 --> 00:05:14.791
We covered a lot, but just stick with it,
keep exploring,
00:05:14.791 --> 00:05:16.423
and you'll get the hang of it soon.