WEBVTT
00:00:00.359 --> 00:00:03.013
There are lots of ways
to make something look animated,
00:00:03.013 --> 00:00:05.071
but the basic principle
is always the same.
00:00:05.071 --> 00:00:07.132
If you take a bunch
of drawings or pictures
00:00:07.132 --> 00:00:09.726
where each one is just
a little different from the last one,
00:00:09.726 --> 00:00:11.392
and flip through them fast enough,
00:00:11.392 --> 00:00:13.417
it'll look like your picture is moving.
00:00:13.417 --> 00:00:14.790
Back in the good old days,
00:00:14.790 --> 00:00:16.943
they used to draw
all these pictures by hand
00:00:16.943 --> 00:00:19.696
and it would take so long just to make
a three-second animation.
00:00:19.696 --> 00:00:22.877
Luckily for us, we live in the future.
00:00:22.877 --> 00:00:26.130
It's actually really easy to make
a simple animation with code.
00:00:26.130 --> 00:00:27.568
And I will show you how!
00:00:27.568 --> 00:00:30.270
Over on the right, you can see
there is a cute little car
00:00:30.270 --> 00:00:32.012
on a lovely yellow background.
00:00:32.012 --> 00:00:34.965
And yes, yes I did design
that car myself, thanks.
00:00:34.965 --> 00:00:35.977
Anyways, over here
00:00:35.977 --> 00:00:38.749
you can see we are setting
this beautiful background color.
00:00:38.759 --> 00:00:42.531
And the car doesn't have any outlines,
so we're calling this noStroke() function.
00:00:42.531 --> 00:00:46.039
And then here we're making
a new variable, x, the position of the car
00:00:46.039 --> 00:00:47.307
and giving it a value of 10.
00:00:47.307 --> 00:00:49.456
And you can see
that if we change this value,
00:00:49.456 --> 00:00:52.105
then it moves the car back and forth.
00:00:52.105 --> 00:00:53.131
Bring him up to 10.
00:00:53.131 --> 00:00:55.968
And then over here we're setting
the fill color of the car
00:00:55.968 --> 00:00:58.095
and drawing two rectangles
for the car body.
00:00:58.095 --> 00:01:00.733
So, it looks like this first rectangle
is for the bottom
00:01:00.733 --> 00:01:02.483
and this rectangle is for the top.
00:01:02.483 --> 00:01:05.027
And then here we're doing
the same thing with the wheels.
00:01:05.027 --> 00:01:06.979
We set the fill color
and draw two ellipses:
00:01:06.979 --> 00:01:08.648
One at "x + 25"
00:01:08.648 --> 00:01:10.191
and "x + 75".
00:01:10.191 --> 00:01:12.828
And finally we get to the new stuff.
00:01:12.828 --> 00:01:15.099
This thing here is called
a function definition.
00:01:15.099 --> 00:01:17.021
You'll learn all about those later,
00:01:17.021 --> 00:01:20.206
so for now, kinda just look at it
and memorize what it looks like.
00:01:20.206 --> 00:01:24.012
The important things to notice are
this word "draw" and these brackets.
00:01:24.012 --> 00:01:26.740
This opening bracket here
and this closing bracket here.
00:01:26.750 --> 00:01:30.210
This whole thing is what we call
the draw loop, or the animation loop.
00:01:30.210 --> 00:01:32.587
And everything that you put
inside these brackets
00:01:32.587 --> 00:01:35.234
gets run over and over again
really, really fast.
00:01:35.234 --> 00:01:36.702
That's why it's called a loop.
00:01:36.702 --> 00:01:38.734
And then everything outside these brackets
00:01:38.734 --> 00:01:41.656
gets run only once
at the very beginning of the program.
00:01:41.656 --> 00:01:45.479
So the first step in animating is to move
all your drawing code into the brackets
00:01:45.479 --> 00:01:47.833
so that your picture
will get drawn over and over.
00:01:47.833 --> 00:01:48.875
So let's do that.
00:01:48.875 --> 00:01:51.027
I'm just going to pull
all this drawing code
00:01:51.247 --> 00:01:54.261
and then plop it down inside my loop.
00:01:54.261 --> 00:01:58.089
And to remind myself that this
block of code goes inside these brackets,
00:01:58.089 --> 00:02:01.917
I'm just going to indent it all
by selecting everything and pressing Tab.
00:02:02.237 --> 00:02:05.016
And now I know that this code
is inside the brackets.
00:02:05.746 --> 00:02:08.730
So as you can tell,
everything just looks totally the same;
00:02:08.730 --> 00:02:10.034
nothing has changed.
00:02:10.034 --> 00:02:12.160
Because the first time
we run this draw loop,
00:02:12.160 --> 00:02:13.496
the computer's going to go,
00:02:13.496 --> 00:02:16.513
"Okay, make a new variable x,
set it to 10, draw two rectangles,
00:02:16.513 --> 00:02:17.560
draw two ellipses."
00:02:17.560 --> 00:02:20.487
And then it's going to go
all the way back to the top and say,
00:02:20.487 --> 00:02:24.034
"Make a new variable x, set it to 10,
draw two rectangles, draw two ellipses."
00:02:24.034 --> 00:02:26.986
And then, "Make a new variable x,
set it to 10, draw two rec--"
00:02:26.986 --> 00:02:28.208
same exact thing.
00:02:28.208 --> 00:02:31.301
Nothing has changed, so duh,
you're not going to see any animation.
00:02:31.301 --> 00:02:34.660
It's just drawing the same rectangles
and ellipses on top of the old ones.
00:02:34.660 --> 00:02:37.770
Remember what we said: if we want
to make something look animated,
00:02:37.770 --> 00:02:40.360
you need to change your drawing
a little bit at a time.
00:02:40.360 --> 00:02:42.761
So if I want my car to move forward,
00:02:42.761 --> 00:02:45.361
I should change the value
of this x variable, right?
00:02:45.361 --> 00:02:48.052
So yeah, let's just make it...11.
00:02:48.052 --> 00:02:51.117
Ah!! No!! But now it's just going
to be 11 every single time.
00:02:51.117 --> 00:02:54.220
How the heck am I supposed to get
the value of x to keep changing
00:02:54.220 --> 00:02:57.253
when the computer just runs
the same code over and over?
00:02:57.253 --> 00:02:59.707
Okay, watch this magic trick.
00:02:59.707 --> 00:03:02.479
Remember, this var x
makes a new variable.
00:03:02.479 --> 00:03:04.748
When we have it inside
the draw loop like this,
00:03:04.748 --> 00:03:07.737
it makes a new variable
called "x" every single time.
00:03:07.737 --> 00:03:10.764
What we need to do is make
this variable outside the draw loop.
00:03:10.764 --> 00:03:13.261
That way it will only make it once.
00:03:13.261 --> 00:03:17.492
And then, every time the computer
runs this code and sees the variable x,
00:03:17.492 --> 00:03:22.483
it'll reuse the same variable from before
using the last value we assigned to it.
00:03:22.483 --> 00:03:25.079
So I'm just gonna do that;
I'm gonna take this variable
00:03:25.079 --> 00:03:27.483
and we're gonna make it
outside of the draw loop.
00:03:27.483 --> 00:03:30.267
So right now it's only making
that variable once.
00:03:31.227 --> 00:03:33.483
And every time it runs into
this variable x
00:03:33.483 --> 00:03:35.479
it's gonna reuse the same variable.
00:03:35.479 --> 00:03:38.117
And right now the last value
we assigned to it was 11,
00:03:38.117 --> 00:03:39.492
so it's always gonna be 11.
00:03:39.492 --> 00:03:41.487
And here's where the magic comes in.
00:03:41.487 --> 00:03:44.385
Somewhere in the draw loop,
we're gonna change the value of x
00:03:44.385 --> 00:03:46.717
to be a little more
than it used to be, like this:
00:03:46.717 --> 00:03:51.989
x gets the old value of x
plus, let's say, 1.
00:03:52.749 --> 00:03:54.271
Yay! It works!
00:03:54.761 --> 00:03:56.893
Except, it's so smeary.
00:03:56.893 --> 00:03:59.157
And if you're wondering
why it looks that way,
00:03:59.157 --> 00:04:02.381
it's because we forgot to draw
this background inside the draw loop.
00:04:02.381 --> 00:04:04.447
So it's drawing the car
over and over again,
00:04:04.447 --> 00:04:07.073
but you can see all the old cars
underneath the new one.
00:04:07.073 --> 00:04:11.740
So if I just pull this line
into the top of the draw loop, like that,
00:04:12.040 --> 00:04:15.984
and then press "Restart"
so I can see my car again...
00:04:15.984 --> 00:04:18.029
Yay! It's so perfect!
00:04:18.029 --> 00:04:19.970
And if we wanna make the car go faster,
00:04:19.970 --> 00:04:22.631
we can just change how much
we increase x by every time.
00:04:22.631 --> 00:04:24.834
So if we make it 10, whoo!
It's off the screen!
00:04:24.834 --> 00:04:28.727
And I can even make it negative,
so x - 10 and...
00:04:28.727 --> 00:04:29.778
Here it comes!
00:04:30.018 --> 00:04:32.195
Make it positive again,
whoops...
00:04:33.485 --> 00:04:34.542
There it goes.
00:04:34.542 --> 00:04:36.550
So here are the important things
to remember:
00:04:36.550 --> 00:04:39.157
This thing right here
is called the draw loop.
00:04:39.157 --> 00:04:41.251
You should put
your drawing code inside here
00:04:41.251 --> 00:04:43.487
so it'll get drawn over and over again.
00:04:43.487 --> 00:04:46.292
And then, you wanna make
a variable outside your draw loop.
00:04:46.292 --> 00:04:49.249
It's super important to make
the variable outside the draw loop
00:04:49.249 --> 00:04:51.496
so we can reuse the same one every time.
00:04:51.496 --> 00:04:53.519
Then inside the draw loop right here,
00:04:53.519 --> 00:04:56.032
we're gonna change
the variable a little bit,
00:04:56.032 --> 00:04:58.242
usually by setting it to its old value,
00:04:58.242 --> 00:05:01.492
plus some number--
plus or minus some number.
00:05:01.952 --> 00:05:05.504
And finally, you wanna use your variable
somewhere in your drawing code
00:05:05.504 --> 00:05:07.740
so that your drawing
looks different every time.
00:05:07.740 --> 00:05:10.051
And... that's it!