1
00:00:00,000 --> 00:00:02,246
We're back with Winston.

2
00:00:02,417 --> 00:00:05,743
We now have both an x and a y variable for

3
00:00:05,801 --> 00:00:07,257
Winston's position.

4
00:00:07,397 --> 00:00:09,240
So we can move him sideways

5
00:00:10,075 --> 00:00:11,741
Up and down, woo!

6
00:00:12,088 --> 00:00:13,328
Very nice.

7
00:00:13,680 --> 00:00:15,866
Now, let's reset these variables

8
00:00:16,057 --> 00:00:19,227
with 200 and 200

9
00:00:19,315 --> 00:00:21,995
and review how this program works.

10
00:00:22,553 --> 00:00:25,763
So starting here, we've got an eyeSize variable.

11
00:00:25,763 --> 00:00:27,813
It's being used to control the eye size,

12
00:00:27,815 --> 00:00:29,766
because the eyes are all 40 pixels wide

13
00:00:29,766 --> 00:00:32,426
and 40 pixels tall.

14
00:00:32,470 --> 00:00:35,437
And then we have these x and y variables,

15
00:00:35,437 --> 00:00:39,127
and those position the center of the face.

16
00:00:39,843 --> 00:00:41,113
And you can see them used

17
00:00:41,113 --> 00:00:42,729
in this ellipse command here

18
00:00:42,729 --> 00:00:44,579
that draws the big yellow circle.

19
00:00:45,921 --> 00:00:47,422
And then down here,

20
00:00:47,422 --> 00:00:48,617
for the eyes,

21
00:00:48,617 --> 00:00:50,427
the x and y are used again.

22
00:00:50,731 --> 00:00:51,951
And here,

23
00:00:52,009 --> 00:00:53,669
the eyes are positioned

24
00:00:54,048 --> 00:00:55,778
relative to the center of the face.

25
00:00:55,787 --> 00:00:57,877
So maybe this one is

26
00:00:58,026 --> 00:00:58,996
fifty pixels

27
00:00:59,293 --> 00:01:00,933
to the left of the center

28
00:01:01,528 --> 00:01:03,428
and this one is a hundred pixels

29
00:01:03,455 --> 00:01:05,005
to the right of the center.

30
00:01:05,149 --> 00:01:07,829
OK. So pretty cool

31
00:01:07,865 --> 00:01:09,365
and that's why we're able

32
00:01:09,395 --> 00:01:11,195
to move Winston up and down

33
00:01:11,236 --> 00:01:13,192
Now, I want to be able to control

34
00:01:13,212 --> 00:01:15,202
more things about Winston's face

35
00:01:15,202 --> 00:01:16,662
with variables

36
00:01:16,662 --> 00:01:17,912
so I want to figure out

37
00:01:17,912 --> 00:01:19,339
what else in the program

38
00:01:19,339 --> 00:01:20,669
we can store as variables

39
00:01:20,669 --> 00:01:21,449
to do that

40
00:01:21,449 --> 00:01:22,638
I'm going to go through

41
00:01:22,638 --> 00:01:23,608
each line of code

42
00:01:23,622 --> 00:01:25,122
and look for what we call

43
00:01:25,157 --> 00:01:27,447
hard-coded numbers

44
00:01:27,658 --> 00:01:29,308
those are numbers that are

45
00:01:29,388 --> 00:01:30,648
just literal numbers

46
00:01:30,723 --> 00:01:33,413
not variables or dependant on variables

47
00:01:34,277 --> 00:01:35,377
so lets start here

48
00:01:35,432 --> 00:01:37,002
in the first ellipse call

49
00:01:37,832 --> 00:01:39,222
we have 300 and 300

50
00:01:39,262 --> 00:01:41,062
for the width and height

51
00:01:41,584 --> 00:01:43,794
those are just literal numbers

52
00:01:43,794 --> 00:01:45,114
so lets make a variable

53
00:01:45,114 --> 00:01:46,214
for those instead

54
00:01:46,214 --> 00:01:47,754
called faceSize

55
00:01:48,791 --> 00:01:50,291
and have it store 300

