0:00:01.740,0:00:03.810
So, we already made[br]this super cool variable

0:00:03.810,0:00:06.480
for Winston's eye size,[br]which has been really helpful

0:00:06.480,0:00:08.916
because it saves us a lot of typing[br]when we want to change

0:00:08.916,0:00:10.500
the size of Winston's eyes.

0:00:10.500,0:00:13.393
Remember: before, we had to[br]type the same number <i>four times</i>

0:00:13.393,0:00:15.966
whenever we wanted[br]to change the size of his eyes.

0:00:15.966,0:00:17.809
But, can we use variables[br]to replace numbers

0:00:17.809,0:00:19.212
when they're not all the same?

0:00:19.212,0:00:21.716
Like, what if I wanted to[br]move Winston over a little bit?

0:00:21.716,0:00:23.763
I could change[br]each of these <i>x</i> coordinates,

0:00:23.763,0:00:25.568
but they're not all the same anyways,

0:00:25.568,0:00:27.933
so I can't just replace them all[br]with some variable.

0:00:27.933,0:00:29.139
<i>But wait!</i>

0:00:29.139,0:00:31.825
Once I assign a number to a variable,[br]I can use that variable

0:00:31.825,0:00:33.943
exactly as if it were that number,

0:00:33.943,0:00:37.073
which means I can use variables[br]and math expressions.

0:00:37.073,0:00:39.056
So, how about this:[br]let's make a variable

0:00:39.056,0:00:41.039
for the <i>x</i> position of Winston.

0:00:41.039,0:00:43.024
Call it <i>var x</i>.

0:00:43.024,0:00:45.485
Simple enough.[br]Okay, now let's give it

0:00:45.485,0:00:48.036
the value of the <i>x</i> coordinate[br]of Winston's face.

0:00:48.036,0:00:51.339
His face is being drawn[br]at <i>x</i> coordinate 200.

0:00:51.339,0:00:54.423
So, we're going to say <i>var x</i> gets <i>200</i>.

0:00:55.053,0:00:59.018
Now I can replace this number[br]with my new variable <i>x</i>,

0:00:59.018,0:01:02.480
and when I change the value of <i>x</i>,[br]it moves Winston's face,

0:01:02.480,0:01:04.292
but not his eyes or his mouth.

0:01:04.982,0:01:08.038
So, to fix that, we're going to define

0:01:08.038,0:01:10.415
the position of his eyes and his mouth,

0:01:10.415,0:01:14.082
relative to the position of his face.

0:01:14.082,0:01:16.752
The <i>x</i> coordinates[br]are going to be the centers

0:01:16.752,0:01:20.462
of all the other ellipses,[br]so his face is being drawn at--

0:01:20.462,0:01:24.596
that's 200,[br]and let's do his left eye first.

0:01:24.596,0:01:26.472
So, this ellipse is his left eye,[br]and we can see

0:01:26.472,0:01:29.608
that it's being drawn at 150.

0:01:29.608,0:01:33.075
Right here, that is 150,

0:01:33.075,0:01:37.552
and I know that 150 is 50 less than 200.

0:01:37.552,0:01:42.360
So, his left eye should be[br]wherever his face is, minus 50.

0:01:42.360,0:01:47.660
It's going to be <i>x</i>,[br]which is the position of his face, <i>- 50</i>.

0:01:48.020,0:01:50.082
And now, if I change the value[br]of this <i>x</i> coordinate,

0:01:50.082,0:01:53.254
his eye moves along with his face.

0:01:53.254,0:01:54.616
Let's do the other ones.

0:01:54.616,0:01:57.498
So, his right eye is being drawn at 300,

0:01:57.498,0:02:01.470
I can see, so this over here is 300.

0:02:01.470,0:02:05.754
And 300, I know, is 100 more than 200.

0:02:05.754,0:02:09.902
So, his right eye should be[br]wherever his face is plus 100.

0:02:09.902,0:02:12.535
That's <i>x + 100</i>.

0:02:12.535,0:02:14.181
And now we just have his mouth.

0:02:14.181,0:02:16.857
His mouth is being drawn at 250.

0:02:16.857,0:02:19.396
That's over here, we've got 250,

0:02:19.396,0:02:22.895
and 250 is 200 plus 50.

