0:00:00.359,0:00:03.013
There are lots of ways[br]to make something look animated,

0:00:03.013,0:00:05.071
but the basic principle[br]is always the same.

0:00:05.071,0:00:07.132
If you take a bunch[br]of drawings or pictures

0:00:07.132,0:00:09.726
where each one is just[br]a little different from the last one,

0:00:09.726,0:00:11.392
and flip through them fast enough,

0:00:11.392,0:00:13.417
it'll look like your picture is moving.

0:00:13.417,0:00:14.790
Back in the good old days,

0:00:14.790,0:00:16.943
they used to draw[br]all these pictures by hand

0:00:16.943,0:00:19.696
and it would take <i>so</i> long just to make[br]a three-second animation.

0:00:19.696,0:00:22.877
Luckily for us, we live in the future.

0:00:22.877,0:00:26.130
It's actually really easy to make[br]a simple animation with code.

0:00:26.130,0:00:27.568
And I will show you how!

0:00:27.568,0:00:30.270
Over on the right, you can see[br]there is a cute little car

0:00:30.270,0:00:32.012
on a lovely yellow background.

0:00:32.012,0:00:34.965
And yes, yes I did design[br]that car myself, thanks.

0:00:34.965,0:00:35.977
Anyways, over here

0:00:35.977,0:00:38.749
you can see we are setting[br]this beautiful background color.

0:00:38.759,0:00:42.531
And the car doesn't have any outlines,[br]so we're calling this <i>noStroke()</i> function.

0:00:42.531,0:00:46.039
And then here we're making[br]a new variable, <i>x</i>, the position of the car

0:00:46.039,0:00:47.307
and giving it a value of 10.

0:00:47.307,0:00:49.456
And you can see[br]that if we change this value,

0:00:49.456,0:00:52.105
then it moves the car back and forth.

0:00:52.105,0:00:53.131
Bring him up to 10.

0:00:53.131,0:00:55.968
And then over here we're setting[br]the fill color of the car

0:00:55.968,0:00:58.095
and drawing two rectangles[br]for the car body.

0:00:58.095,0:01:00.733
So, it looks like this first rectangle[br]is for the bottom

0:01:00.733,0:01:02.483
and this rectangle is for the top.

0:01:02.483,0:01:05.027
And then here we're doing[br]the same thing with the wheels.

0:01:05.027,0:01:06.979
We set the fill color[br]and draw two ellipses:

0:01:06.979,0:01:08.648
One at "x + 25"

0:01:08.648,0:01:10.191
and "x + 75".

0:01:10.191,0:01:12.828
And finally we get to the new stuff.

0:01:12.828,0:01:15.099
This thing here is called[br]a <i>function definition</i>.

0:01:15.099,0:01:17.021
You'll learn all about those later,

0:01:17.021,0:01:20.206
so for now, kinda just look at it[br]and memorize what it looks like.

0:01:20.206,0:01:24.012
The important things to notice are[br]this word "draw" and these brackets.

0:01:24.012,0:01:26.740
This opening bracket here[br]and this closing bracket here.

0:01:26.750,0:01:30.210
This whole thing is what we call[br]the <i>draw loop</i>, or the <i>animation loop</i>.

0:01:30.210,0:01:32.587
And everything that you put[br]inside these brackets

0:01:32.587,0:01:35.234
gets run over and over again[br]really, really fast.

0:01:35.234,0:01:36.702
That's why it's called a loop.

0:01:36.702,0:01:38.734
And then everything outside these brackets

0:01:38.734,0:01:41.656
gets run only once[br]at the very beginning of the program.

0:01:41.656,0:01:45.479
So the first step in animating is to move[br]all your drawing code into the brackets

0:01:45.479,0:01:47.833
so that your picture[br]will get drawn over and over.

0:01:47.833,0:01:48.875
So let's do that.

0:01:48.875,0:01:51.027
I'm just going to pull[br]all this drawing code

0:01:51.247,0:01:54.261
and then plop it down inside my loop.

0:01:54.261,0:01:58.089
And to remind myself that this[br]block of code goes inside these brackets,

0:01:58.089,0:02:01.917
I'm just going to indent it all[br]by selecting everything and pressing <i>Tab</i>.

0:02:02.237,0:02:05.016
And now I know that this code[br]is inside the brackets.

0:02:05.746,0:02:08.730
So as you can tell,[br]everything just looks totally the same;

0:02:08.730,0:02:10.034
nothing has changed.

0:02:10.034,0:02:12.160
Because the first time[br]we run this draw loop,

0:02:12.160,0:02:13.496
the computer's going to go,

0:02:13.496,0:02:16.513
"Okay, make a new variable <i>x</i>,[br]set it to 10, draw two rectangles,

0:02:16.513,0:02:17.560
draw two ellipses."

0:02:17.560,0:02:20.487
And then it's going to go[br]all the way back to the top and say,

0:02:20.487,0:02:24.034
"Make a new variable <i>x</i>, set it to 10,[br]draw two rectangles, draw two ellipses."

0:02:24.034,0:02:26.986
And then, "Make a new variable <i>x</i>,[br]set it to 10, draw two rec--"

0:02:26.986,0:02:28.208
same exact thing.

