1
00:00:01,740 --> 00:00:03,810
So, we already made
this super cool variable

2
00:00:03,810 --> 00:00:06,480
for Winston's eye size,
which has been really helpful

3
00:00:06,480 --> 00:00:08,916
because it saves us a lot of typing
when we want to change

4
00:00:08,916 --> 00:00:10,500
the size of Winston's eyes.

5
00:00:10,500 --> 00:00:13,393
Remember: before, we had to
type the same number <i>four times</i>

6
00:00:13,393 --> 00:00:15,966
whenever we wanted
to change the size of his eyes.

7
00:00:15,966 --> 00:00:17,809
But, can we use variables
to replace numbers

8
00:00:17,809 --> 00:00:19,212
when they're not all the same?

9
00:00:19,212 --> 00:00:21,716
Like, what if I wanted to
move Winston over a little bit?

10
00:00:21,716 --> 00:00:23,763
I could change
each of these <i>x</i> coordinates,

11
00:00:23,763 --> 00:00:25,568
but they're not all the same anyways,

12
00:00:25,568 --> 00:00:27,933
so I can't just replace them all
with some variable.

13
00:00:27,933 --> 00:00:29,139
<i>But wait!</i>

14
00:00:29,139 --> 00:00:31,825
Once I assign a number to a variable,
I can use that variable

15
00:00:31,825 --> 00:00:33,943
exactly as if it were that number,

16
00:00:33,943 --> 00:00:37,073
which means I can use variables
and math expressions.

17
00:00:37,073 --> 00:00:39,056
So, how about this:
let's make a variable

18
00:00:39,056 --> 00:00:41,039
for the <i>x</i> position of Winston.

19
00:00:41,039 --> 00:00:43,024
Call it <i>var x</i>.

20
00:00:43,024 --> 00:00:45,485
Simple enough.
Okay, now let's give it

21
00:00:45,485 --> 00:00:48,036
the value of the <i>x</i> coordinate
of Winston's face.

22
00:00:48,036 --> 00:00:51,339
His face is being drawn
at <i>x</i> coordinate 200.

23
00:00:51,339 --> 00:00:54,423
So, we're going to say <i>var x</i> gets <i>200</i>.

24
00:00:55,053 --> 00:00:59,018
Now I can replace this number
with my new variable <i>x</i>,

25
00:00:59,018 --> 00:01:02,480
and when I change the value of <i>x</i>,
it moves Winston's face,

26
00:01:02,480 --> 00:01:04,292
but not his eyes or his mouth.

27
00:01:04,982 --> 00:01:08,038
So, to fix that, we're going to define

28
00:01:08,038 --> 00:01:10,415
the position of his eyes and his mouth,

29
00:01:10,415 --> 00:01:14,082
relative to the position of his face.

30
00:01:14,082 --> 00:01:16,752
The <i>x</i> coordinates
are going to be the centers

31
00:01:16,752 --> 00:01:20,462
of all the other ellipses,
so his face is being drawn at--

32
00:01:20,462 --> 00:01:24,596
that's 200,
and let's do his left eye first.

33
00:01:24,596 --> 00:01:26,472
So, this ellipse is his left eye,
and we can see

34
00:01:26,472 --> 00:01:29,608
that it's being drawn at 150.

35
00:01:29,608 --> 00:01:33,075
Right here, that is 150,

36
00:01:33,075 --> 00:01:37,552
and I know that 150 is 50 less than 200.

37
00:01:37,552 --> 00:01:42,360
So, his left eye should be
wherever his face is, minus 50.

38
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>.

39
00:01:48,020 --> 00:01:50,082
And now, if I change the value
of this <i>x</i> coordinate,

40
00:01:50,082 --> 00:01:53,254
his eye moves along with his face.

41
00:01:53,254 --> 00:01:54,616
Let's do the other ones.

42
00:01:54,616 --> 00:01:57,498
So, his right eye is being drawn at 300,

43
00:01:57,498 --> 00:02:01,470
I can see, so this over here is 300.

44
00:02:01,470 --> 00:02:05,754
And 300, I know, is 100 more than 200.

45
00:02:05,754 --> 00:02:09,902
So, his right eye should be
wherever his face is plus 100.

46
00:02:09,902 --> 00:02:12,535
That's <i>x + 100</i>.

47
00:02:12,535 --> 00:02:14,181
And now we just have his mouth.

48
00:02:14,181 --> 00:02:16,857
His mouth is being drawn at 250.

49
00:02:16,857 --> 00:02:19,396
That's over here, we've got 250,

