1
00:00:00,359 --> 00:00:03,013
There are lots of ways
to make something look animated,
2
00:00:03,013 --> 00:00:05,071
but the basic principle
is always the same.
3
00:00:05,071 --> 00:00:07,132
If you take a bunch
of drawings or pictures
4
00:00:07,132 --> 00:00:09,726
where each one is just
a little different from the last one,
5
00:00:09,726 --> 00:00:11,392
and flip through them fast enough,
6
00:00:11,392 --> 00:00:13,417
it'll look like your picture is moving.
7
00:00:13,417 --> 00:00:14,790
Back in the good old days,
8
00:00:14,790 --> 00:00:16,943
they used to draw
all these pictures by hand
9
00:00:16,943 --> 00:00:19,696
and it would take so long just to make
a three-second animation.
10
00:00:19,696 --> 00:00:22,877
Luckily for us, we live in the future.
11
00:00:22,877 --> 00:00:26,130
It's actually really easy to make
a simple animation with code.
12
00:00:26,130 --> 00:00:27,568
And I will show you how!
13
00:00:27,568 --> 00:00:30,270
Over on the right, you can see
there is a cute little car
14
00:00:30,270 --> 00:00:32,012
on a lovely yellow background.
15
00:00:32,012 --> 00:00:34,965
And yes, yes I did design
that car myself, thanks.
16
00:00:34,965 --> 00:00:35,977
Anyways, over here
17
00:00:35,977 --> 00:00:38,749
you can see we are setting
this beautiful background color.
18
00:00:38,759 --> 00:00:42,531
And the car doesn't have any outlines,
so we're calling this noStroke() function.
19
00:00:42,531 --> 00:00:46,039
And then here we're making
a new variable, x, the position of the car
20
00:00:46,039 --> 00:00:47,307
and giving it a value of 10.
21
00:00:47,307 --> 00:00:49,456
And you can see
that if we change this value,
22
00:00:49,456 --> 00:00:52,105
then it moves the car back and forth.
23
00:00:52,105 --> 00:00:53,131
Bring him up to 10.
24
00:00:53,131 --> 00:00:55,968
And then over here we're setting
the fill color of the car
25
00:00:55,968 --> 00:00:58,095
and drawing two rectangles
for the car body.
26
00:00:58,095 --> 00:01:00,733
So, it looks like this first rectangle
is for the bottom
27
00:01:00,733 --> 00:01:02,483
and this rectangle is for the top.
28
00:01:02,483 --> 00:01:05,027
And then here we're doing
the same thing with the wheels.
29
00:01:05,027 --> 00:01:06,979
We set the fill color
and draw two ellipses:
30
00:01:06,979 --> 00:01:08,648
One at "x + 25"
31
00:01:08,648 --> 00:01:10,191
and "x + 75".
32
00:01:10,191 --> 00:01:12,828
And finally we get to the new stuff.
33
00:01:12,828 --> 00:01:15,099
This thing here is called
a function definition.
34
00:01:15,099 --> 00:01:17,021
You'll learn all about those later,
35
00:01:17,021 --> 00:01:20,206
so for now, kinda just look at it
and memorize what it looks like.
36
00:01:20,206 --> 00:01:24,012
The important things to notice are
this word "draw" and these brackets.
37
00:01:24,012 --> 00:01:26,740
This opening bracket here
and this closing bracket here.
38
00:01:26,750 --> 00:01:30,210
This whole thing is what we call
the draw loop, or the animation loop.
39
00:01:30,210 --> 00:01:32,587
And everything that you put
inside these brackets
40
00:01:32,587 --> 00:01:35,234
gets run over and over again
really, really fast.
41
00:01:35,234 --> 00:01:36,702
That's why it's called a loop.
42
00:01:36,702 --> 00:01:38,734
And then everything outside these brackets
43
00:01:38,734 --> 00:01:41,656
gets run only once
at the very beginning of the program.
44
00:01:41,656 --> 00:01:45,479
So the first step in animating is to move
all your drawing code into the brackets
45
00:01:45,479 --> 00:01:47,833
so that your picture
will get drawn over and over.
46
00:01:47,833 --> 00:01:48,875
So let's do that.
47
00:01:48,875 --> 00:01:51,027
I'm just going to pull
all this drawing code
48
00:01:51,247 --> 00:01:54,261
and then plop it down inside my loop.
49
00:01:54,261 --> 00:01:58,089
And to remind myself that this
block of code goes inside these brackets,
50
00:01:58,089 --> 00:02:01,917
I'm just going to indent it all
by selecting everything and pressing Tab.
51
00:02:02,237 --> 00:02:05,016
And now I know that this code
is inside the brackets.
52
00:02:05,746 --> 00:02:08,730
So as you can tell,
everything just looks totally the same;
53
00:02:08,730 --> 00:02:10,034
nothing has changed.
54
00:02:10,034 --> 00:02:12,160
Because the first time
we run this draw loop,
55
00:02:12,160 --> 00:02:13,496
the computer's going to go,
56
00:02:13,496 --> 00:02:16,513
"Okay, make a new variable x,
set it to 10, draw two rectangles,
57
00:02:16,513 --> 00:02:17,560
draw two ellipses."
58
00:02:17,560 --> 00:02:20,487
And then it's going to go
all the way back to the top and say,
59
00:02:20,487 --> 00:02:24,034
"Make a new variable x, set it to 10,
draw two rectangles, draw two ellipses."
60
00:02:24,034 --> 00:02:26,986
And then, "Make a new variable x,
set it to 10, draw two rec--"
61
00:02:26,986 --> 00:02:28,208
same exact thing.
62
00:02:28,208 --> 00:02:31,301
Nothing has changed, so duh,
you're not going to see any animation.
63
00:02:31,301 --> 00:02:34,660
It's just drawing the same rectangles
and ellipses on top of the old ones.
64
00:02:34,660 --> 00:02:37,770
Remember what we said: if we want
to make something look animated,
65
00:02:37,770 --> 00:02:40,360
you need to change your drawing
a little bit at a time.
66
00:02:40,360 --> 00:02:42,761
So if I want my car to move forward,
67
00:02:42,761 --> 00:02:45,361
I should change the value
of this x variable, right?
68
00:02:45,361 --> 00:02:48,052
So yeah, let's just make it...11.
69
00:02:48,052 --> 00:02:51,117
Ah!! No!! But now it's just going
to be 11 every single time.
70
00:02:51,117 --> 00:02:54,220
How the heck am I supposed to get
the value of x to keep changing
71
00:02:54,220 --> 00:02:57,253
when the computer just runs
the same code over and over?
72
00:02:57,253 --> 00:02:59,707
Okay, watch this magic trick.
73
00:02:59,707 --> 00:03:02,479
Remember, this var x
makes a new variable.
74
00:03:02,479 --> 00:03:04,748
When we have it inside
the draw loop like this,
75
00:03:04,748 --> 00:03:07,737
it makes a new variable
called "x" every single time.
76
00:03:07,737 --> 00:03:10,764
What we need to do is make
this variable outside the draw loop.
77
00:03:10,764 --> 00:03:13,261
That way it will only make it once.
78
00:03:13,261 --> 00:03:17,492
And then, every time the computer
runs this code and sees the variable x,
79
00:03:17,492 --> 00:03:22,483
it'll reuse the same variable from before
using the last value we assigned to it.
80
00:03:22,483 --> 00:03:25,079
So I'm just gonna do that;
I'm gonna take this variable
81
00:03:25,079 --> 00:03:27,483
and we're gonna make it
outside of the draw loop.
82
00:03:27,483 --> 00:03:30,267
So right now it's only making
that variable once.
83
00:03:31,227 --> 00:03:33,483
And every time it runs into
this variable x
84
00:03:33,483 --> 00:03:35,479
it's gonna reuse the same variable.
85
00:03:35,479 --> 00:03:38,117
And right now the last value
we assigned to it was 11,
86
00:03:38,117 --> 00:03:39,492
so it's always gonna be 11.
87
00:03:39,492 --> 00:03:41,487
And here's where the magic comes in.
88
00:03:41,487 --> 00:03:44,385
Somewhere in the draw loop,
we're gonna change the value of x
89
00:03:44,385 --> 00:03:46,717
to be a little more
than it used to be, like this:
90
00:03:46,717 --> 00:03:51,989
x gets the old value of x
plus, let's say, 1.
91
00:03:52,749 --> 00:03:54,271
Yay! It works!
92
00:03:54,761 --> 00:03:56,893
Except, it's so smeary.
93
00:03:56,893 --> 00:03:59,157
And if you're wondering
why it looks that way,
94
00:03:59,157 --> 00:04:02,381
it's because we forgot to draw
this background inside the draw loop.
95
00:04:02,381 --> 00:04:04,447
So it's drawing the car
over and over again,
96
00:04:04,447 --> 00:04:07,073
but you can see all the old cars
underneath the new one.
97
00:04:07,073 --> 00:04:11,740
So if I just pull this line
into the top of the draw loop, like that,
98
00:04:12,040 --> 00:04:15,984
and then press "Restart"
so I can see my car again...
99
00:04:15,984 --> 00:04:18,029
Yay! It's so perfect!
100
00:04:18,029 --> 00:04:19,970
And if we wanna make the car go faster,
101
00:04:19,970 --> 00:04:22,631
we can just change how much
we increase x by every time.
102
00:04:22,631 --> 00:04:24,834
So if we make it 10, whoo!
It's off the screen!
103
00:04:24,834 --> 00:04:28,727
And I can even make it negative,
so x - 10 and...
104
00:04:28,727 --> 00:04:29,778
Here it comes!
105
00:04:30,018 --> 00:04:32,195
Make it positive again,
whoops...
106
00:04:33,485 --> 00:04:34,542
There it goes.
107
00:04:34,542 --> 00:04:36,550
So here are the important things
to remember:
108
00:04:36,550 --> 00:04:39,157
This thing right here
is called the draw loop.
109
00:04:39,157 --> 00:04:41,251
You should put
your drawing code inside here
110
00:04:41,251 --> 00:04:43,487
so it'll get drawn over and over again.
111
00:04:43,487 --> 00:04:46,292
And then, you wanna make
a variable outside your draw loop.
112
00:04:46,292 --> 00:04:49,249
It's super important to make
the variable outside the draw loop
113
00:04:49,249 --> 00:04:51,496
so we can reuse the same one every time.
114
00:04:51,496 --> 00:04:53,519
Then inside the draw loop right here,
115
00:04:53,519 --> 00:04:56,032
we're gonna change
the variable a little bit,
116
00:04:56,032 --> 00:04:58,242
usually by setting it to its old value,
117
00:04:58,242 --> 00:05:01,492
plus some number--
plus or minus some number.
118
00:05:01,952 --> 00:05:05,504
And finally, you wanna use your variable
somewhere in your drawing code
119
00:05:05,504 --> 00:05:07,740
so that your drawing
looks different every time.
120
00:05:07,740 --> 00:05:10,051
And... that's it!