0:02:28.208,0:02:31.301
Nothing has changed, so duh,[br]you're not going to see any animation.

0:02:31.301,0:02:34.660
It's just drawing the same rectangles[br]and ellipses on top of the old ones.

0:02:34.660,0:02:37.770
Remember what we said: if we want[br]to make something look animated,

0:02:37.770,0:02:40.360
you need to <i>change</i> your drawing[br]a little bit at a time.

0:02:40.360,0:02:42.761
So if I want my car to move forward,

0:02:42.761,0:02:45.361
I should change the value[br]of this <i>x</i> variable, right?

0:02:45.361,0:02:48.052
So yeah, let's just make it...11.

0:02:48.052,0:02:51.117
Ah!! No!! But now it's just going[br]to be 11 every single time.

0:02:51.117,0:02:54.220
How the heck am I supposed to get[br]the value of <i>x</i> to keep changing

0:02:54.220,0:02:57.253
when the computer just runs[br]the same code over and over?

0:02:57.253,0:02:59.707
Okay, watch this magic trick.

0:02:59.707,0:03:02.479
Remember, this <i>var x</i>[br]makes a new variable.

0:03:02.479,0:03:04.748
When we have it inside[br]the draw loop like this,

0:03:04.748,0:03:07.737
it makes a new variable[br]called "x" every single time.

0:03:07.737,0:03:10.764
What we need to do is make[br]this variable outside the draw loop.

0:03:10.764,0:03:13.261
That way it will only make it once.

0:03:13.261,0:03:17.492
And then, every time the computer[br]runs <i>this</i> code and sees the variable <i>x</i>,

0:03:17.492,0:03:22.483
it'll reuse the same variable from before[br]using the last value we assigned to it.

0:03:22.483,0:03:25.079
So I'm just gonna do that;[br]I'm gonna take this variable

0:03:25.079,0:03:27.483
and we're gonna make it[br]outside of the draw loop.

0:03:27.483,0:03:30.267
So right now it's only making[br]that variable once.

0:03:31.227,0:03:33.483
And every time it runs into[br]this variable <i>x</i>

0:03:33.483,0:03:35.479
it's gonna reuse the same variable.

0:03:35.479,0:03:38.117
And right now the last value[br]we assigned to it was 11,

0:03:38.117,0:03:39.492
so it's always gonna be 11.

0:03:39.492,0:03:41.487
And here's where the magic comes in.

0:03:41.487,0:03:44.385
Somewhere in the draw loop,[br]we're gonna change the value of <i>x</i>

0:03:44.385,0:03:46.717
to be a little more[br]than it used to be, like this:

0:03:46.717,0:03:51.989
<i>x</i> gets the old value of <i>x</i>[br]plus, let's say, 1.

0:03:52.749,0:03:54.271
Yay! It works!

0:03:54.761,0:03:56.893
Except, it's so smeary.

0:03:56.893,0:03:59.157
And if you're wondering[br]why it looks that way,

0:03:59.157,0:04:02.381
it's because we forgot to draw[br]this background inside the draw loop.

0:04:02.381,0:04:04.447
So it's drawing the car[br]over and over again,

0:04:04.447,0:04:07.073
but you can see all the old cars[br]underneath the new one.

0:04:07.073,0:04:11.740
So if I just pull this line[br]into the top of the draw loop, like that,

0:04:12.040,0:04:15.984
and then press "Restart"[br]so I can see my car again...

0:04:15.984,0:04:18.029
Yay! It's so perfect!

0:04:18.029,0:04:19.970
And if we wanna make the car go faster,

0:04:19.970,0:04:22.631
we can just change how much[br]we increase <i>x</i> by every time.

0:04:22.631,0:04:24.834
So if we make it 10, whoo![br]It's off the screen!

0:04:24.834,0:04:28.727
And I can even make it negative,[br]so <i>x - 10</i> and...

0:04:28.727,0:04:29.778
Here it comes!

0:04:30.018,0:04:32.195
Make it positive again,[br]whoops...

0:04:33.485,0:04:34.542
There it goes.

0:04:34.542,0:04:36.550
So here are the important things[br]to remember:

0:04:36.550,0:04:39.157
This thing right here[br]is called the draw loop.

0:04:39.157,0:04:41.251
You should put[br]your drawing code inside here

0:04:41.251,0:04:43.487
so it'll get drawn over and over again.

0:04:43.487,0:04:46.292
And then, you wanna make[br]a variable outside your draw loop.

0:04:46.292,0:04:49.249
It's super important to make[br]the variable outside the draw loop

0:04:49.249,0:04:51.496
so we can reuse the same one every time.

0:04:51.496,0:04:53.519
Then inside the draw loop right here,

0:04:53.519,0:04:56.032
we're gonna change[br]the variable a little bit,

0:04:56.032,0:04:58.242
usually by setting it to its old value,

0:04:58.242,0:05:01.492
plus some number--[br]plus or minus some number.

0:05:01.952,0:05:05.504
And finally, you wanna use your variable[br]somewhere in your drawing code

0:05:05.504,0:05:07.740
so that your drawing[br]looks different every time.

0:05:07.740,0:05:10.051
And... that's it!