0:02:22.895,0:02:26.054
So, it's going to be wherever--[br]ooh, that's a 5--

0:02:26.054,0:02:30.983
wherever his face is,[br]<i>x + 50</i>.

0:02:30.983,0:02:33.347
And now--[br]I'm going to get rid of these scribbles--

0:02:33.347,0:02:38.253
whenever I change the value of <i>x</i>,[br]it moves his whole face.

0:02:38.253,0:02:39.579
Yay!

0:02:39.579,0:02:42.792
Now before you go, you should know[br]a couple more things about variables.

0:02:42.792,0:02:45.558
Once you create a variable using <i>var x</i>,

0:02:45.558,0:02:48.395
you can assign a value to it[br]as many times as you want.

0:02:48.395,0:02:51.504
So, after giving <i>x</i> the value of 198,

0:02:51.504,0:02:54.947
I could say <i>x</i> gets <i>300</i>,

0:02:54.947,0:02:59.240
or <i>x</i> gets <i>150</i>.

0:02:59.240,0:03:01.216
And from then on,[br]the computer would treat <i>x</i>

0:03:01.216,0:03:03.432
as if it were[br]whatever we last assigned it.

0:03:03.432,0:03:05.419
So, in this case, 150.

0:03:05.419,0:03:08.235
But, you only need to type <i>var</i>[br]once per variable.

0:03:08.235,0:03:12.510
If, over here, I had typed[br]<i>var x</i> gets <i>150</i> instead,

0:03:12.510,0:03:15.825
that would have made[br]a brand new variable named <i>x</i>,

0:03:15.825,0:03:18.394
completely destroying[br]the old variable <i>x</i> in the process,

0:03:18.394,0:03:21.563
so all these variables[br]are gone, in the dumpster.

0:03:21.563,0:03:24.615
And then, afterwards, the computer[br]would only use the new variable.

0:03:24.615,0:03:28.127
Sometimes you can do this kind of thing[br]without horrible things happening to you,

0:03:28.127,0:03:29.851
but I wouldn't advise it.

0:03:29.851,0:03:33.208
For now, I'm just going to do it once:[br]<i>var x</i> gets <i>150</i>.

0:03:33.208,0:03:37.186
And now, conveniently,[br]I can move all of Winston off the screen,

0:03:37.186,0:03:40.254
so I can talk about my next point.

0:03:40.254,0:03:44.592
Whenever you have[br]a variable equals something,

0:03:44.592,0:03:47.450
that variable is in a happy, safe place.

0:03:47.450,0:03:50.691
In fact, to the left of the equal sign[br]is the only place

0:03:50.691,0:03:53.532
where a variable[br]can truly feel like itself,

0:03:53.532,0:03:55.540
because that is the only place[br]where the computer

0:03:55.540,0:03:57.348
will consider it to be a variable.

0:03:57.348,0:04:00.037
Anywhere else, the computer[br]just pretends it's a value.

0:04:00.037,0:04:02.384
So even if we do something like this:

0:04:02.384,0:04:06.041
<i>var x</i> gets <i>10</i>

0:04:06.041,0:04:10.504
and then <i>x</i> gets <i>x</i>.

0:04:10.504,0:04:11.727
Woo, confusing.

0:04:11.727,0:04:14.572
Well, over on the left,[br]we've got <i>x</i>,

0:04:14.572,0:04:17.497
which is a free-thinking,[br]independent variable;

0:04:17.497,0:04:20.372
one that can <i>grow</i>, can <i>change!</i>

0:04:20.372,0:04:24.997
But, on the right, it's just,[br]well it's just 10.

0:04:24.997,0:04:27.163
So sad![br]But that means

0:04:27.163,0:04:28.939
we can do really useful stuff like this:

0:04:28.939,0:04:33.535
I can say <i>x</i> gets <i>x + 1</i>

0:04:33.535,0:04:37.019
So, on the left, we've got our variable[br]in a happy, safe place,

0:04:37.019,0:04:40.412
and on the right, we have this variable,

0:04:40.412,0:04:42.674
which we know is basically just a number,

0:04:42.674,0:04:44.206
so it's just 10.

0:04:44.206,0:04:47.199
So, we can mentally replace[br]this with <i>x</i> gets 10 plus 1,

