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!