Intro to Animation (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/

There are lots of ways
to make something look animated,

but the basic principle
is always the same.

If you take a bunch
of drawings or pictures

where each one is just
a little different from the last one,

and flip through them fast enough,

it'll look like your picture is moving.

Back in the good old days,

they used to draw
all these pictures by hand

and it would take so long just to make
a three-second animation.

Luckily for us, we live in the future.

It's actually really easy to make
a simple animation with code.

And I will show you how!

Over on the right, you can see
there is a cute little car

on a lovely yellow background.

And yes, yes I did design
that car myself, thanks.

Anyways, over here

you can see we are setting
this beautiful background color.

And the car doesn't have any outlines,
so we're calling this noStroke() function.

And then here we're making
a new variable, x, the position of the car

and giving it a value of 10.

And you can see
that if we change this value,

then it moves the car back and forth.

Bring him up to 10.

And then over here we're setting
the fill color of the car

and drawing two rectangles
for the car body.

So, it looks like this first rectangle
is for the bottom

and this rectangle is for the top.

And then here we're doing
the same thing with the wheels.

We set the fill color
and draw two ellipses:

One at "x + 25"

and "x + 75".

And finally we get to the new stuff.

This thing here is called
a function definition.

You'll learn all about those later,

so for now, kinda just look at it
and memorize what it looks like.

The important things to notice are
this word "draw" and these brackets.

This opening bracket here
and this closing bracket here.

This whole thing is what we call
the draw loop, or the animation loop.

And everything that you put
inside these brackets

gets run over and over again
really, really fast.

That's why it's called a loop.

And then everything outside these brackets

gets run only once
at the very beginning of the program.

So the first step in animating is to move
all your drawing code into the brackets

so that your picture
will get drawn over and over.

So let's do that.

I'm just going to pull
all this drawing code

and then plop it down inside my loop.

And to remind myself that this
block of code goes inside these brackets,

I'm just going to indent it all
by selecting everything and pressing Tab.

And now I know that this code
is inside the brackets.

So as you can tell,
everything just looks totally the same;

nothing has changed.

Because the first time
we run this draw loop,

the computer's going to go,

"Okay, make a new variable x,
set it to 10, draw two rectangles,

draw two ellipses."

And then it's going to go
all the way back to the top and say,

"Make a new variable x, set it to 10,
draw two rectangles, draw two ellipses."

And then, "Make a new variable x,
set it to 10, draw two rec--"

same exact thing.

Nothing has changed, so duh,
you're not going to see any animation.

It's just drawing the same rectangles
and ellipses on top of the old ones.

Remember what we said: if we want
to make something look animated,

you need to change your drawing
a little bit at a time.

So if I want my car to move forward,

I should change the value
of this x variable, right?

So yeah, let's just make it...11.

Ah!! No!! But now it's just going
to be 11 every single time.

How the heck am I supposed to get
the value of x to keep changing

when the computer just runs
the same code over and over?

Okay, watch this magic trick.

Remember, this var x
makes a new variable.

When we have it inside
the draw loop like this,

it makes a new variable
called "x" every single time.

What we need to do is make
this variable outside the draw loop.

That way it will only make it once.

And then, every time the computer
runs this code and sees the variable x,

it'll reuse the same variable from before
using the last value we assigned to it.

So I'm just gonna do that;
I'm gonna take this variable

and we're gonna make it
outside of the draw loop.

So right now it's only making
that variable once.

And every time it runs into
this variable x

it's gonna reuse the same variable.

And right now the last value
we assigned to it was 11,

so it's always gonna be 11.

And here's where the magic comes in.

Somewhere in the draw loop,
we're gonna change the value of x

to be a little more
than it used to be, like this:

x gets the old value of x
plus, let's say, 1.

Yay! It works!

Except, it's so smeary.

And if you're wondering
why it looks that way,

it's because we forgot to draw
this background inside the draw loop.

So it's drawing the car
over and over again,

but you can see all the old cars
underneath the new one.

So if I just pull this line
into the top of the draw loop, like that,

and then press "Restart"
so I can see my car again...

Yay! It's so perfect!

And if we wanna make the car go faster,

we can just change how much
we increase x by every time.

So if we make it 10, whoo!
It's off the screen!

And I can even make it negative,
so x - 10 and...

Here it comes!

Make it positive again,
whoops...

There it goes.

So here are the important things
to remember:

This thing right here
is called the draw loop.

You should put
your drawing code inside here

so it'll get drawn over and over again.

And then, you wanna make
a variable outside your draw loop.

It's super important to make
the variable outside the draw loop

so we can reuse the same one every time.

Then inside the draw loop right here,

we're gonna change
the variable a little bit,

usually by setting it to its old value,

plus some number--
plus or minus some number.

And finally, you wanna use your variable
somewhere in your drawing code

so that your drawing
looks different every time.

And... that's it!