Resizing shapes with variable expressions

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!