WEBVTT

00:00:01.740 --> 00:00:03.810
So, we already made
this super cool variable

00:00:03.810 --> 00:00:06.480
for Winston's eye size,
which has been really helpful

00:00:06.480 --> 00:00:08.916
because it saves us a lot of typing
when we want to change

00:00:08.916 --> 00:00:10.500
the size of Winston's eyes.

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

00:00:13.393 --> 00:00:15.966
whenever we wanted
to change the size of his eyes.

00:00:15.966 --> 00:00:17.809
But, can we use variables
to replace numbers

00:00:17.809 --> 00:00:19.212
when they're not all the same?

00:00:19.212 --> 00:00:21.716
Like, what if I wanted to
move Winston over a little bit?

00:00:21.716 --> 00:00:23.763
I could change
each of these <i>x</i> coordinates,

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

00:00:25.568 --> 00:00:27.933
so I can't just replace them all
with some variable.

00:00:27.933 --> 00:00:29.139
<i>But wait!</i>

00:00:29.139 --> 00:00:31.825
Once I assign a number to a variable,
I can use that variable

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

00:00:33.943 --> 00:00:37.073
which means I can use variables
and math expressions.

00:00:37.073 --> 00:00:39.056
So, how about this:
let's make a variable

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

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

00:00:43.024 --> 00:00:45.485
Simple enough.
Okay, now let's give it

00:00:45.485 --> 00:00:48.036
the value of the <i>x</i> coordinate
of Winston's face.

00:00:48.036 --> 00:00:51.339
His face is being drawn
at <i>x</i> coordinate 200.

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

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

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

00:01:02.480 --> 00:01:04.292
but not his eyes or his mouth.

00:01:04.982 --> 00:01:08.038
So, to fix that, we're going to define

00:01:08.038 --> 00:01:10.415
the position of his eyes and his mouth,

00:01:10.415 --> 00:01:14.082
relative to the position of his face.

00:01:14.082 --> 00:01:16.752
The <i>x</i> coordinates
are going to be the centers

00:01:16.752 --> 00:01:20.462
of all the other ellipses,
so his face is being drawn at--

00:01:20.462 --> 00:01:24.596
that's 200,
and let's do his left eye first.

00:01:24.596 --> 00:01:26.472
So, this ellipse is his left eye,
and we can see

00:01:26.472 --> 00:01:29.608
that it's being drawn at 150.

00:01:29.608 --> 00:01:33.075
Right here, that is 150,

00:01:33.075 --> 00:01:37.552
and I know that 150 is 50 less than 200.

00:01:37.552 --> 00:01:42.360
So, his left eye should be
wherever his face is, minus 50.

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

00:01:48.020 --> 00:01:50.082
And now, if I change the value
of this <i>x</i> coordinate,

00:01:50.082 --> 00:01:53.254
his eye moves along with his face.

00:01:53.254 --> 00:01:54.616
Let's do the other ones.

00:01:54.616 --> 00:01:57.498
So, his right eye is being drawn at 300,

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

00:02:01.470 --> 00:02:05.754
And 300, I know, is 100 more than 200.

00:02:05.754 --> 00:02:09.902
So, his right eye should be
wherever his face is plus 100.

00:02:09.902 --> 00:02:12.535
That's <i>x + 100</i>.

00:02:12.535 --> 00:02:14.181
And now we just have his mouth.

00:02:14.181 --> 00:02:16.857
His mouth is being drawn at 250.

00:02:16.857 --> 00:02:19.396
That's over here, we've got 250,

00:02:19.396 --> 00:02:22.895
and 250 is 200 plus 50.

00:02:22.895 --> 00:02:26.054
So, it's going to be wherever--
ooh, that's a 5--

00:02:26.054 --> 00:02:30.983
wherever his face is,
<i>x + 50</i>.

00:02:30.983 --> 00:02:33.347
And now--
I'm going to get rid of these scribbles--

00:02:33.347 --> 00:02:38.253
whenever I change the value of <i>x</i>,
it moves his whole face.

00:02:38.253 --> 00:02:39.579
Yay!

00:02:39.579 --> 00:02:42.792
Now before you go, you should know
a couple more things about variables.

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

00:02:45.558 --> 00:02:48.395
you can assign a value to it
as many times as you want.

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

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

00:02:54.947 --> 00:02:59.240
or <i>x</i> gets <i>150</i>.

00:02:59.240 --> 00:03:01.216
And from then on,
the computer would treat <i>x</i>

00:03:01.216 --> 00:03:03.432
as if it were
whatever we last assigned it.

00:03:03.432 --> 00:03:05.419
So, in this case, 150.

00:03:05.419 --> 00:03:08.235
But, you only need to type <i>var</i>
once per variable.

00:03:08.235 --> 00:03:12.510
If, over here, I had typed
<i>var x</i> gets <i>150</i> instead,

00:03:12.510 --> 00:03:15.825
that would have made
a brand new variable named <i>x</i>,

00:03:15.825 --> 00:03:18.394
completely destroying
the old variable <i>x</i> in the process,

00:03:18.394 --> 00:03:21.563
so all these variables
are gone, in the dumpster.

00:03:21.563 --> 00:03:24.615
And then, afterwards, the computer
would only use the new variable.

00:03:24.615 --> 00:03:28.127
Sometimes you can do this kind of thing
without horrible things happening to you,

