0:00:00.000,0:00:02.246
We're back with Winston.

0:00:02.417,0:00:05.743
We now have both an x and a y variable for

0:00:05.801,0:00:07.257
Winston's position.

0:00:07.397,0:00:09.240
So we can move him sideways

0:00:10.075,0:00:11.741
Up and down, woo!

0:00:12.088,0:00:13.328
Very nice.

0:00:13.680,0:00:15.866
Now, let's reset these variables

0:00:16.057,0:00:19.227
with 200 and 200

0:00:19.315,0:00:21.995
and review how this program works.

0:00:22.553,0:00:25.763
So starting here, we've got an eyeSize variable.

0:00:25.763,0:00:27.813
It's being used to control the eye size,

0:00:27.815,0:00:29.766
because the eyes are all 40 pixels wide

0:00:29.766,0:00:32.426
and 40 pixels tall.

0:00:32.470,0:00:35.437
And then we have these x and y variables,

0:00:35.437,0:00:39.127
and those position the center of the face.

0:00:39.843,0:00:41.113
And you can see them used

0:00:41.113,0:00:42.729
in this ellipse command here

0:00:42.729,0:00:44.579
that draws the big yellow circle.

0:00:45.921,0:00:47.422
And then down here,

0:00:47.422,0:00:48.617
for the eyes,

0:00:48.617,0:00:50.427
the x and y are used again.

0:00:50.731,0:00:51.951
And here,

0:00:52.009,0:00:53.669
the eyes are positioned

0:00:54.048,0:00:55.778
relative to the center of the face.

0:00:55.787,0:00:57.877
So maybe this one is

0:00:58.026,0:00:58.996
fifty pixels

0:00:59.293,0:01:00.933
to the left of the center

0:01:01.528,0:01:03.428
and this one is a hundred pixels

0:01:03.455,0:01:05.005
to the right of the center.

0:01:05.149,0:01:07.829
OK. So pretty cool

0:01:07.865,0:01:09.365
and that's why we're able

0:01:09.395,0:01:11.195
to move Winston up and down

0:01:11.236,0:01:13.192
Now, I want to be able to control

0:01:13.212,0:01:15.202
more things about Winston's face

0:01:15.202,0:01:16.662
with variables

0:01:16.662,0:01:17.912
so I want to figure out

0:01:17.912,0:01:19.339
what else in the program

0:01:19.339,0:01:20.669
we can store as variables

0:01:20.669,0:01:21.449
to do that

0:01:21.449,0:01:22.638
I'm going to go through

0:01:22.638,0:01:23.608
each line of code

0:01:23.622,0:01:25.122
and look for what we call

0:01:25.157,0:01:27.447
hard-coded numbers

0:01:27.658,0:01:29.308
those are numbers that are

0:01:29.388,0:01:30.648
just literal numbers

0:01:30.723,0:01:33.413
not variables or dependant on variables

0:01:34.277,0:01:35.377
so lets start here

0:01:35.432,0:01:37.002
in the first ellipse call

0:01:37.832,0:01:39.222
we have 300 and 300

0:01:39.262,0:01:41.062
for the width and height

0:01:41.584,0:01:43.794
those are just literal numbers

0:01:43.794,0:01:45.114
so lets make a variable

0:01:45.114,0:01:46.214
for those instead

0:01:46.214,0:01:47.754
called faceSize

0:01:48.791,0:01:50.291
and have it store 300

0:01:50.291,0:01:53.201
now we'll just write faceSize,

0:01:53.709,0:01:55.259
faceSize

0:01:55.514,0:01:56.794
OK So keep going

0:01:56.868,0:01:58.108
and skip colours

0:01:58.156,0:02:00.076
now the ellipse commands are either --

0:02:00.104,0:02:01.504
they're all variables or

0:02:01.544,0:02:02.704
dependant on variables

0:02:02.726,0:02:03.896
so I'm going to leave them

0:02:03.896,0:02:04.846
like this for now

0:02:04.859,0:02:06.729
and then the mouth command

0:02:07.419,0:02:09.339
those are dependant on x and y

0:02:09.339,0:02:10.369
but these here

0:02:10.417,0:02:11.947
are just literal numbers

0:02:12.899,0:02:14.669
150 and 150

0:02:14.799,0:02:16.139
so we're going to say

0:02:16.223,0:02:18.953
mouthSize that's a good name

0:02:19.026,0:02:20.476
equals 150

0:02:22.464,0:02:25.264
we'll replace this with mouthSize

0:02:25.301,0:02:27.481
and mouthSize