0:04:47.199,0:04:51.064
Which just means <i>x</i> gets <i>11</i>.

0:04:51.064,0:04:54.319
So, this whole line is basically[br]just saying <i>x</i> gets <i>11</i>,

0:04:54.319,0:04:57.574
so from now on the value of <i>x</i> is 11.

0:04:57.574,0:05:01.201
Let's see what happens if we[br]bring another variable into the equation.

0:05:01.201,0:05:06.448
I'm going to do <i>var x</i> gets <i>10</i>,

0:05:06.448,0:05:10.473
<i>var y</i> gets <i>20</i>,

0:05:10.473,0:05:12.154
<i>x</i> gets <i>y</i> --

0:05:12.154,0:05:13.835
oh, my god--

0:05:13.835,0:05:17.107
and <i>y</i> gets <i>7</i>.

0:05:17.111,0:05:18.706
Okay, and what I want to know is,

0:05:18.706,0:05:22.103
what is the value of <i>x</i>?

0:05:22.103,0:05:23.531
Let's figure this out.

0:05:23.531,0:05:27.176
So, at this line here,[br]we're making a new variable <i>x</i>,

0:05:27.176,0:05:29.171
and assigning it the value of 10.

0:05:29.171,0:05:31.777
So the value of <i>x</i> is 10.

0:05:31.777,0:05:33.799
At this line, we're making[br]a new variable <i>y</i>,

0:05:33.799,0:05:35.751
and giving it the value of 20.

0:05:35.751,0:05:37.043
We don't do anything to <i>x</i>,

0:05:37.043,0:05:39.345
so the value of <i>x</i> is still 10.

0:05:39.345,0:05:41.986
Over here, we're saying <i>x</i> gets <i>y</i>.

0:05:41.986,0:05:44.407
Well, that's pretty confusing,[br]but if you think about it,

0:05:44.407,0:05:46.210
we know that only one of these variables

0:05:46.210,0:05:48.453
is in the happy, safe place,

0:05:48.453,0:05:50.378
and the other variable is being treated

0:05:50.378,0:05:53.747
exactly as if it were a number.

0:05:53.747,0:05:55.689
So over here, we can mentally replace

0:05:55.689,0:05:57.791
this <i>y</i> with its value, which is 20,

0:05:57.791,0:06:01.765
and we know that what this line[br]really means is <i>x</i> gets <i>20</i>.

0:06:01.772,0:06:05.029
So, the value of <i>x</i> here is 20.

0:06:05.029,0:06:08.825
And then, over here, we've got <i>y</i>[br]in the happy safe place this time,

0:06:08.825,0:06:10.421
but it's not really that confusing,

0:06:10.421,0:06:12.698
because we've just got a number[br]on the other side.

0:06:12.698,0:06:17.424
So, here's the big question:[br]when I change the value of <i>y</i> here,

0:06:17.424,0:06:20.780
does that change the value of <i>x</i> up here?

0:06:20.780,0:06:26.048
And the answer:[br]<i>No! No, no, no, no, no!</i>

0:06:26.048,0:06:28.784
You've got to remember, up here,

0:06:28.784,0:06:31.760
<i>y</i> is just being treated like a number.

0:06:31.760,0:06:34.618
The computer's going to completely ignore[br]that it's a variable,

0:06:34.618,0:06:36.270
forget the fact that it can change,

0:06:36.270,0:06:38.773
and it's just going to say,

0:06:38.773,0:06:42.376
"Oh, <i>y</i>? What you really mean is 20."

0:06:42.376,0:06:44.741
So right here,[br]we're just assigning a number to <i>x</i>,

0:06:44.741,0:06:46.625
we're not assigning a variable.

0:06:46.625,0:06:50.249
We're assigning the value of <i>y</i>,[br]which is 20,

0:06:50.249,0:06:54.034
and that means that[br]the value of <i>x</i> stays 20,

0:06:54.034,0:06:58.369
even after we change the value[br]of this <i>y</i> variable from the last line.

0:06:59.929,0:07:01.670
Phew! <i>Capisce</i>?

0:07:01.670,0:07:05.229
Well, now you guys are[br]total experts on variables.

0:07:05.229,0:07:07.299
Congratulations!