1
00:00:01,525 --> 00:00:02,935
We're back with Winston,
2
00:00:03,217 --> 00:00:06,845
and now we have both
an x and a y variable
3
00:00:06,845 --> 00:00:08,539
for Winston's position.
4
00:00:08,539 --> 00:00:11,185
So, now we can make Winston
hop up and down
5
00:00:11,185 --> 00:00:14,446
and have a little Winston party!
Wooo!
6
00:00:14,446 --> 00:00:15,714
Very nice.
7
00:00:15,980 --> 00:00:18,719
Let's review what this code does
before we keep going.
8
00:00:19,235 --> 00:00:21,908
We have these x and y variables
at the top
9
00:00:21,909 --> 00:00:24,728
that store the center position
of Winston's face,
10
00:00:25,252 --> 00:00:28,582
which we use in this line here
when we make the ellipse for his face.
11
00:00:29,660 --> 00:00:31,654
Then, we position the eyes
and the mouth
12
00:00:31,654 --> 00:00:34,324
relative to the center of the face.
13
00:00:34,324 --> 00:00:39,295
So, we subtract or add to x and y
in order to make sure that the eyes
14
00:00:39,295 --> 00:00:42,697
are 50 pixels away and 100 pixels away.
15
00:00:43,502 --> 00:00:45,122
For example, the mouth
16
00:00:45,128 --> 00:00:49,232
is 50 pixels to the right
of the center of the face,
17
00:00:49,232 --> 00:00:53,638
and 40 pixels below
the center of the face.
18
00:00:55,752 --> 00:01:00,131
So, let's go through and see
what else we can store as variables.
19
00:01:00,131 --> 00:01:03,487
To do that, I'm going to go through
each line of code
20
00:01:03,487 --> 00:01:07,410
and look for what we call
hard coded numbers.
21
00:01:07,921 --> 00:01:10,775
Those are numbers
that are just straight numbers,
22
00:01:11,205 --> 00:01:14,265
not variables
or dependent on variables.
23
00:01:14,928 --> 00:01:18,127
Let's see.
In our first ellipse call here,
24
00:01:18,272 --> 00:01:22,260
we have 300 and 300
for the width and height.
25
00:01:22,750 --> 00:01:26,590
So, we can make a variable
for these instead, like faceSize.
26
00:01:26,605 --> 00:01:32,743
So, faceSize = 300,
and then we can pass faceSize in here,
27
00:01:32,743 --> 00:01:36,141
and right now it would pass 300
as the value.
28
00:01:37,211 --> 00:01:40,909
Cool. Now, let's keep going.
29
00:01:41,606 --> 00:01:45,297
Everything in here
is using x or y or eyeSize,
30
00:01:45,297 --> 00:01:48,788
but here for the mouth,
we once again have 150
31
00:01:48,788 --> 00:01:51,167
and 150 for the width and height.
32
00:01:51,167 --> 00:01:55,969
So, we can make a mouthSize variable,
say mouthSize = 150,
33
00:01:56,656 --> 00:01:59,567
and we'll go pass mouthSize here.
34
00:01:59,764 --> 00:02:01,538
It'll just pass 150 right now,
35
00:02:01,538 --> 00:02:03,538
because that's what
the variable is equal to.
36
00:02:04,635 --> 00:02:10,322
OK, so now that we've done that,
we can easily change the faceSize here,
37
00:02:11,070 --> 00:02:16,036
and we can easily change the mouthSize,
and we can move it like that,
38
00:02:16,697 --> 00:02:19,159
and we can change the eyeSize again.
39
00:02:19,159 --> 00:02:20,607
OK, so that's cool.
40
00:02:20,607 --> 00:02:24,226
But, there's something
I don't really like about that,
41
00:02:24,744 --> 00:02:27,386
and that's when I change the faceSize.
42
00:02:28,779 --> 00:02:33,625
I actually want everything else to change
relative to the faceSize,
43
00:02:33,761 --> 00:02:37,304
so if I make the faceSize
really small like this,
44
00:02:37,945 --> 00:02:40,828
I want his eyes and his mouth
to be really small, too.
45
00:02:41,012 --> 00:02:44,032
If I make the faceSize
half of its original size,
46
00:02:44,638 --> 00:02:47,920
the eyes and the mouth
should also be half of their size.
47
00:02:48,132 --> 00:02:50,074
Otherwise he just looks really silly,
48
00:02:50,074 --> 00:02:53,326
because his eyes and his mouth
are way too big for his face.
49
00:02:53,493 --> 00:02:55,429
They're not even connected anymore.
50
00:02:55,936 --> 00:02:59,467
So what we want to do
is somehow make these variables,
51
00:02:59,501 --> 00:03:01,780
mouthSize and eyeSize,
52
00:03:01,780 --> 00:03:04,704
be dependent on this variable,
faceSize.
53
00:03:06,185 --> 00:03:08,658
So, let's bring it back to what it was.
54
00:03:09,194 --> 00:03:11,072
The way we can do this
55
00:03:11,072 --> 00:03:16,586
is we can make these values
be based off the faceSize values.
56
00:03:16,586 --> 00:03:21,659
So, we can say
mouthSize = faceSize/2.
57
00:03:22,015 --> 00:03:24,025
We are using a fraction of the face;
58
00:03:24,025 --> 00:03:27,998
we're saying take one half
of the face size.
59
00:03:27,998 --> 00:03:29,957
If you're not familiar with fractions,
60
00:03:29,957 --> 00:03:32,064
there's tons of videos on Khan Academy
61
00:03:32,064 --> 00:03:35,509
that you can use
to review how fractions work.
62
00:03:36,236 --> 00:03:40,770
All right. Now for eyeSize.
It's around faceSize/4.
63
00:03:40,770 --> 00:03:43,572
It's not perfect,
but it's pretty good.
64
00:03:43,572 --> 00:03:46,869
Oh, 7.
There we go, that's better.
65
00:03:46,869 --> 00:03:48,915
See, if you get the fraction
wrong at first,
66
00:03:48,915 --> 00:03:50,850
you can always fix it later.
67
00:03:50,850 --> 00:03:54,133
Just fiddle with that number
until something makes sense.
68
00:03:54,133 --> 00:03:58,464
OK, so now if we resize the face again,
69
00:03:58,464 --> 00:04:02,744
see how the eyes and the mouth
are actually resizing along with it?
70
00:04:02,744 --> 00:04:04,266
It's pretty cool.
71
00:04:04,490 --> 00:04:06,803
But, there's still something wrong.
72
00:04:06,803 --> 00:04:09,307
The eyes and the mouth
73
00:04:09,871 --> 00:04:12,711
are still going off the face
when we go really small.
74
00:04:12,937 --> 00:04:16,470
The sizes are correct;
the problem is the offset from the face.
75
00:04:18,119 --> 00:04:20,841
What's happening here
is that down here,
76
00:04:21,312 --> 00:04:24,270
when we position the ellipses,
77
00:04:24,714 --> 00:04:31,137
we have x - 50 and y - 50,
and then x + 100 and y - 60,
78
00:04:31,683 --> 00:04:35,578
So even if our face size
is only 50 pixels,
79
00:04:35,931 --> 00:04:40,866
we're still having the eye positioned
at -50 pixels to the center,
80
00:04:41,076 --> 00:04:43,604
which is going to make it off the face.
81
00:04:43,741 --> 00:04:47,770
So, we need for 50 and 100
and all these numbers here
82
00:04:47,895 --> 00:04:51,549
all of these should also be fractions
of the faceSize,
83
00:04:51,549 --> 00:04:56,282
so that when the faceSize changes,
the amount that the eyes are offset
84
00:04:56,282 --> 00:04:57,774
and the mouth is offset,
85
00:04:57,774 --> 00:05:00,642
those numbers should also change.
86
00:05:02,352 --> 00:05:04,969
So, to show you what I mean,
let's do the first eye.
87
00:05:05,209 --> 00:05:08,372
x - 50. So, x - 50 pixels.
88
00:05:08,372 --> 00:05:12,404
This means it should be 50 pixels
to the left of the center of the face.
89
00:05:12,776 --> 00:05:15,201
Well, what we actually want now
is to use the fraction,
90
00:05:15,201 --> 00:05:19,690
so it's going to be faceSize/6.
91
00:05:19,889 --> 00:05:22,370
So, one sixth the size of the face.
92
00:05:22,998 --> 00:05:28,677
Cool. And then 50
will be also faceSize/6.
93
00:05:29,526 --> 00:05:31,354
So, now if we resize,
94
00:05:31,932 --> 00:05:35,466
notice how that eye
is perfectly positioned.
95
00:05:35,907 --> 00:05:38,402
Good eye, Winston! Good eye.
96
00:05:38,898 --> 00:05:41,080
The other eye still needs
some help though.
97
00:05:41,324 --> 00:05:47,932
So 100; that'll be faceSize/3,
so one third the size of the face,
98
00:05:48,287 --> 00:05:53,325
and 60 is one fifth the size of the face,
so faceSize/5.
99
00:05:54,047 --> 00:05:57,187
Great. Let's resize it, very nice.
100
00:05:57,187 --> 00:06:00,325
We still have a problem with our mouth,
101
00:06:00,325 --> 00:06:02,100
so we'll go down to the mouth.
102
00:06:02,305 --> 00:06:06,539
This one is maybe faceSize/6 again,
103
00:06:07,172 --> 00:06:10,490
and this one is about faceSize/7.
104
00:06:11,325 --> 00:06:15,561
All right, now everything is done
proportionally. Let's check it out.
105
00:06:15,561 --> 00:06:18,659
Woo! Now we can make Winston really small,
106
00:06:19,152 --> 00:06:22,491
and his eyes and mouth
are still inside his face!
107
00:06:23,127 --> 00:06:26,688
I'm sure Winston
is really happy about that.
108
00:06:26,816 --> 00:06:28,038
All right! Yay!
109
00:06:28,038 --> 00:06:29,804
So, let's review what we're doing here.
110
00:06:31,376 --> 00:06:33,242
At the top, we have our variables.
111
00:06:33,242 --> 00:06:37,039
We start off with a variable
that's just storing a number: 200.
112
00:06:37,241 --> 00:06:39,996
Then, we make our mouthSize
and eyeSize variables
113
00:06:39,996 --> 00:06:43,248
be dependent on that number
as fractions of that number,
114
00:06:43,347 --> 00:06:45,850
so that if faceSize is currently 200,
115
00:06:45,910 --> 00:06:47,806
then mouthSize will be 100.
116
00:06:47,842 --> 00:06:50,429
But, if we change faceSize to 300,
117
00:06:50,429 --> 00:06:53,429
then mouthSize
would suddenly be 150,
118
00:06:53,733 --> 00:06:55,605
so it's always changing in proportion.
119
00:06:56,647 --> 00:06:59,623
Then, down here,
when we calculate our offsets,
120
00:06:59,623 --> 00:07:01,269
we're also using fractions,
121
00:07:01,269 --> 00:07:06,192
because we want the offsets
to also be changing
122
00:07:06,192 --> 00:07:08,585
proportional to the faceSize.
123
00:07:08,585 --> 00:07:10,448
We basically just want to make it
124
00:07:10,448 --> 00:07:14,981
so we just have this one variable
that affects everything.
125
00:07:14,981 --> 00:07:18,074
We can do that with variables
and variable expressions.
126
00:07:19,889 --> 00:07:21,240
So, now that we understand
127
00:07:21,240 --> 00:07:24,156
how to make variables dependent
on the values of other variables,
128
00:07:24,156 --> 00:07:26,407
we can do way more with our programs.
129
00:07:26,433 --> 00:07:30,469
Let's celebrate
by making Winston huge!
130
00:07:30,469 --> 00:07:33,324
Go Winston, come on,
keep going! Keep going!
131
00:07:33,933 --> 00:07:39,408
Never stop!!
Keep going! Naaaaaa!