0:02:27.556,0:02:28.816
alright so now

0:02:28.861,0:02:30.751
we have the sizes of the shapes

0:02:30.825,0:02:32.725
stored as variables at the top

0:02:32.773,0:02:34.543
that means that its really easy

0:02:34.543,0:02:36.093
for us to change the sizes

0:02:36.103,0:02:36.933
like this like

0:02:36.933,0:02:39.163
Wooo Winston's hungry

0:02:39.257,0:02:41.157
and then maybe like, you know,

0:02:41.157,0:02:42.747
Winston's got hungry and

0:02:42.761,0:02:44.291
then he eats lots of donuts

0:02:44.291,0:02:45.931
and then he gets super big

0:02:45.962,0:02:47.532
alright

0:02:47.542,0:02:48.982
but there is something

0:02:49.037,0:02:51.347
I don't like about the program right now

0:02:51.863,0:02:59.303
So if I make the face size really small

0:02:59.404,0:03:01.064
it starts to look funny

0:03:01.076,0:03:03.006
because the eyes and the mouth

0:03:03.017,0:03:04.667
are sticking out of the face

0:03:04.667,0:03:06.717
and at certain points it doesn't even

0:03:06.717,0:03:07.887
really look like they're connected

0:03:07.887,0:03:08.667
to that face

0:03:08.667,0:03:10.707
or its not really a face any more, is it?

0:03:11.629,0:03:13.959
So what I really want to happen

0:03:13.959,0:03:16.309
is that when I change faceSize

0:03:16.309,0:03:18.299
I want the eyes and the mouth --

0:03:18.354,0:03:21.584
I want their size to change along with it

0:03:21.584,0:03:23.994
so if I make faceSize be half the size

0:03:24.144,0:03:27.454
I want the mouth to be half the size too

0:03:27.454,0:03:29.044
so that means that

0:03:29.519,0:03:32.589
I want to calculate mouthSize and eyeSize

0:03:32.589,0:03:35.929
as fractions of faceSize

0:03:36.690,0:03:39.790
alright lets reset these variables

0:03:39.790,0:03:42.060
and I'll show you what I mean

0:03:42.061,0:03:44.221
Let's start with mouthSize

0:03:44.221,0:03:45.141
so right now

0:03:45.172,0:03:49.512
faceSize is 300 and mouthSize is 150

0:03:50.187,0:03:51.727
so if we think of about them

0:03:51.727,0:03:53.007
relative to each other

0:03:53.007,0:03:55.907
we'd say that faceSize is twice as big

0:03:55.907,0:03:57.577
as mouthSize

0:03:57.577,0:04:00.137
or that mouthSize is half the size

0:04:00.137,0:04:01.357
of faceSize

0:04:01.432,0:04:03.872
and we can write that in code like this

0:04:04.063,0:04:08.063
one half times faceSize

0:04:08.133,0:04:09.703
ok so this line of code says

0:04:09.703,0:04:11.873
that we take the value of faceSize

0:04:11.873,0:04:13.113
multiply it by a half

0:04:13.113,0:04:15.393
and store that in mouthSize

0:04:15.674,0:04:17.494
so that if we change this here

0:04:18.030,0:04:20.260
it would figure out what half of that was

0:04:20.273,0:04:22.353
and that would become mouthSize

0:04:22.353,0:04:24.073
Perfect! That's what we want

0:04:24.848,0:04:26.948
So now eyeSize

0:04:27.268,0:04:28.908
so faceSize is 300

0:04:29.168,0:04:31.039
and eyeSize is 40

0:04:31.039,0:04:33.219
so we need it to be

0:04:33.219,0:04:36.639
40 three hundreths of faceSize

0:04:36.639,0:04:39.459
which is really, well lets see

0:04:39.459,0:04:41.138
four over 30 which we can

0:04:41.138,0:04:43.768
simplify down to two over 15

0:04:44.295,0:04:45.605
so we're going to say

0:04:45.609,0:04:49.609
two over fifteen times faceSize

0:04:50.111,0:04:50.911
by the way

0:04:50.949,0:04:52.459
if you're new to fractions

0:04:52.459,0:04:54.279
and that math is tricky for you

0:04:54.352,0:04:56.422
you can learn more about fractions

0:04:56.422,0:04:57.562
on khanacademy

0:04:57.562,0:04:59.562
and come back here when you're

0:04:59.562,0:05:00.442
feeling ready

0:05:00.442,0:05:01.912
here, you just go there

0:05:02.752,0:05:03.532
ok

0:05:03.532,0:05:06.442
so lets try resizing the face again

