Incrementing Shortcuts (Video Version)

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

Remember the three steps
of making an animation?

We start out by making some variables
outside the draw loop,

and then inside the draw loop
we use those variables

in our drawing code.

So we've got a variable
for the x position,

one for the y position,
one for the ballWidth,

and one for the ballHeight.

And then, at the very end,

we change those variables
a little bit every time,

so x is going to be
the old value of x, plus 1,

so it's going to be increasing every time;

y is going be the old value of y, minus 2,

so y will be decreasing every time;

ballWidth is going to get the old value
of ballWidth times 0.99.

So since 0.99 is less than 1,
we're going to see ballWidth decreasing.

And ballHeight is going to be
the old value of ballHeight

divided by 1.01, which is greater than 1,

and so we're also going to see
ballHeight decreasing.

So if I press Restart, you can see

all of these attributes
of the ball changing.

So if you look at
these four lines of code,

you'll notice that
they all follow a similar pattern.

We've got a variable,
then an equals sign,

then the same variable, some operator --
plus, minus, times, divide --

and some number, okay?

And this pattern is so common
in programming,

and programmers are so lazy,
that they decided,

"Hey! Since we use this pattern so much,

"Shouldn't there be
an easier way to type it?"

And so they made a shortcut,
and the shortcut goes like this:

Instead of saying "x gets x plus 1",

I could say "x plus equals 1." Got it?

And instead of saying y gets y minus 2,
I could say "y minus equals 2."

And instead of saying
ballWidth gets ballWidth times 0.99,

I can say -- you guessed it --
"ballWidth times equals 0.99"

Finally, instead of saying

ballHeight gets ballHeight divided by 1.01

we can say
"ballHeight divides equals 1.01."

So for all of these, what it does is

it takes the value of the variables,

so ballWidth, and then this operator,

and then multiplies it by 0.99.

So it's going to say,
"ballWidth times 0.99"

and then store it back
in the variable, ballWidth.

And if I press Restart you can see

our animation looks the same as before.

And now you get to be lazy too!