So, we already made this super cool variable
for Winston's eye size, which has been really helpful
because it saves us a lot of typing when we want to change
the size of Winston's eyes.
Remember: before, we had to type the same number four times
whenever we wanted to change the size of his eyes.
But, can we use variables to replace numbers
when they're not all the same?
Like, what if I wanted to move Winston over a little bit?
I could change each of these x coordinates,
but they're not all the same anyways,
so I can't just replace them all with some variable.
But wait!
Once I assign a number to a variable, I can use that variable
exactly as if it were that number,
which means I can use variables and math expressions.
So, how about this: let's make a variable
for the x position of Winston.
Call it var x.
Simple enough. Okay, now let's give it
the value of the x coordinate of Winston's face.
His face is being drawn at x coordinate 200.
So, we're going to say var x gets 200.
Now I can replace this number with my new variable x,
and when I change the value of x, it moves Winston's face,
but not his eyes or his mouth.
So, to fix that, we're going to define
the position of his eyes and his mouth,
relative to the position of his face.
The x coordinates are going to be the centers
of all the other ellipses, so his face is being drawn at--
that's 200, and let's do his left eye first.
So, this ellipse is his left eye, and we can see
that it's being drawn at 150.
Right here, that is 150,
and I know that 150 is 50 less than 200.
So, his left eye should be wherever his face is, minus 50.
It's going to be x, which is the position of his face, - 50.
And now, if I change the value of this x coordinate,
his eye moves along with his face.
Let's do the other ones.
So, his right eye is being drawn at 300,
I can see, so this over here is 300.
And 300, I know, is 100 more than 200.
So, his right eye should be wherever his face is plus 100.
That's x + 100.
And now we just have his mouth.
His mouth is being drawn at 250.
That's over here, we've got 250,
and 250 is 200 plus 50.
So, it's going to be wherever-- ooh, that's a 5--
wherever his face is, x + 50.
And now-- I'm going to get rid of these scribbles--
whenever I change the value of x, it moves his whole face.
Yay!
Now before you go, you should know a couple more things about variables.
Once you create a variable using var x,
you can assign a value to it as many times as you want.
So, after giving x the value of 198,
I could say x gets 300,
or x gets 150.
And from then on, the computer would treat x
as if it were whatever we last assigned it.
So, in this case, 150.
But, you only need to type var once per variable.
If, over here, I had typed var x gets 150 instead,
that would have made a brand new variable named x,
completely destroying the old variable x in the process,
so all these variables are gone, in the dumpster.
And then, afterwards, the computer would only use the new variable.
Sometimes you can do this kind of thing without horrible things happening to you,
but I wouldn't advise it.
For now, I'm just going to do it once: var x gets 150.
And now, conveniently, I can move all of Winston off the screen,
so I can talk about my next point.
Whenever you have a variable equals something,
that variable is in a happy, safe place.
In fact, to the left of the equal sign is the only place
where a variable can truly feel like itself,
because that is the only place where the computer
will consider it to be a variable.
Anywhere else, the computer just pretends it's a value.
So even if we do something like this:
var x gets 10
and then x gets x.
Woo, confusing.
Well, over on the left, we've got x,
which is a free-thinking, independent variable;
one that can grow, can change!
But, on the right, it's just, well it's just 10.
So sad! But that means
we can do really useful stuff like this:
I can say x gets x + 1
So, on the left, we've got our variable in a happy, safe place,
and on the right, we have this variable,
which we know is basically just a number,
so it's just 10.
So, we can mentally replace this with x gets 10 plus 1,
Which just means x gets 11.
So, this whole line is basically just saying x gets 11,
so from now on the value of x is 11.
Let's see what happens if we bring another variable into the equation.
I'm going to do var x gets 10,
var y gets 20,
x gets y --
oh, my god--
and y gets 7.
Okay, and what I want to know is,
what is the value of x?
Let's figure this out.
So, at this line here, we're making a new variable x,
and assigning it the value of 10.
So the value of x is 10.
At this line, we're making a new variable y,
and giving it the value of 20.
We don't do anything to x,
so the value of x is still 10.
Over here, we're saying x gets y.
Well, that's pretty confusing, but if you think about it,
we know that only one of these variables
is in the happy, safe place,
and the other variable is being treated
exactly as if it were a number.
So over here, we can mentally replace
this y with its value, which is 20,
and we know that what this line really means is x gets 20.
So, the value of x here is 20.
And then, over here, we've got y in the happy safe place this time,
but it's not really that confusing,
because we've just got a number on the other side.
So, here's the big question: when I change the value of y here,
does that change the value of x up here?
And the answer: No! No, no, no, no, no!
You've got to remember, up here,
y is just being treated like a number.
The computer's going to completely ignore that it's a variable,
forget the fact that it can change,
and it's just going to say,
"Oh, y? What you really mean is 20."
So right here, we're just assigning a number to x,
we're not assigning a variable.
We're assigning the value of y, which is 20,
and that means that the value of x stays 20,
even after we change the value of this y variable from the last line.
Phew! Capisce?
Well, now you guys are total experts on variables.
Congratulations!