WEBVTT

00:00:01.304 --> 00:00:03.685
Remember the three steps 
of making an animation?

00:00:03.685 --> 00:00:06.589
We start out by making some variables
outside the draw loop,

00:00:06.589 --> 00:00:08.405
and then inside the draw loop
we use those variables

00:00:08.405 --> 00:00:10.011
in our drawing code.

00:00:10.011 --> 00:00:12.039
So we've got a variable 
for the <i>x</i> position,

00:00:12.039 --> 00:00:14.395
one for the <i>y</i> position, 
one for the ballWidth,

00:00:14.395 --> 00:00:16.011
and one for the ballHeight.

00:00:16.011 --> 00:00:17.723
And then, at the very end,

00:00:17.723 --> 00:00:20.025
we change those variables 
a little bit every time,

00:00:20.025 --> 00:00:22.773
so <i>x</i> is going to be 
the old value of <i>x</i>, plus 1,

00:00:22.773 --> 00:00:24.701
so it's going to be increasing every time;

00:00:24.701 --> 00:00:27.796
<i>y</i> is going be the old value of <i>y</i>, minus 2,

00:00:27.796 --> 00:00:29.801
so <i>y</i> will be decreasing every time;

00:00:29.801 --> 00:00:35.406
ballWidth is going to get the old value
of ballWidth times 0.99.

00:00:35.410 --> 00:00:39.409
So since 0.99 is less than 1, 
we're going to see ballWidth decreasing.

00:00:39.409 --> 00:00:41.839
And ballHeight is going to be
the old value of ballHeight

00:00:41.839 --> 00:00:45.501
divided by 1.01, which is greater than 1,

00:00:45.501 --> 00:00:47.963
and so we're also going to see 
ballHeight decreasing.

00:00:47.963 --> 00:00:50.234
So if I press <i>Restart</i>, you can see

00:00:50.234 --> 00:00:53.585
all of these attributes 
of the ball changing.

00:00:53.725 --> 00:00:56.607
So if you look at 
these four lines of code,

00:00:56.607 --> 00:00:59.251
you'll notice that 
they all follow a similar pattern.

00:00:59.251 --> 00:01:01.400
We've got a variable, 
then an equals sign,

00:01:01.400 --> 00:01:06.047
then the same variable, some operator --
plus, minus, times, divide --

00:01:06.527 --> 00:01:08.593
and some number, okay?

00:01:08.593 --> 00:01:11.772
And this pattern is so common 
in programming,

00:01:11.772 --> 00:01:14.460
and programmers are so lazy,
that they decided,

00:01:14.460 --> 00:01:16.777
"Hey! Since we use this pattern so much,

00:01:16.777 --> 00:01:19.054
"Shouldn't there be 
an easier way to type it?"

00:01:19.054 --> 00:01:22.006
And so they made a shortcut, 
and the shortcut goes like this:

00:01:22.006 --> 00:01:24.528
Instead of saying "x gets x plus 1",

00:01:24.528 --> 00:01:29.331
I could say "x plus equals 1." Got it?

00:01:29.331 --> 00:01:35.970
And instead of saying <i>y</i> gets <i>y</i> minus 2,
I could say "y minus equals 2."

00:01:36.670 --> 00:01:41.259
And instead of saying 
ballWidth gets ballWidth times 0.99,

00:01:41.259 --> 00:01:47.686
I can say -- you guessed it --
<i>"ballWidth times equals 0.99"</i>

00:01:48.203 --> 00:01:49.832
Finally, instead of saying

00:01:49.832 --> 00:01:53.658
ballHeight gets ballHeight divided by 1.01

00:01:53.658 --> 00:01:57.373
we can say 
<i>"ballHeight divides equals 1.01."</i>

00:01:57.373 --> 00:01:59.468
So for all of these, what it does is

00:01:59.468 --> 00:02:01.553
it takes the value of the variables,

00:02:01.553 --> 00:02:04.123
so ballWidth, and then this operator,

00:02:04.123 --> 00:02:06.344
and then multiplies it by 0.99.

00:02:06.344 --> 00:02:09.240
So it's going to say, 
<i>"ballWidth times 0.99"</i>

00:02:09.240 --> 00:02:12.067
and then store it back 
in the variable, ballWidth.

00:02:12.067 --> 00:02:13.864
And if I press <i>Restart</i> you can see

00:02:13.864 --> 00:02:16.005
our animation looks the same as before.

00:02:16.005 --> 00:02:17.975
And now you get to be lazy too!