56
00:01:50,291 --> 00:01:53,201
now we'll just write faceSize,

57
00:01:53,709 --> 00:01:55,259
faceSize

58
00:01:55,514 --> 00:01:56,794
OK So keep going

59
00:01:56,868 --> 00:01:58,108
and skip colours

60
00:01:58,156 --> 00:02:00,076
now the ellipse commands are either --

61
00:02:00,104 --> 00:02:01,504
they're all variables or

62
00:02:01,544 --> 00:02:02,704
dependant on variables

63
00:02:02,726 --> 00:02:03,896
so I'm going to leave them

64
00:02:03,896 --> 00:02:04,846
like this for now

65
00:02:04,859 --> 00:02:06,729
and then the mouth command

66
00:02:07,419 --> 00:02:09,339
those are dependant on x and y

67
00:02:09,339 --> 00:02:10,369
but these here

68
00:02:10,417 --> 00:02:11,947
are just literal numbers

69
00:02:12,899 --> 00:02:14,669
150 and 150

70
00:02:14,799 --> 00:02:16,139
so we're going to say

71
00:02:16,223 --> 00:02:18,953
mouthSize that's a good name

72
00:02:19,026 --> 00:02:20,476
equals 150

73
00:02:22,464 --> 00:02:25,264
we'll replace this with mouthSize

74
00:02:25,301 --> 00:02:27,481
and mouthSize

75
00:02:27,556 --> 00:02:28,816
alright so now

76
00:02:28,861 --> 00:02:30,751
we have the sizes of the shapes

77
00:02:30,825 --> 00:02:32,725
stored as variables at the top

78
00:02:32,773 --> 00:02:34,543
that means that its really easy

79
00:02:34,543 --> 00:02:36,093
for us to change the sizes

80
00:02:36,103 --> 00:02:36,933
like this like

81
00:02:36,933 --> 00:02:39,163
Wooo Winston's hungry

82
00:02:39,257 --> 00:02:41,157
and then maybe like, you know,

83
00:02:41,157 --> 00:02:42,747
Winston's got hungry and

84
00:02:42,761 --> 00:02:44,291
then he eats lots of donuts

85
00:02:44,291 --> 00:02:45,931
and then he gets super big

86
00:02:45,962 --> 00:02:47,532
alright

87
00:02:47,542 --> 00:02:48,982
but there is something

88
00:02:49,037 --> 00:02:51,347
I don't like about the program right now

89
00:02:51,863 --> 00:02:59,303
So if I make the face size really small

90
00:02:59,404 --> 00:03:01,064
it starts to look funny

91
00:03:01,076 --> 00:03:03,006
because the eyes and the mouth

92
00:03:03,017 --> 00:03:04,667
are sticking out of the face

93
00:03:04,667 --> 00:03:06,717
and at certain points it doesn't even

94
00:03:06,717 --> 00:03:07,887
really look like they're connected

95
00:03:07,887 --> 00:03:08,667
to that face

96
00:03:08,667 --> 00:03:10,707
or its not really a face any more, is it?

97
00:03:11,629 --> 00:03:13,959
So what I really want to happen

98
00:03:13,959 --> 00:03:16,309
is that when I change faceSize

99
00:03:16,309 --> 00:03:18,299
I want the eyes and the mouth --

100
00:03:18,354 --> 00:03:21,584
I want their size to change along with it

101
00:03:21,584 --> 00:03:23,994
so if I make faceSize be half the size

102
00:03:24,144 --> 00:03:27,454
I want the mouth to be half the size too

103
00:03:27,454 --> 00:03:29,044
so that means that

104
00:03:29,519 --> 00:03:32,589
I want to calculate mouthSize and eyeSize

105
00:03:32,589 --> 00:03:35,929
as fractions of faceSize

106
00:03:36,690 --> 00:03:39,790
alright lets reset these variables

107
00:03:39,790 --> 00:03:42,060
and I'll show you what I mean

108
00:03:42,061 --> 00:03:44,221
Let's start with mouthSize

109
00:03:44,221 --> 00:03:45,141
so right now

110
00:03:45,172 --> 00:03:49,512
faceSize is 300 and mouthSize is 150