50
00:02:19,396 --> 00:02:22,895
and 250 is 200 plus 50.

51
00:02:22,895 --> 00:02:26,054
So, it's going to be wherever--
ooh, that's a 5--

52
00:02:26,054 --> 00:02:30,983
wherever his face is,
<i>x + 50</i>.

53
00:02:30,983 --> 00:02:33,347
And now--
I'm going to get rid of these scribbles--

54
00:02:33,347 --> 00:02:38,253
whenever I change the value of <i>x</i>,
it moves his whole face.

55
00:02:38,253 --> 00:02:39,579
Yay!

56
00:02:39,579 --> 00:02:42,792
Now before you go, you should know
a couple more things about variables.

57
00:02:42,792 --> 00:02:45,558
Once you create a variable using <i>var x</i>,

58
00:02:45,558 --> 00:02:48,395
you can assign a value to it
as many times as you want.

59
00:02:48,395 --> 00:02:51,504
So, after giving <i>x</i> the value of 198,

60
00:02:51,504 --> 00:02:54,947
I could say <i>x</i> gets <i>300</i>,

61
00:02:54,947 --> 00:02:59,240
or <i>x</i> gets <i>150</i>.

62
00:02:59,240 --> 00:03:01,216
And from then on,
the computer would treat <i>x</i>

63
00:03:01,216 --> 00:03:03,432
as if it were
whatever we last assigned it.

64
00:03:03,432 --> 00:03:05,419
So, in this case, 150.

65
00:03:05,419 --> 00:03:08,235
But, you only need to type <i>var</i>
once per variable.

66
00:03:08,235 --> 00:03:12,510
If, over here, I had typed
<i>var x</i> gets <i>150</i> instead,

67
00:03:12,510 --> 00:03:15,825
that would have made
a brand new variable named <i>x</i>,

68
00:03:15,825 --> 00:03:18,394
completely destroying
the old variable <i>x</i> in the process,

69
00:03:18,394 --> 00:03:21,563
so all these variables
are gone, in the dumpster.

70
00:03:21,563 --> 00:03:24,615
And then, afterwards, the computer
would only use the new variable.

71
00:03:24,615 --> 00:03:28,127
Sometimes you can do this kind of thing
without horrible things happening to you,

72
00:03:28,127 --> 00:03:29,851
but I wouldn't advise it.

73
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>.

74
00:03:33,208 --> 00:03:37,186
And now, conveniently,
I can move all of Winston off the screen,

75
00:03:37,186 --> 00:03:40,254
so I can talk about my next point.

76
00:03:40,254 --> 00:03:44,592
Whenever you have
a variable equals something,

77
00:03:44,592 --> 00:03:47,450
that variable is in a happy, safe place.

78
00:03:47,450 --> 00:03:50,691
In fact, to the left of the equal sign
is the only place

79
00:03:50,691 --> 00:03:53,532
where a variable
can truly feel like itself,

80
00:03:53,532 --> 00:03:55,540
because that is the only place
where the computer

81
00:03:55,540 --> 00:03:57,348
will consider it to be a variable.

82
00:03:57,348 --> 00:04:00,037
Anywhere else, the computer
just pretends it's a value.

83
00:04:00,037 --> 00:04:02,384
So even if we do something like this:

84
00:04:02,384 --> 00:04:06,041
<i>var x</i> gets <i>10</i>

85
00:04:06,041 --> 00:04:10,504
and then <i>x</i> gets <i>x</i>.

86
00:04:10,504 --> 00:04:11,727
Woo, confusing.

87
00:04:11,727 --> 00:04:14,572
Well, over on the left,
we've got <i>x</i>,

88
00:04:14,572 --> 00:04:17,497
which is a free-thinking,
independent variable;

89
00:04:17,497 --> 00:04:20,372
one that can <i>grow</i>, can <i>change!</i>

90
00:04:20,372 --> 00:04:24,997
But, on the right, it's just,
well it's just 10.

91
00:04:24,997 --> 00:04:27,163
So sad!
But that means

92
00:04:27,163 --> 00:04:28,939
we can do really useful stuff like this:

93
00:04:28,939 --> 00:04:33,535
I can say <i>x</i> gets <i>x + 1</i>

94
00:04:33,535 --> 00:04:37,019
So, on the left, we've got our variable
in a happy, safe place,

95
00:04:37,019 --> 00:04:40,412
and on the right, we have this variable,

96
00:04:40,412 --> 00:04:42,674
which we know is basically just a number,

97
00:04:42,674 --> 00:04:44,206
so it's just 10.

98
00:04:44,206 --> 00:04:47,199
So, we can mentally replace
this with <i>x</i> gets 10 plus 1,

