[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.12,0:00:03.18,Default,,0000,0000,0000,,At this point, you might realize\Nthat you've been defining
Dialogue: 0,0:00:03.18,0:00:07.20,Default,,0000,0000,0000,,a particular function every time\Nyou wanted to animate your program--
Dialogue: 0,0:00:07.20,0:00:09.19,Default,,0000,0000,0000,,the `draw` function.
Dialogue: 0,0:00:09.19,0:00:13.44,Default,,0000,0000,0000,,To remind you, here's our\Nanimated car program again.
Dialogue: 0,0:00:13.44,0:00:16.99,Default,,0000,0000,0000,,It has this variable named x,\Nit starts off at 11.
Dialogue: 0,0:00:16.99,0:00:22.65,Default,,0000,0000,0000,,And then inside the `draw` function,\Nit draws the car at that variable x,
Dialogue: 0,0:00:22.65,0:00:26.64,Default,,0000,0000,0000,,and then it adds three\Nto that variable x each time.
Dialogue: 0,0:00:26.64,0:00:28.50,Default,,0000,0000,0000,,And that results in a car
Dialogue: 0,0:00:28.50,0:00:32.45,Default,,0000,0000,0000,,that's moving three pixels\Nacross the screen continuously.
Dialogue: 0,0:00:32.45,0:00:34.72,Default,,0000,0000,0000,,So, that's how this works.
Dialogue: 0,0:00:34.72,0:00:37.68,Default,,0000,0000,0000,,But now that you've learned\Nhow to make your own functions,
Dialogue: 0,0:00:37.68,0:00:41.58,Default,,0000,0000,0000,,you might be wondering,\Nwhat about this `draw` function?
Dialogue: 0,0:00:41.58,0:00:44.11,Default,,0000,0000,0000,,Why is it always named `draw`?
Dialogue: 0,0:00:44.11,0:00:45.90,Default,,0000,0000,0000,,Is it a custom function?
Dialogue: 0,0:00:45.90,0:00:48.89,Default,,0000,0000,0000,,And those are very good questions.
Dialogue: 0,0:00:48.89,0:00:51.98,Default,,0000,0000,0000,,You see, in the ProcessingJS library,
Dialogue: 0,0:00:51.98,0:00:56.13,Default,,0000,0000,0000,,the `draw` function is one of\Na few predefined functions
Dialogue: 0,0:00:56.13,0:01:01.01,Default,,0000,0000,0000,,that give our programs more control\Nover what's happening with the canvas.
Dialogue: 0,0:01:01.01,0:01:04.83,Default,,0000,0000,0000,,A predefined function is one\Nthat has already been defined
Dialogue: 0,0:01:04.83,0:01:07.21,Default,,0000,0000,0000,,by the ProcessingJS library.
Dialogue: 0,0:01:07.21,0:01:11.15,Default,,0000,0000,0000,,But it usually starts off\Nas an empty definition.
Dialogue: 0,0:01:11.15,0:01:17.04,Default,,0000,0000,0000,,For example, in the ProcessingJS library,\Nthere's code that looks like this:
Dialogue: 0,0:01:17.04,0:01:19.43,Default,,0000,0000,0000,,`var draw = function() `
Dialogue: 0,0:01:19.43,0:01:23.27,Default,,0000,0000,0000,,and then it's just empty,\Ncompletely empty.
Dialogue: 0,0:01:23.27,0:01:28.62,Default,,0000,0000,0000,,Now, we load the ProcessingJS library\Ninto every program here on Khan Academy,
Dialogue: 0,0:01:28.62,0:01:30.90,Default,,0000,0000,0000,,So you never see this code.
Dialogue: 0,0:01:30.90,0:01:33.65,Default,,0000,0000,0000,,But trust me, it exists.
Dialogue: 0,0:01:33.65,0:01:41.05,Default,,0000,0000,0000,,Now I'll comment that code out,\Nsince ProcessingJS already does it for us.
Dialogue: 0,0:01:41.05,0:01:45.31,Default,,0000,0000,0000,,Now when you redefine `draw`,\Nin your own program,
Dialogue: 0,0:01:45.31,0:01:49.81,Default,,0000,0000,0000,,this new definition overrides\Nthe old empty defintion.
Dialogue: 0,0:01:49.81,0:01:51.63,Default,,0000,0000,0000,,And now the `draw` function
Dialogue: 0,0:01:51.63,0:01:55.50,Default,,0000,0000,0000,,actually does exciting things,\Nlike drawing a car.
Dialogue: 0,0:01:55.50,0:02:01.38,Default,,0000,0000,0000,,Now the question is, why does the `draw`\Nfunction get called over and over?
Dialogue: 0,0:02:01.38,0:02:05.96,Default,,0000,0000,0000,,Well, there's also code\Nin the ProcessingJS library
Dialogue: 0,0:02:05.96,0:02:11.11,Default,,0000,0000,0000,,that sets a browser timer and\Nrecalls the draw function repeatedly,
Dialogue: 0,0:02:11.11,0:02:13.100,Default,,0000,0000,0000,,over and over and over.
Dialogue: 0,0:02:13.100,0:02:19.24,Default,,0000,0000,0000,,We have to name the function `draw`,\Nbecause that's the name of the function
Dialogue: 0,0:02:19.24,0:02:22.07,Default,,0000,0000,0000,,that ProcessingJS is calling repeatedly.
Dialogue: 0,0:02:22.07,0:02:27.54,Default,,0000,0000,0000,,If we rename this, like let's say\Nwe rename it to `drawCar`.
Dialogue: 0,0:02:27.54,0:02:33.73,Default,,0000,0000,0000,,And first we get an undefined error, so\Nwe could say `var drawCar`.
Dialogue: 0,0:02:33.73,0:02:37.09,Default,,0000,0000,0000,,So now you can see, if we\Nrename this to `drawCar`,
Dialogue: 0,0:02:37.09,0:02:39.65,Default,,0000,0000,0000,,we don't see any animation any more.
Dialogue: 0,0:02:39.65,0:02:44.69,Default,,0000,0000,0000,,And that's because this function\Nisn't being called repeatedly any more,
Dialogue: 0,0:02:44.69,0:02:47.19,Default,,0000,0000,0000,,because it's not named draw.
Dialogue: 0,0:02:47.19,0:02:50.80,Default,,0000,0000,0000,,So we have to put the code\Nthat we want repeatedly called
Dialogue: 0,0:02:50.80,0:02:55.91,Default,,0000,0000,0000,,inside a function spelled `draw` exactly.
Dialogue: 0,0:02:55.91,0:03:00.59,Default,,0000,0000,0000,,So I'll just do it again,\Nand I'll just call `drawCar` from here.
Dialogue: 0,0:03:00.59,0:03:03.24,Default,,0000,0000,0000,,Aha! We've got it back.
Dialogue: 0,0:03:03.24,0:03:07.21,Default,,0000,0000,0000,,All right, so it needs to be called draw,
Dialogue: 0,0:03:07.21,0:03:12.97,Default,,0000,0000,0000,,and this also means that you shouldn't\Nname your own custom functions `draw`,
Dialogue: 0,0:03:12.97,0:03:18.23,Default,,0000,0000,0000,,unless you want them to be\Ntreated specially and called over and over.
Dialogue: 0,0:03:18.23,0:03:23.53,Default,,0000,0000,0000,,And also remember, you can't have\Nmultiple functions named `draw`.
Dialogue: 0,0:03:23.53,0:03:27.89,Default,,0000,0000,0000,,Only the last definition will count.
Dialogue: 0,0:03:27.89,0:03:30.81,Default,,0000,0000,0000,,If we had a `rect` inside here--
Dialogue: 0,0:03:30.81,0:03:35.14,Default,,0000,0000,0000,,So now we can see that our car\Nisn't being drawn any more,
Dialogue: 0,0:03:35.14,0:03:40.50,Default,,0000,0000,0000,,and only the rect is being drawn instead,\Nbecause only the last defintion counts.
Dialogue: 0,0:03:40.50,0:03:43.17,Default,,0000,0000,0000,,So let's get rid of that one.
Dialogue: 0,0:03:43.17,0:03:48.29,Default,,0000,0000,0000,,Now the draw function is not the\Nonly predefined function
Dialogue: 0,0:03:48.29,0:03:50.50,Default,,0000,0000,0000,,that has this special behavior.
Dialogue: 0,0:03:50.50,0:03:52.68,Default,,0000,0000,0000,,There are also a bunch of functions
Dialogue: 0,0:03:52.68,0:03:56.69,Default,,0000,0000,0000,,for responding to mouse\Ninteractions and keypresses.
Dialogue: 0,0:03:56.69,0:04:01.62,Default,,0000,0000,0000,,Let's say we want to have a program\Nthat draws a colored ellipse
Dialogue: 0,0:04:01.62,0:04:04.72,Default,,0000,0000,0000,,wherever the user moves the mouse.
Dialogue: 0,0:04:04.72,0:04:09.04,Default,,0000,0000,0000,,So we could do that with\Na function like this.
Dialogue: 0,0:04:09.04,0:04:15.67,Default,,0000,0000,0000,,[typing]
Dialogue: 0,0:04:19.100,0:04:22.54,Default,,0000,0000,0000,,All right, oh, beautiful.
Dialogue: 0,0:04:22.54,0:04:27.22,Default,,0000,0000,0000,,Now, this function is being called\Nover and over,
Dialogue: 0,0:04:27.22,0:04:31.18,Default,,0000,0000,0000,,even when the user isn't\Nmoving the mouse, like right now.
Dialogue: 0,0:04:31.18,0:04:34.70,Default,,0000,0000,0000,,And this program, it works, it does\Nwhat we want it to do,
Dialogue: 0,0:04:34.70,0:04:37.90,Default,,0000,0000,0000,,it's painting these nice ellipses\Nall over the screen.
Dialogue: 0,0:04:37.90,0:04:42.11,Default,,0000,0000,0000,,But as it turns out, there's\Na better way to do the same thing
Dialogue: 0,0:04:42.11,0:04:44.29,Default,,0000,0000,0000,,that's more efficient.
Dialogue: 0,0:04:44.29,0:04:51.89,Default,,0000,0000,0000,,So we can change the `draw` function\Nto `mouseMoved`, and let's see.
Dialogue: 0,0:04:51.89,0:04:54.58,Default,,0000,0000,0000,,And it still works.
Dialogue: 0,0:04:54.58,0:04:58.36,Default,,0000,0000,0000,,You see, our environment checks programs
Dialogue: 0,0:04:58.36,0:05:00.75,Default,,0000,0000,0000,,to see if they've defined\Na `mouseMoved` function,
Dialogue: 0,0:05:00.75,0:05:05.46,Default,,0000,0000,0000,,and if so, it calls that function\Nwhenever the user moves the mouse.
Dialogue: 0,0:05:05.46,0:05:10.03,Default,,0000,0000,0000,,But it won't be called\Nif the user isn't moving the mouse.
Dialogue: 0,0:05:10.03,0:05:13.42,Default,,0000,0000,0000,,So before, we were calling\Nthe code in the `draw` function
Dialogue: 0,0:05:13.42,0:05:15.91,Default,,0000,0000,0000,,when we didn't need to, over and over.
Dialogue: 0,0:05:15.91,0:05:20.26,Default,,0000,0000,0000,,And now, we're only calling\Nthis code in `mouseMoved`
Dialogue: 0,0:05:20.26,0:05:23.29,Default,,0000,0000,0000,,when the mouseX or mouseY\Nhave actually changed.
Dialogue: 0,0:05:23.29,0:05:27.31,Default,,0000,0000,0000,,So our program is more efficient,\Nand that's a good thing.
Dialogue: 0,0:05:27.31,0:05:30.73,Default,,0000,0000,0000,,Generally, if you only want to\Nchange your program output
Dialogue: 0,0:05:30.73,0:05:34.52,Default,,0000,0000,0000,,when the user moves the mouse,\Nthen it's better to have that code
Dialogue: 0,0:05:34.52,0:05:37.21,Default,,0000,0000,0000,,inside the `mouseMoved` function.
Dialogue: 0,0:05:37.21,0:05:40.99,Default,,0000,0000,0000,,And there are a bunch more\Npredefined functions like that,
Dialogue: 0,0:05:40.99,0:05:44.66,Default,,0000,0000,0000,,which you can see more examples of\Nin the documentation.
Dialogue: 0,0:05:44.66,0:05:48.87,Default,,0000,0000,0000,,Like `mousePressed`, `mouseReleased`,\N`keyPressed`, and more.
Dialogue: 0,0:05:48.87,0:05:53.99,Default,,0000,0000,0000,,So remember, if you want to use\Na special predefined function,
Dialogue: 0,0:05:53.99,0:05:59.24,Default,,0000,0000,0000,,like `mouseMoved` or `draw`,\Nspell it correctly, and use it correctly.
Dialogue: 0,0:05:59.24,0:06:03.41,Default,,0000,0000,0000,,If you don't, then make sure you\Ngive your own custom functions
Dialogue: 0,0:06:03.41,0:06:05.97,Default,,0000,0000,0000,,a new, unique name.