[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.36,0:00:03.01,Default,,0000,0000,0000,,There are lots of ways\Nto make something look animated,
Dialogue: 0,0:00:03.01,0:00:05.07,Default,,0000,0000,0000,,but the basic principle\Nis always the same.
Dialogue: 0,0:00:05.07,0:00:07.13,Default,,0000,0000,0000,,If you take a bunch\Nof drawings or pictures
Dialogue: 0,0:00:07.13,0:00:09.73,Default,,0000,0000,0000,,where each one is just\Na little different from the last one,
Dialogue: 0,0:00:09.73,0:00:11.39,Default,,0000,0000,0000,,and flip through them fast enough,
Dialogue: 0,0:00:11.39,0:00:13.42,Default,,0000,0000,0000,,it'll look like your picture is moving.
Dialogue: 0,0:00:13.42,0:00:14.79,Default,,0000,0000,0000,,Back in the good old days,
Dialogue: 0,0:00:14.79,0:00:16.94,Default,,0000,0000,0000,,they used to draw\Nall these pictures by hand
Dialogue: 0,0:00:16.94,0:00:19.70,Default,,0000,0000,0000,,and it would take {\i1}so{\i0} long just to make\Na three-second animation.
Dialogue: 0,0:00:19.70,0:00:22.88,Default,,0000,0000,0000,,Luckily for us, we live in the future.
Dialogue: 0,0:00:22.88,0:00:26.13,Default,,0000,0000,0000,,It's actually really easy to make\Na simple animation with code.
Dialogue: 0,0:00:26.13,0:00:27.57,Default,,0000,0000,0000,,And I will show you how!
Dialogue: 0,0:00:27.57,0:00:30.27,Default,,0000,0000,0000,,Over on the right, you can see\Nthere is a cute little car
Dialogue: 0,0:00:30.27,0:00:32.01,Default,,0000,0000,0000,,on a lovely yellow background.
Dialogue: 0,0:00:32.01,0:00:34.96,Default,,0000,0000,0000,,And yes, yes I did design\Nthat car myself, thanks.
Dialogue: 0,0:00:34.96,0:00:35.98,Default,,0000,0000,0000,,Anyways, over here
Dialogue: 0,0:00:35.98,0:00:38.75,Default,,0000,0000,0000,,you can see we are setting\Nthis beautiful background color.
Dialogue: 0,0:00:38.76,0:00:42.53,Default,,0000,0000,0000,,And the car doesn't have any outlines,\Nso we're calling this {\i1}noStroke(){\i0} function.
Dialogue: 0,0:00:42.53,0:00:46.04,Default,,0000,0000,0000,,And then here we're making\Na new variable, {\i1}x{\i0}, the position of the car
Dialogue: 0,0:00:46.04,0:00:47.31,Default,,0000,0000,0000,,and giving it a value of 10.
Dialogue: 0,0:00:47.31,0:00:49.46,Default,,0000,0000,0000,,And you can see\Nthat if we change this value,
Dialogue: 0,0:00:49.46,0:00:52.10,Default,,0000,0000,0000,,then it moves the car back and forth.
Dialogue: 0,0:00:52.10,0:00:53.13,Default,,0000,0000,0000,,Bring him up to 10.
Dialogue: 0,0:00:53.13,0:00:55.97,Default,,0000,0000,0000,,And then over here we're setting\Nthe fill color of the car
Dialogue: 0,0:00:55.97,0:00:58.10,Default,,0000,0000,0000,,and drawing two rectangles\Nfor the car body.
Dialogue: 0,0:00:58.10,0:01:00.73,Default,,0000,0000,0000,,So, it looks like this first rectangle\Nis for the bottom
Dialogue: 0,0:01:00.73,0:01:02.48,Default,,0000,0000,0000,,and this rectangle is for the top.
Dialogue: 0,0:01:02.48,0:01:05.03,Default,,0000,0000,0000,,And then here we're doing\Nthe same thing with the wheels.
Dialogue: 0,0:01:05.03,0:01:06.98,Default,,0000,0000,0000,,We set the fill color\Nand draw two ellipses:
Dialogue: 0,0:01:06.98,0:01:08.65,Default,,0000,0000,0000,,One at "x + 25"
Dialogue: 0,0:01:08.65,0:01:10.19,Default,,0000,0000,0000,,and "x + 75".
Dialogue: 0,0:01:10.19,0:01:12.83,Default,,0000,0000,0000,,And finally we get to the new stuff.
Dialogue: 0,0:01:12.83,0:01:15.10,Default,,0000,0000,0000,,This thing here is called\Na {\i1}function definition{\i0}.
Dialogue: 0,0:01:15.10,0:01:17.02,Default,,0000,0000,0000,,You'll learn all about those later,
Dialogue: 0,0:01:17.02,0:01:20.21,Default,,0000,0000,0000,,so for now, kinda just look at it\Nand memorize what it looks like.
Dialogue: 0,0:01:20.21,0:01:24.01,Default,,0000,0000,0000,,The important things to notice are\Nthis word "draw" and these brackets.
Dialogue: 0,0:01:24.01,0:01:26.74,Default,,0000,0000,0000,,This opening bracket here\Nand this closing bracket here.
Dialogue: 0,0:01:26.75,0:01:30.21,Default,,0000,0000,0000,,This whole thing is what we call\Nthe {\i1}draw loop{\i0}, or the {\i1}animation loop{\i0}.
Dialogue: 0,0:01:30.21,0:01:32.59,Default,,0000,0000,0000,,And everything that you put\Ninside these brackets
Dialogue: 0,0:01:32.59,0:01:35.23,Default,,0000,0000,0000,,gets run over and over again\Nreally, really fast.
Dialogue: 0,0:01:35.23,0:01:36.70,Default,,0000,0000,0000,,That's why it's called a loop.
Dialogue: 0,0:01:36.70,0:01:38.73,Default,,0000,0000,0000,,And then everything outside these brackets
Dialogue: 0,0:01:38.73,0:01:41.66,Default,,0000,0000,0000,,gets run only once\Nat the very beginning of the program.
Dialogue: 0,0:01:41.66,0:01:45.48,Default,,0000,0000,0000,,So the first step in animating is to move\Nall your drawing code into the brackets
Dialogue: 0,0:01:45.48,0:01:47.83,Default,,0000,0000,0000,,so that your picture\Nwill get drawn over and over.
Dialogue: 0,0:01:47.83,0:01:48.88,Default,,0000,0000,0000,,So let's do that.
Dialogue: 0,0:01:48.88,0:01:51.03,Default,,0000,0000,0000,,I'm just going to pull\Nall this drawing code
Dialogue: 0,0:01:51.25,0:01:54.26,Default,,0000,0000,0000,,and then plop it down inside my loop.
Dialogue: 0,0:01:54.26,0:01:58.09,Default,,0000,0000,0000,,And to remind myself that this\Nblock of code goes inside these brackets,
Dialogue: 0,0:01:58.09,0:02:01.92,Default,,0000,0000,0000,,I'm just going to indent it all\Nby selecting everything and pressing {\i1}Tab{\i0}.
Dialogue: 0,0:02:02.24,0:02:05.02,Default,,0000,0000,0000,,And now I know that this code\Nis inside the brackets.
Dialogue: 0,0:02:05.75,0:02:08.73,Default,,0000,0000,0000,,So as you can tell,\Neverything just looks totally the same;
Dialogue: 0,0:02:08.73,0:02:10.03,Default,,0000,0000,0000,,nothing has changed.
Dialogue: 0,0:02:10.03,0:02:12.16,Default,,0000,0000,0000,,Because the first time\Nwe run this draw loop,
Dialogue: 0,0:02:12.16,0:02:13.50,Default,,0000,0000,0000,,the computer's going to go,
Dialogue: 0,0:02:13.50,0:02:16.51,Default,,0000,0000,0000,,"Okay, make a new variable {\i1}x{\i0},\Nset it to 10, draw two rectangles,
Dialogue: 0,0:02:16.51,0:02:17.56,Default,,0000,0000,0000,,draw two ellipses."
Dialogue: 0,0:02:17.56,0:02:20.49,Default,,0000,0000,0000,,And then it's going to go\Nall the way back to the top and say,
Dialogue: 0,0:02:20.49,0:02:24.03,Default,,0000,0000,0000,,"Make a new variable {\i1}x{\i0}, set it to 10,\Ndraw two rectangles, draw two ellipses."
Dialogue: 0,0:02:24.03,0:02:26.99,Default,,0000,0000,0000,,And then, "Make a new variable {\i1}x{\i0},\Nset it to 10, draw two rec--"
Dialogue: 0,0:02:26.99,0:02:28.21,Default,,0000,0000,0000,,same exact thing.
Dialogue: 0,0:02:28.21,0:02:31.30,Default,,0000,0000,0000,,Nothing has changed, so duh,\Nyou're not going to see any animation.
Dialogue: 0,0:02:31.30,0:02:34.66,Default,,0000,0000,0000,,It's just drawing the same rectangles\Nand ellipses on top of the old ones.
Dialogue: 0,0:02:34.66,0:02:37.77,Default,,0000,0000,0000,,Remember what we said: if we want\Nto make something look animated,
Dialogue: 0,0:02:37.77,0:02:40.36,Default,,0000,0000,0000,,you need to {\i1}change{\i0} your drawing\Na little bit at a time.
Dialogue: 0,0:02:40.36,0:02:42.76,Default,,0000,0000,0000,,So if I want my car to move forward,
Dialogue: 0,0:02:42.76,0:02:45.36,Default,,0000,0000,0000,,I should change the value\Nof this {\i1}x{\i0} variable, right?
Dialogue: 0,0:02:45.36,0:02:48.05,Default,,0000,0000,0000,,So yeah, let's just make it...11.
Dialogue: 0,0:02:48.05,0:02:51.12,Default,,0000,0000,0000,,Ah!! No!! But now it's just going\Nto be 11 every single time.
Dialogue: 0,0:02:51.12,0:02:54.22,Default,,0000,0000,0000,,How the heck am I supposed to get\Nthe value of {\i1}x{\i0} to keep changing
Dialogue: 0,0:02:54.22,0:02:57.25,Default,,0000,0000,0000,,when the computer just runs\Nthe same code over and over?
Dialogue: 0,0:02:57.25,0:02:59.71,Default,,0000,0000,0000,,Okay, watch this magic trick.
Dialogue: 0,0:02:59.71,0:03:02.48,Default,,0000,0000,0000,,Remember, this {\i1}var x{\i0}\Nmakes a new variable.
Dialogue: 0,0:03:02.48,0:03:04.75,Default,,0000,0000,0000,,When we have it inside\Nthe draw loop like this,
Dialogue: 0,0:03:04.75,0:03:07.74,Default,,0000,0000,0000,,it makes a new variable\Ncalled "x" every single time.
Dialogue: 0,0:03:07.74,0:03:10.76,Default,,0000,0000,0000,,What we need to do is make\Nthis variable outside the draw loop.
Dialogue: 0,0:03:10.76,0:03:13.26,Default,,0000,0000,0000,,That way it will only make it once.
Dialogue: 0,0:03:13.26,0:03:17.49,Default,,0000,0000,0000,,And then, every time the computer\Nruns {\i1}this{\i0} code and sees the variable {\i1}x{\i0},
Dialogue: 0,0:03:17.49,0:03:22.48,Default,,0000,0000,0000,,it'll reuse the same variable from before\Nusing the last value we assigned to it.
Dialogue: 0,0:03:22.48,0:03:25.08,Default,,0000,0000,0000,,So I'm just gonna do that;\NI'm gonna take this variable
Dialogue: 0,0:03:25.08,0:03:27.48,Default,,0000,0000,0000,,and we're gonna make it\Noutside of the draw loop.
Dialogue: 0,0:03:27.48,0:03:30.27,Default,,0000,0000,0000,,So right now it's only making\Nthat variable once.
Dialogue: 0,0:03:31.23,0:03:33.48,Default,,0000,0000,0000,,And every time it runs into\Nthis variable {\i1}x{\i0}
Dialogue: 0,0:03:33.48,0:03:35.48,Default,,0000,0000,0000,,it's gonna reuse the same variable.
Dialogue: 0,0:03:35.48,0:03:38.12,Default,,0000,0000,0000,,And right now the last value\Nwe assigned to it was 11,
Dialogue: 0,0:03:38.12,0:03:39.49,Default,,0000,0000,0000,,so it's always gonna be 11.
Dialogue: 0,0:03:39.49,0:03:41.49,Default,,0000,0000,0000,,And here's where the magic comes in.
Dialogue: 0,0:03:41.49,0:03:44.38,Default,,0000,0000,0000,,Somewhere in the draw loop,\Nwe're gonna change the value of {\i1}x{\i0}
Dialogue: 0,0:03:44.38,0:03:46.72,Default,,0000,0000,0000,,to be a little more\Nthan it used to be, like this:
Dialogue: 0,0:03:46.72,0:03:51.99,Default,,0000,0000,0000,,{\i1}x{\i0} gets the old value of {\i1}x{\i0}\Nplus, let's say, 1.
Dialogue: 0,0:03:52.75,0:03:54.27,Default,,0000,0000,0000,,Yay! It works!
Dialogue: 0,0:03:54.76,0:03:56.89,Default,,0000,0000,0000,,Except, it's so smeary.
Dialogue: 0,0:03:56.89,0:03:59.16,Default,,0000,0000,0000,,And if you're wondering\Nwhy it looks that way,
Dialogue: 0,0:03:59.16,0:04:02.38,Default,,0000,0000,0000,,it's because we forgot to draw\Nthis background inside the draw loop.
Dialogue: 0,0:04:02.38,0:04:04.45,Default,,0000,0000,0000,,So it's drawing the car\Nover and over again,
Dialogue: 0,0:04:04.45,0:04:07.07,Default,,0000,0000,0000,,but you can see all the old cars\Nunderneath the new one.
Dialogue: 0,0:04:07.07,0:04:11.74,Default,,0000,0000,0000,,So if I just pull this line\Ninto the top of the draw loop, like that,
Dialogue: 0,0:04:12.04,0:04:15.98,Default,,0000,0000,0000,,and then press "Restart"\Nso I can see my car again...
Dialogue: 0,0:04:15.98,0:04:18.03,Default,,0000,0000,0000,,Yay! It's so perfect!
Dialogue: 0,0:04:18.03,0:04:19.97,Default,,0000,0000,0000,,And if we wanna make the car go faster,
Dialogue: 0,0:04:19.97,0:04:22.63,Default,,0000,0000,0000,,we can just change how much\Nwe increase {\i1}x{\i0} by every time.
Dialogue: 0,0:04:22.63,0:04:24.83,Default,,0000,0000,0000,,So if we make it 10, whoo!\NIt's off the screen!
Dialogue: 0,0:04:24.83,0:04:28.73,Default,,0000,0000,0000,,And I can even make it negative,\Nso {\i1}x - 10{\i0} and...
Dialogue: 0,0:04:28.73,0:04:29.78,Default,,0000,0000,0000,,Here it comes!
Dialogue: 0,0:04:30.02,0:04:32.20,Default,,0000,0000,0000,,Make it positive again,\Nwhoops...
Dialogue: 0,0:04:33.48,0:04:34.54,Default,,0000,0000,0000,,There it goes.
Dialogue: 0,0:04:34.54,0:04:36.55,Default,,0000,0000,0000,,So here are the important things\Nto remember:
Dialogue: 0,0:04:36.55,0:04:39.16,Default,,0000,0000,0000,,This thing right here\Nis called the draw loop.
Dialogue: 0,0:04:39.16,0:04:41.25,Default,,0000,0000,0000,,You should put\Nyour drawing code inside here
Dialogue: 0,0:04:41.25,0:04:43.49,Default,,0000,0000,0000,,so it'll get drawn over and over again.
Dialogue: 0,0:04:43.49,0:04:46.29,Default,,0000,0000,0000,,And then, you wanna make\Na variable outside your draw loop.
Dialogue: 0,0:04:46.29,0:04:49.25,Default,,0000,0000,0000,,It's super important to make\Nthe variable outside the draw loop
Dialogue: 0,0:04:49.25,0:04:51.50,Default,,0000,0000,0000,,so we can reuse the same one every time.
Dialogue: 0,0:04:51.50,0:04:53.52,Default,,0000,0000,0000,,Then inside the draw loop right here,
Dialogue: 0,0:04:53.52,0:04:56.03,Default,,0000,0000,0000,,we're gonna change\Nthe variable a little bit,
Dialogue: 0,0:04:56.03,0:04:58.24,Default,,0000,0000,0000,,usually by setting it to its old value,
Dialogue: 0,0:04:58.24,0:05:01.49,Default,,0000,0000,0000,,plus some number--\Nplus or minus some number.
Dialogue: 0,0:05:01.95,0:05:05.50,Default,,0000,0000,0000,,And finally, you wanna use your variable\Nsomewhere in your drawing code
Dialogue: 0,0:05:05.50,0:05:07.74,Default,,0000,0000,0000,,so that your drawing\Nlooks different every time.
Dialogue: 0,0:05:07.74,0:05:10.05,Default,,0000,0000,0000,,And... that's it!