Variable Expressions (Video Version)

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

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!