00:03:28.127 --> 00:03:29.851
but I wouldn't advise it.

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

00:03:33.208 --> 00:03:37.186
And now, conveniently,
I can move all of Winston off the screen,

00:03:37.186 --> 00:03:40.254
so I can talk about my next point.

00:03:40.254 --> 00:03:44.592
Whenever you have
a variable equals something,

00:03:44.592 --> 00:03:47.450
that variable is in a happy, safe place.

00:03:47.450 --> 00:03:50.691
In fact, to the left of the equal sign
is the only place

00:03:50.691 --> 00:03:53.532
where a variable
can truly feel like itself,

00:03:53.532 --> 00:03:55.540
because that is the only place
where the computer

00:03:55.540 --> 00:03:57.348
will consider it to be a variable.

00:03:57.348 --> 00:04:00.037
Anywhere else, the computer
just pretends it's a value.

00:04:00.037 --> 00:04:02.384
So even if we do something like this:

00:04:02.384 --> 00:04:06.041
<i>var x</i> gets <i>10</i>

00:04:06.041 --> 00:04:10.504
and then <i>x</i> gets <i>x</i>.

00:04:10.504 --> 00:04:11.727
Woo, confusing.

00:04:11.727 --> 00:04:14.572
Well, over on the left,
we've got <i>x</i>,

00:04:14.572 --> 00:04:17.497
which is a free-thinking,
independent variable;

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

00:04:20.372 --> 00:04:24.997
But, on the right, it's just,
well it's just 10.

00:04:24.997 --> 00:04:27.163
So sad!
But that means

00:04:27.163 --> 00:04:28.939
we can do really useful stuff like this:

00:04:28.939 --> 00:04:33.535
I can say <i>x</i> gets <i>x + 1</i>

00:04:33.535 --> 00:04:37.019
So, on the left, we've got our variable
in a happy, safe place,

00:04:37.019 --> 00:04:40.412
and on the right, we have this variable,

00:04:40.412 --> 00:04:42.674
which we know is basically just a number,

00:04:42.674 --> 00:04:44.206
so it's just 10.

00:04:44.206 --> 00:04:47.199
So, we can mentally replace
this with <i>x</i> gets 10 plus 1,

00:04:47.199 --> 00:04:51.064
Which just means <i>x</i> gets <i>11</i>.

00:04:51.064 --> 00:04:54.319
So, this whole line is basically
just saying <i>x</i> gets <i>11</i>,

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

00:04:57.574 --> 00:05:01.201
Let's see what happens if we
bring another variable into the equation.

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

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

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

00:05:12.154 --> 00:05:13.835
oh, my god--

00:05:13.835 --> 00:05:17.107
and <i>y</i> gets <i>7</i>.

00:05:17.111 --> 00:05:18.706
Okay, and what I want to know is,

00:05:18.706 --> 00:05:22.103
what is the value of <i>x</i>?

00:05:22.103 --> 00:05:23.531
Let's figure this out.

00:05:23.531 --> 00:05:27.176
So, at this line here,
we're making a new variable <i>x</i>,

00:05:27.176 --> 00:05:29.171
and assigning it the value of 10.

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

00:05:31.777 --> 00:05:33.799
At this line, we're making
a new variable <i>y</i>,

00:05:33.799 --> 00:05:35.751
and giving it the value of 20.

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

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

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

00:05:41.986 --> 00:05:44.407
Well, that's pretty confusing,
but if you think about it,

00:05:44.407 --> 00:05:46.210
we know that only one of these variables

00:05:46.210 --> 00:05:48.453
is in the happy, safe place,

00:05:48.453 --> 00:05:50.378
and the other variable is being treated

00:05:50.378 --> 00:05:53.747
exactly as if it were a number.

00:05:53.747 --> 00:05:55.689
So over here, we can mentally replace

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

00:05:57.791 --> 00:06:01.765
and we know that what this line
really means is <i>x</i> gets <i>20</i>.

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

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

00:06:08.825 --> 00:06:10.421
but it's not really that confusing,

00:06:10.421 --> 00:06:12.698
because we've just got a number
on the other side.

00:06:12.698 --> 00:06:17.424
So, here's the big question:
when I change the value of <i>y</i> here,

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

00:06:20.780 --> 00:06:26.048
And the answer:
<i>No! No, no, no, no, no!</i>

00:06:26.048 --> 00:06:28.784
You've got to remember, up here,

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

00:06:31.760 --> 00:06:34.618
The computer's going to completely ignore
that it's a variable,

00:06:34.618 --> 00:06:36.270
forget the fact that it can change,

00:06:36.270 --> 00:06:38.773
and it's just going to say,

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

00:06:42.376 --> 00:06:44.741
So right here,
we're just assigning a number to <i>x</i>,

00:06:44.741 --> 00:06:46.625
we're not assigning a variable.

00:06:46.625 --> 00:06:50.249
We're assigning the value of <i>y</i>,
which is 20,

00:06:50.249 --> 00:06:54.034
and that means that
the value of <i>x</i> stays 20,

00:06:54.034 --> 00:06:58.369
even after we change the value
of this <i>y</i> variable from the last line.

00:06:59.929 --> 00:07:01.670
Phew! <i>Capisce</i>?

00:07:01.670 --> 00:07:05.229
Well, now you guys are
total experts on variables.

00:07:05.229 --> 00:07:07.299
Congratulations!