0:05:06.925,0:05:08.155
Haha! Check it out

0:05:08.155,0:05:10.015
the mouth and the eyes resize

0:05:10.015,0:05:11.655
proportionally to the face

0:05:11.975,0:05:13.495
but you probably noticed

0:05:13.495,0:05:14.875
something is wrong

0:05:14.875,0:05:16.565
the eyes and the mouth

0:05:16.572,0:05:19.162
are still sticking out of the face

0:05:19.162,0:05:20.502
even though they are

0:05:20.502,0:05:22.612
much more appropriately sized

0:05:23.206,0:05:24.906
That is because we still have

0:05:24.906,0:05:26.626
some hard-coded numbers

0:05:26.626,0:05:28.396
in our ellipse commands

0:05:28.396,0:05:30.376
some numbers that should actually

0:05:30.376,0:05:32.656
be fractions of variables instead

0:05:33.148,0:05:34.578
here, I'll show you

0:05:34.669,0:05:37.799
So for the eye ellipse we have

0:05:37.799,0:05:40.819
x minus 50 for the x position

0:05:40.838,0:05:43.278
so this means it's always x minus 50

0:05:43.443,0:05:45.133
even if we make our faceSize

0:05:45.133,0:05:46.843
smaller than 50 pixels

0:05:46.843,0:05:48.063
and that definitely doesn't make sense

0:05:48.063,0:05:49.783
because that means that the left eye

0:05:49.783,0:05:50.461
is going to be

0:05:50.461,0:05:52.161
not even in the face anymore

0:05:52.441,0:05:55.218
so it should be x minus some fraction

0:05:55.218,0:05:57.258
the size of our face

0:05:57.278,0:05:59.218
and we can figure out the fraction

0:05:59.218,0:06:00.148
the same way

0:06:00.148,0:06:03.898
50 relative to the original 300

0:06:03.898,0:06:07.898
so 50 over 300, five over 30, one over six

0:06:08.582,0:06:11.952
so one over six times faceSize

0:06:12.440,0:06:14.110
and we see another 50 here

0:06:14.400,0:06:16.060
so we can do the same thing

0:06:16.060,0:06:17.360
the same expression

0:06:17.360,0:06:19.140
here we have 100 over 300

0:06:19.460,0:06:20.690
that's going to be

0:06:20.710,0:06:23.220
one third times faceSize

0:06:23.220,0:06:24.720
this one is 60

0:06:24.720,0:06:26.080
so that'll end up being

0:06:26.080,0:06:28.897
one fifth times faceSize

0:06:29.267,0:06:32.087
and here this is another 50

0:06:32.087,0:06:34.457
so its one sixth again

0:06:34.457,0:06:35.727
and then 40

0:06:35.727,0:06:38.257
that's what we figured out up here

0:06:38.257,0:06:39.507
two over 15

0:06:39.507,0:06:44.937
so two over 15 times faceSize

0:06:45.347,0:06:48.117
alright so lets try again

0:06:48.117,0:06:49.477
Oh, look at that!

0:06:49.477,0:06:51.257
Look at it. That's beautiful

0:06:51.268,0:06:52.048
so good

0:06:52.617,0:06:54.587
alright so let's review

0:06:54.587,0:06:56.117
We created this variable

0:06:56.130,0:06:57.950
that stored the size of the face

0:06:57.950,0:06:59.630
and it just stores a number

0:06:59.630,0:07:01.510
then we have these mouthSize

0:07:01.510,0:07:03.350
and eyeSize variables

0:07:03.350,0:07:05.710
and we calculate them based as fractions

0:07:05.710,0:07:06.790
of faceSize

0:07:06.790,0:07:07.770
to make sure that

0:07:07.770,0:07:09.500
their values always changed

0:07:09.500,0:07:12.360
based on what we start this one off as

0:07:12.514,0:07:15.104
then all of the offsets are calculated

0:07:15.104,0:07:16.894
based on faceSize too

0:07:16.894,0:07:18.454
to make sure the position

0:07:18.454,0:07:19.884
inside the face changes

0:07:19.884,0:07:22.064
if faceSize changes

0:07:22.064,0:07:23.014
Whoo! Alright.

0:07:23.014,0:07:24.614
So now that we really understand

0:07:24.614,0:07:25.725
how to make variables

0:07:25.725,0:07:27.865
dependant on the values of other variables

0:07:27.865,0:07:30.375
we can do so much more with our programmes

0:07:30.375,0:07:32.365
let's celebrate by making Winston

0:07:32.365,0:07:36.781
Huge! yeah, go Winston!