1
00:00:00,960 --> 00:00:03,029
Let's explore more
of this whole drawing thing.
2
00:00:03,029 --> 00:00:05,270
What can we make besides rectangles?
3
00:00:05,270 --> 00:00:07,716
We can make ovals using the word ellipse,
4
00:00:07,716 --> 00:00:09,966
which is another command
the computer knows.
5
00:00:09,966 --> 00:00:12,775
We actually have a special
programming word for commands.
6
00:00:12,775 --> 00:00:14,751
We're going to call them functions.
7
00:00:14,751 --> 00:00:17,790
I'll be using the word function
from now on just to mean command.
8
00:00:18,510 --> 00:00:20,836
We'll go ahead and write
the function name ellipse,
9
00:00:20,836 --> 00:00:22,790
and then ( ) and a ;
10
00:00:23,000 --> 00:00:24,005
It's not working!
11
00:00:24,005 --> 00:00:26,136
We have this error message
talking about parameters,
12
00:00:26,136 --> 00:00:27,367
whatever those are.
13
00:00:27,367 --> 00:00:30,330
Can you see what we're missing,
by comparing what we just wrote with rect?
14
00:00:30,922 --> 00:00:33,291
When we just type ellipse,
we aren't telling it the numbers,
15
00:00:33,291 --> 00:00:35,030
like we did for the rectangle.
16
00:00:35,030 --> 00:00:37,060
These numbers here are called parameters.
17
00:00:37,550 --> 00:00:40,500
We say that we pass parameters
into functions,
18
00:00:40,500 --> 00:00:43,000
and they control how the function behaves.
19
00:00:45,470 --> 00:00:46,523
Without the parameters,
20
00:00:46,523 --> 00:00:48,716
the program doesn't know
where you want your ellipse,
21
00:00:48,716 --> 00:00:49,881
or how big to make it.
22
00:00:50,211 --> 00:00:52,530
Now that error message makes
a little more sense.
23
00:00:52,530 --> 00:00:54,717
Let's go ahead and pass in
four parameters again,
24
00:00:54,717 --> 00:00:58,505
to control how far over,
how far down, how wide,
25
00:00:58,505 --> 00:01:00,563
and how tall we want that ellipse to be.
26
00:01:00,753 --> 00:01:03,771
Just like before, we can have some fun
and move around our ellipse,
27
00:01:03,771 --> 00:01:05,775
and even make it grow and shrink.
28
00:01:08,205 --> 00:01:11,633
Now that we've seen the basics,
let's try drawing a big ellipse
29
00:01:11,633 --> 00:01:13,292
right in the middle of the canvas.
30
00:01:14,012 --> 00:01:16,535
The first question you might have is,
where's the middle again?
31
00:01:17,505 --> 00:01:20,299
Just to review,
we have this upper left, 0,
32
00:01:20,299 --> 00:01:25,490
and the right, if you remember, is 400,
and the bottom is 400 as well.
33
00:01:25,490 --> 00:01:27,761
So if we think,
"Where would the middle be?"
34
00:01:27,761 --> 00:01:31,285
We would say, "It's gonna
to be half of 400 over, so 200.
35
00:01:31,285 --> 00:01:33,759
Then half of 400 down, so 200."
36
00:01:33,759 --> 00:01:35,024
We can go ahead and do that.
37
00:01:35,024 --> 00:01:36,746
Let's make our ellipse function,
38
00:01:36,746 --> 00:01:40,788
we'll pass the parameters in,
and make it pretty big.
39
00:01:41,468 --> 00:01:42,810
There it is!
40
00:01:43,480 --> 00:01:45,772
Just for fun, let's put
a rectangle there too.
41
00:01:46,242 --> 00:01:50,216
We'll say rect(200, 200 as well,
and maybe a little bit smaller. 100, 100);
42
00:01:50,216 --> 00:01:53,005
Hm, this is kind of interesting.
43
00:01:53,005 --> 00:01:54,813
What does this little experiment show us?
44
00:01:55,243 --> 00:01:58,000
Well, we can see that
that 200, 200 point
45
00:01:58,000 --> 00:02:01,767
is actually saying where we should put
the center of the ellipse.
46
00:02:01,767 --> 00:02:04,498
But for rectangles it's different,
because for rectangles
47
00:02:04,498 --> 00:02:08,539
the 200, 200 says where we should put
this upper left corner of the rectangle.
48
00:02:09,969 --> 00:02:13,202
That's really important to remember
when we're trying to position our shapes.
49
00:02:14,752 --> 00:02:16,565
Now let's move on to simple lines.
50
00:02:16,825 --> 00:02:19,278
That function name
is just going to be line.
51
00:02:19,478 --> 00:02:21,773
We can pass it four parameters again,
52
00:02:21,773 --> 00:02:24,984
but a line doesn't really have
a size like a rectangle, does it?
53
00:02:25,234 --> 00:02:27,225
So what will these numbers control?
54
00:02:28,485 --> 00:02:31,270
The first and the second parameters,
just like before,
55
00:02:31,270 --> 00:02:34,265
say how far over and down
the line should start.
56
00:02:34,545 --> 00:02:36,561
Whereas the second two parameters--
57
00:02:36,981 --> 00:02:40,017
or sorry, the second set of parameters,
the 90 and the 200--
58
00:02:40,017 --> 00:02:43,533
are going to specify how far over
and how far down the line should end.
59
00:02:46,523 --> 00:02:48,242
Now that we understand how that works,
60
00:02:48,242 --> 00:02:51,761
let's look at something that's going
to seem really weird at first.
61
00:02:52,501 --> 00:02:56,757
What happens if I make the rectangle start
in that upper left corner,
62
00:02:56,757 --> 00:03:00,283
again specifying that upper left corner
of the rectangle as well?
63
00:03:00,533 --> 00:03:02,281
And then really big.
64
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.
65
00:03:07,777 --> 00:03:11,760
We see that it's gradually starting
to make that ellipse disappear.
66
00:03:11,910 --> 00:03:13,780
We can actually make it
disappear completely.
67
00:03:14,760 --> 00:03:16,543
Now we're wondering where it went.
68
00:03:17,773 --> 00:03:21,502
What the program does is it actually
draws your shapes in order.
69
00:03:21,502 --> 00:03:24,702
First it draws that ellipse,
then it draws that rectangle on top,
70
00:03:24,702 --> 00:03:26,502
and then it draws the line.
71
00:03:26,502 --> 00:03:29,762
So that ellipse is still there,
it's just, as you saw, underneath.
72
00:03:30,772 --> 00:03:32,500
This is an important point to remember
73
00:03:32,500 --> 00:03:35,808
because what would happen
if we drew our line first?
74
00:03:36,498 --> 00:03:38,520
We just wouldn't see it at all, would we?
75
00:03:38,520 --> 00:03:41,730
You might do that in your programs
and wonder, "Hey, where did my line go?"
76
00:03:41,740 --> 00:03:45,023
The idea is that it is there,
it's just being hidden right now
77
00:03:45,023 --> 00:03:48,050
both by the ellipse
and also by that rectangle.
78
00:03:50,250 --> 00:03:53,501
We can affect which shapes
are drawn on top of which other shapes
79
00:03:53,501 --> 00:03:56,562
just by changing the order
that we write them in our program.
80
00:03:58,592 --> 00:04:01,031
Now, I just want to introduce
a couple of technical terms
81
00:04:01,031 --> 00:04:02,280
before we finish.
82
00:04:02,770 --> 00:04:04,512
Just like you might have learned in math,
83
00:04:04,512 --> 00:04:07,494
we can use the letter x
to mean how far over
84
00:04:07,494 --> 00:04:09,216
like we've been talking about,
85
00:04:09,216 --> 00:04:11,528
and the letter y to mean how far down.
86
00:04:11,528 --> 00:04:14,001
That might seem a little bit weird
if you're not used to it,
87
00:04:14,001 --> 00:04:17,232
but it's easier to say than
"how far over and how far down"
88
00:04:17,232 --> 00:04:18,543
every single time.
89
00:04:19,493 --> 00:04:22,216
The first two parameters
to our ellipse, for example,
90
00:04:22,216 --> 00:04:27,528
are saying that x should be at 200
and y should be at 229.
91
00:04:28,968 --> 00:04:30,250
There you have it,
92
00:04:30,250 --> 00:04:33,042
just the same thing as saying
"how far over and how far down".
93
00:04:33,982 --> 00:04:36,034
A second really good question
you might have is,
94
00:04:36,034 --> 00:04:38,564
"What units have we been using
this whole time?
95
00:04:38,794 --> 00:04:42,763
Are we saying 200 centimeters,
200 inches, 200 miles?"
96
00:04:42,763 --> 00:04:44,810
We're using units called 'pixels',
97
00:04:45,260 --> 00:04:47,787
and a pixel is a tiny little point
on your screen.
98
00:04:48,477 --> 00:04:51,957
This canvas actually happens
to be 400 pixels wide.
99
00:04:52,287 --> 00:04:56,497
That's why we always say
that this upper left corner is 0,
100
00:04:56,497 --> 00:05:00,588
and over here is 400,
because it's 400 pixels.
101
00:05:01,508 --> 00:05:04,784
Similarly, when we say 200,
we actually mean 200 pixels,
102
00:05:04,784 --> 00:05:06,540
and you probably get the idea.
103
00:05:07,180 --> 00:05:08,303
Fantastic!
104
00:05:08,303 --> 00:05:10,788
Now you know all about the functions
line, ellipse, and rect,
105
00:05:10,788 --> 00:05:12,003
and their parameters.
106
00:05:12,253 --> 00:05:14,791
We covered a lot, but just stick with it,
keep exploring,
107
00:05:14,791 --> 00:05:16,423
and you'll get the hang of it soon.