We're back with Winston.
We now have both an x and a y variable for
Winston's position.
So we can move him sideways
Up and down, woo!
Very nice.
Now, let's reset these variables
with 200 and 200
and review how this program works.
So starting here, we've got an eyeSize variable.
It's being used to control the eye size,
because the eyes are all 40 pixels wide
and 40 pixels tall.
And then we have these x and y variables,
and those position the center of the face.
And you can see them used
in this ellipse command here
that draws the big yellow circle.
And then down here,
for the eyes,
the x and y are used again.
And here,
the eyes are positioned
relative to the center of the face.
So maybe this one is
fifty pixels
to the left of the center
and this one is a hundred pixels
to the right of the center.
OK. So pretty cool
and that's why we're able
to move Winston up and down
Now, I want to be able to control
more things about Winston's face
with variables
so I want to figure out
what else in the program
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 literal numbers
not variables or dependant on variables
so lets start here
in the first ellipse call
we have 300 and 300
for the width and height
those are just literal numbers
so lets make a variable
for those instead
called faceSize
and have it store 300
now we'll just write faceSize,
faceSize
OK So keep going
and skip colours
now the ellipse commands are either --
they're all variables or
dependant on variables
so I'm going to leave them
like this for now
and then the mouth command
those are dependant on x and y
but these here
are just literal numbers
150 and 150
so we're going to say
mouthSize that's a good name
equals 150
we'll replace this with mouthSize
and mouthSize
alright so now
we have the sizes of the shapes
stored as variables at the top
that means that its really easy
for us to change the sizes
like this like
Wooo Winston's hungry
and then maybe like, you know,
Winston's got hungry and
then he eats lots of donuts
and then he gets super big
alright
but there is something
I don't like about the program right now
So if I make the face size really small
it starts to look funny
because the eyes and the mouth
are sticking out of the face
and at certain points it doesn't even
really look like they're connected
to that face
or its not really a face any more, is it?
So what I really want to happen
is that when I change faceSize
I want the eyes and the mouth --
I want their size to change along with it
so if I make faceSize be half the size
I want the mouth to be half the size too
so that means that
I want to calculate mouthSize and eyeSize
as fractions of faceSize
alright lets reset these variables
and I'll show you what I mean
Let's start with mouthSize
so right now
faceSize is 300 and mouthSize is 150
so if we think of about them
relative to each other
we'd say that faceSize is twice as big
as mouthSize
or that mouthSize is half the size
of faceSize
and we can write that in code like this
one half times faceSize
ok so this line of code says
that we take the value of faceSize
multiply it by a half
and store that in mouthSize
so that if we change this here
it would figure out what half of that was
and that would become mouthSize
Perfect! That's what we want
So now eyeSize
so faceSize is 300
and eyeSize is 40
so we need it to be
40 three hundreths of faceSize
which is really, well lets see
four over 30 which we can
simplify down to two over 15
so we're going to say
two over fifteen times faceSize
by the way
if you're new to fractions
and that math is tricky for you
you can learn more about fractions
on khanacademy
and come back here when you're
feeling ready
here, you just go there
ok
so lets try resizing the face again
Haha! Check it out
the mouth and the eyes resize
proportionally to the face
but you probably noticed
something is wrong
the eyes and the mouth
are still sticking out of the face
even though they are
much more appropriately sized
That is because we still have
some hard-coded numbers
in our ellipse commands
some numbers that should actually
be fractions of variables instead
here, I'll show you
So for the eye ellipse we have
x minus 50 for the x position
so this means it's always x minus 50
even if we make our faceSize
smaller than 50 pixels
and that definitely doesn't make sense
because that means that the left eye
is going to be
not even in the face anymore
so it should be x minus some fraction
the size of our face
and we can figure out the fraction
the same way
50 relative to the original 300
so 50 over 300, five over 30, one over six
so one over six times faceSize
and we see another 50 here
so we can do the same thing
the same expression
here we have 100 over 300
that's going to be
one third times faceSize
this one is 60
so that'll end up being
one fifth times faceSize
and here this is another 50
so its one sixth again
and then 40
that's what we figured out up here
two over 15
so two over 15 times faceSize
alright so lets try again
Oh, look at that!
Look at it. That's beautiful
so good
alright so let's review
We created this variable
that stored the size of the face
and it just stores a number
then we have these mouthSize
and eyeSize variables
and we calculate them based as fractions
of faceSize
to make sure that
their values always changed
based on what we start this one off as
then all of the offsets are calculated
based on faceSize too
to make sure the position
inside the face changes
if faceSize changes
Whoo! Alright.
So now that we really understand
how to make variables
dependant on the values of other variables
we can do so much more with our programmes
let's celebrate by making Winston
Huge! yeah, go Winston!