111
00:03:50,187 --> 00:03:51,727
so if we think of about them

112
00:03:51,727 --> 00:03:53,007
relative to each other

113
00:03:53,007 --> 00:03:55,907
we'd say that faceSize is twice as big

114
00:03:55,907 --> 00:03:57,577
as mouthSize

115
00:03:57,577 --> 00:04:00,137
or that mouthSize is half the size

116
00:04:00,137 --> 00:04:01,357
of faceSize

117
00:04:01,432 --> 00:04:03,872
and we can write that in code like this

118
00:04:04,063 --> 00:04:08,063
one half times faceSize

119
00:04:08,133 --> 00:04:09,703
ok so this line of code says

120
00:04:09,703 --> 00:04:11,873
that we take the value of faceSize

121
00:04:11,873 --> 00:04:13,113
multiply it by a half

122
00:04:13,113 --> 00:04:15,393
and store that in mouthSize

123
00:04:15,674 --> 00:04:17,494
so that if we change this here

124
00:04:18,030 --> 00:04:20,260
it would figure out what half of that was

125
00:04:20,273 --> 00:04:22,353
and that would become mouthSize

126
00:04:22,353 --> 00:04:24,073
Perfect! That's what we want

127
00:04:24,848 --> 00:04:26,948
So now eyeSize

128
00:04:27,268 --> 00:04:28,908
so faceSize is 300

129
00:04:29,168 --> 00:04:31,039
and eyeSize is 40

130
00:04:31,039 --> 00:04:33,219
so we need it to be

131
00:04:33,219 --> 00:04:36,639
40 three hundreths of faceSize

132
00:04:36,639 --> 00:04:39,459
which is really, well lets see

133
00:04:39,459 --> 00:04:41,138
four over 30 which we can

134
00:04:41,138 --> 00:04:43,768
simplify down to two over 15

135
00:04:44,295 --> 00:04:45,605
so we're going to say

136
00:04:45,609 --> 00:04:49,609
two over fifteen times faceSize

137
00:04:50,111 --> 00:04:50,911
by the way

138
00:04:50,949 --> 00:04:52,459
if you're new to fractions

139
00:04:52,459 --> 00:04:54,279
and that math is tricky for you

140
00:04:54,352 --> 00:04:56,422
you can learn more about fractions

141
00:04:56,422 --> 00:04:57,562
on khanacademy

142
00:04:57,562 --> 00:04:59,562
and come back here when you're

143
00:04:59,562 --> 00:05:00,442
feeling ready

144
00:05:00,442 --> 00:05:01,912
here, you just go there

145
00:05:02,752 --> 00:05:03,532
ok

146
00:05:03,532 --> 00:05:06,442
so lets try resizing the face again

147
00:05:06,925 --> 00:05:08,155
Haha! Check it out

148
00:05:08,155 --> 00:05:10,015
the mouth and the eyes resize

149
00:05:10,015 --> 00:05:11,655
proportionally to the face

150
00:05:11,975 --> 00:05:13,495
but you probably noticed

151
00:05:13,495 --> 00:05:14,875
something is wrong

152
00:05:14,875 --> 00:05:16,565
the eyes and the mouth

153
00:05:16,572 --> 00:05:19,162
are still sticking out of the face

154
00:05:19,162 --> 00:05:20,502
even though they are

155
00:05:20,502 --> 00:05:22,612
much more appropriately sized

156
00:05:23,206 --> 00:05:24,906
That is because we still have

157
00:05:24,906 --> 00:05:26,626
some hard-coded numbers

158
00:05:26,626 --> 00:05:28,396
in our ellipse commands

159
00:05:28,396 --> 00:05:30,376
some numbers that should actually

160
00:05:30,376 --> 00:05:32,656
be fractions of variables instead

161
00:05:33,148 --> 00:05:34,578
here, I'll show you

162
00:05:34,669 --> 00:05:37,799
So for the eye ellipse we have

163
00:05:37,799 --> 00:05:40,819
x minus 50 for the x position

164
00:05:40,838 --> 00:05:43,278
so this means it's always x minus 50