99
00:04:47,199 --> 00:04:51,064
Which just means <i>x</i> gets <i>11</i>.

100
00:04:51,064 --> 00:04:54,319
So, this whole line is basically
just saying <i>x</i> gets <i>11</i>,

101
00:04:54,319 --> 00:04:57,574
so from now on the value of <i>x</i> is 11.

102
00:04:57,574 --> 00:05:01,201
Let's see what happens if we
bring another variable into the equation.

103
00:05:01,201 --> 00:05:06,448
I'm going to do <i>var x</i> gets <i>10</i>,

104
00:05:06,448 --> 00:05:10,473
<i>var y</i> gets <i>20</i>,

105
00:05:10,473 --> 00:05:12,154
<i>x</i> gets <i>y</i> --

106
00:05:12,154 --> 00:05:13,835
oh, my god--

107
00:05:13,835 --> 00:05:17,107
and <i>y</i> gets <i>7</i>.

108
00:05:17,111 --> 00:05:18,706
Okay, and what I want to know is,

109
00:05:18,706 --> 00:05:22,103
what is the value of <i>x</i>?

110
00:05:22,103 --> 00:05:23,531
Let's figure this out.

111
00:05:23,531 --> 00:05:27,176
So, at this line here,
we're making a new variable <i>x</i>,

112
00:05:27,176 --> 00:05:29,171
and assigning it the value of 10.

113
00:05:29,171 --> 00:05:31,777
So the value of <i>x</i> is 10.

114
00:05:31,777 --> 00:05:33,799
At this line, we're making
a new variable <i>y</i>,

115
00:05:33,799 --> 00:05:35,751
and giving it the value of 20.

116
00:05:35,751 --> 00:05:37,043
We don't do anything to <i>x</i>,

117
00:05:37,043 --> 00:05:39,345
so the value of <i>x</i> is still 10.

118
00:05:39,345 --> 00:05:41,986
Over here, we're saying <i>x</i> gets <i>y</i>.

119
00:05:41,986 --> 00:05:44,407
Well, that's pretty confusing,
but if you think about it,

120
00:05:44,407 --> 00:05:46,210
we know that only one of these variables

121
00:05:46,210 --> 00:05:48,453
is in the happy, safe place,

122
00:05:48,453 --> 00:05:50,378
and the other variable is being treated

123
00:05:50,378 --> 00:05:53,747
exactly as if it were a number.

124
00:05:53,747 --> 00:05:55,689
So over here, we can mentally replace

125
00:05:55,689 --> 00:05:57,791
this <i>y</i> with its value, which is 20,

126
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>.

127
00:06:01,772 --> 00:06:05,029
So, the value of <i>x</i> here is 20.

128
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,

129
00:06:08,825 --> 00:06:10,421
but it's not really that confusing,

130
00:06:10,421 --> 00:06:12,698
because we've just got a number
on the other side.

131
00:06:12,698 --> 00:06:17,424
So, here's the big question:
when I change the value of <i>y</i> here,

132
00:06:17,424 --> 00:06:20,780
does that change the value of <i>x</i> up here?

133
00:06:20,780 --> 00:06:26,048
And the answer:
<i>No! No, no, no, no, no!</i>

134
00:06:26,048 --> 00:06:28,784
You've got to remember, up here,

135
00:06:28,784 --> 00:06:31,760
<i>y</i> is just being treated like a number.

136
00:06:31,760 --> 00:06:34,618
The computer's going to completely ignore
that it's a variable,

137
00:06:34,618 --> 00:06:36,270
forget the fact that it can change,

138
00:06:36,270 --> 00:06:38,773
and it's just going to say,

139
00:06:38,773 --> 00:06:42,376
"Oh, <i>y</i>? What you really mean is 20."

140
00:06:42,376 --> 00:06:44,741
So right here,
we're just assigning a number to <i>x</i>,

141
00:06:44,741 --> 00:06:46,625
we're not assigning a variable.

142
00:06:46,625 --> 00:06:50,249
We're assigning the value of <i>y</i>,
which is 20,

143
00:06:50,249 --> 00:06:54,034
and that means that
the value of <i>x</i> stays 20,

144
00:06:54,034 --> 00:06:58,369
even after we change the value
of this <i>y</i> variable from the last line.

145
00:06:59,929 --> 00:07:01,670
Phew! <i>Capisce</i>?

146
00:07:01,670 --> 00:07:05,229
Well, now you guys are
total experts on variables.

147
00:07:05,229 --> 00:07:07,299
Congratulations!