We're back with Winston,
and now we have both an x and a y variable
for Winston's position.
So, now we can make Winston hop up and down
and have a little Winston party! Wooo!
Very nice.
Let's review what this code does before we keep going.
We have these x and y variables at the top
that store the center position of Winston's face,
which we use in this line here when we make the ellipse for his face.
Then, we position the eyes and the mouth
relative to the center of the face.
So, we subtract or add to x and y in order to make sure that the eyes
are 50 pixels away and 100 pixels away.
For example, the mouth
is 50 pixels to the right of the center of the face,
and 40 pixels below the center of the face.
So, let's go through and see what else we can store as variables.
To do that, I'm going to go through each line of code
and look for what we call hard coded numbers.
Those are numbers that are just straight numbers,
not variables or dependent on variables.
Let's see. In our first ellipse call here,
we have 300 and 300 for the width and height.
So, we can make a variable for these instead, like faceSize.
So, faceSize = 300, and then we can pass faceSize in here,
and right now it would pass 300 as the value.
Cool. Now, let's keep going.
Everything in here is using x or y or eyeSize,
but here for the mouth, we once again have 150
and 150 for the width and height.
So, we can make a mouthSize variable, say mouthSize = 150,
and we'll go pass mouthSize here.
It'll just pass 150 right now,
because that's what the variable is equal to.
OK, so now that we've done that, we can easily change the faceSize here,
and we can easily change the mouthSize, and we can move it like that,
and we can change the eyeSize again.
OK, so that's cool.
But, there's something I don't really like about that,
and that's when I change the faceSize.
I actually want everything else to change relative to the faceSize,
so if I make the faceSize really small like this,
I want his eyes and his mouth to be really small, too.
If I make the faceSize half of its original size,
the eyes and the mouth should also be half of their size.
Otherwise he just looks really silly,
because his eyes and his mouth are way too big for his face.
They're not even connected anymore.
So what we want to do is somehow make these variables,
mouthSize and eyeSize,
be dependent on this variable, faceSize.
So, let's bring it back to what it was.
The way we can do this
is we can make these values be based off the faceSize values.
So, we can say mouthSize = faceSize/2.
We are using a fraction of the face;
we're saying take one half of the face size.
If you're not familiar with fractions,
there's tons of videos on Khan Academy
that you can use to review how fractions work.
All right. Now for eyeSize. It's around faceSize/4.
It's not perfect, but it's pretty good.
Oh, 7. There we go, that's better.
See, if you get the fraction wrong at first,
you can always fix it later.
Just fiddle with that number until something makes sense.
OK, so now if we resize the face again,
see how the eyes and the mouth are actually resizing along with it?
It's pretty cool.
But, there's still something wrong.
The eyes and the mouth
are still going off the face when we go really small.
The sizes are correct; the problem is the offset from the face.
What's happening here is that down here,
when we position the ellipses,
we have x - 50 and y - 50, and then x + 100 and y - 60,
So even if our face size is only 50 pixels,
we're still having the eye positioned at -50 pixels to the center,
which is going to make it off the face.
So, we need for 50 and 100 and all these numbers here
all of these should also be fractions of the faceSize,
so that when the faceSize changes, the amount that the eyes are offset
and the mouth is offset,
those numbers should also change.
So, to show you what I mean, let's do the first eye.
x - 50. So, x - 50 pixels.
This means it should be 50 pixels to the left of the center of the face.
Well, what we actually want now is to use the fraction,
so it's going to be faceSize/6.
So, one sixth the size of the face.
Cool. And then 50 will be also faceSize/6.
So, now if we resize,
notice how that eye is perfectly positioned.
Good eye, Winston! Good eye.
The other eye still needs some help though.
So 100; that'll be faceSize/3, so one third the size of the face,
and 60 is one fifth the size of the face, so faceSize/5.
Great. Let's resize it, very nice.
We still have a problem with our mouth,
so we'll go down to the mouth.
This one is maybe faceSize/6 again,
and this one is about faceSize/7.
All right, now everything is done proportionally. Let's check it out.
Woo! Now we can make Winston really small,
and his eyes and mouth are still inside his face!
I'm sure Winston is really happy about that.
All right! Yay!
So, let's review what we're doing here.
At the top, we have our variables.
We start off with a variable that's just storing a number: 200.
Then, we make our mouthSize and eyeSize variables
be dependent on that number as fractions of that number,
so that if faceSize is currently 200,
then mouthSize will be 100.
But, if we change faceSize to 300,
then mouthSize would suddenly be 150,
so it's always changing in proportion.
Then, down here, when we calculate our offsets,
we're also using fractions,
because we want the offsets to also be changing
proportional to the faceSize.
We basically just want to make it
so we just have this one variable that affects everything.
We can do that with variables and variable expressions.
So, now that we understand
how to make variables dependent on the values of other variables,
we can do way more with our programs.
Let's celebrate by making Winston huge!
Go Winston, come on, keep going! Keep going!
Never stop!! Keep going! Naaaaaa!