165
00:05:43,443 --> 00:05:45,133
even if we make our faceSize

166
00:05:45,133 --> 00:05:46,843
smaller than 50 pixels

167
00:05:46,843 --> 00:05:48,063
and that definitely doesn't make sense

168
00:05:48,063 --> 00:05:49,783
because that means that the left eye

169
00:05:49,783 --> 00:05:50,461
is going to be

170
00:05:50,461 --> 00:05:52,161
not even in the face anymore

171
00:05:52,441 --> 00:05:55,218
so it should be x minus some fraction

172
00:05:55,218 --> 00:05:57,258
the size of our face

173
00:05:57,278 --> 00:05:59,218
and we can figure out the fraction

174
00:05:59,218 --> 00:06:00,148
the same way

175
00:06:00,148 --> 00:06:03,898
50 relative to the original 300

176
00:06:03,898 --> 00:06:07,898
so 50 over 300, five over 30, one over six

177
00:06:08,582 --> 00:06:11,952
so one over six times faceSize

178
00:06:12,440 --> 00:06:14,110
and we see another 50 here

179
00:06:14,400 --> 00:06:16,060
so we can do the same thing

180
00:06:16,060 --> 00:06:17,360
the same expression

181
00:06:17,360 --> 00:06:19,140
here we have 100 over 300

182
00:06:19,460 --> 00:06:20,690
that's going to be

183
00:06:20,710 --> 00:06:23,220
one third times faceSize

184
00:06:23,220 --> 00:06:24,720
this one is 60

185
00:06:24,720 --> 00:06:26,080
so that'll end up being

186
00:06:26,080 --> 00:06:28,897
one fifth times faceSize

187
00:06:29,267 --> 00:06:32,087
and here this is another 50

188
00:06:32,087 --> 00:06:34,457
so its one sixth again

189
00:06:34,457 --> 00:06:35,727
and then 40

190
00:06:35,727 --> 00:06:38,257
that's what we figured out up here

191
00:06:38,257 --> 00:06:39,507
two over 15

192
00:06:39,507 --> 00:06:44,937
so two over 15 times faceSize

193
00:06:45,347 --> 00:06:48,117
alright so lets try again

194
00:06:48,117 --> 00:06:49,477
Oh, look at that!

195
00:06:49,477 --> 00:06:51,257
Look at it. That's beautiful

196
00:06:51,268 --> 00:06:52,048
so good

197
00:06:52,617 --> 00:06:54,587
alright so let's review

198
00:06:54,587 --> 00:06:56,117
We created this variable

199
00:06:56,130 --> 00:06:57,950
that stored the size of the face

200
00:06:57,950 --> 00:06:59,630
and it just stores a number

201
00:06:59,630 --> 00:07:01,510
then we have these mouthSize

202
00:07:01,510 --> 00:07:03,350
and eyeSize variables

203
00:07:03,350 --> 00:07:05,710
and we calculate them based as fractions

204
00:07:05,710 --> 00:07:06,790
of faceSize

205
00:07:06,790 --> 00:07:07,770
to make sure that

206
00:07:07,770 --> 00:07:09,500
their values always changed

207
00:07:09,500 --> 00:07:12,360
based on what we start this one off as

208
00:07:12,514 --> 00:07:15,104
then all of the offsets are calculated

209
00:07:15,104 --> 00:07:16,894
based on faceSize too

210
00:07:16,894 --> 00:07:18,454
to make sure the position

211
00:07:18,454 --> 00:07:19,884
inside the face changes

212
00:07:19,884 --> 00:07:22,064
if faceSize changes

213
00:07:22,064 --> 00:07:23,014
Whoo! Alright.

214
00:07:23,014 --> 00:07:24,614
So now that we really understand

215
00:07:24,614 --> 00:07:25,725
how to make variables

216
00:07:25,725 --> 00:07:27,865
dependant on the values of other variables

217
00:07:27,865 --> 00:07:30,375
we can do so much more with our programmes

218
00:07:30,375 --> 00:07:32,365
let's celebrate by making Winston

219
00:07:32,365 --> 00:07:36,781
Huge! yeah, go Winston!