0:00:00.115,0:00:03.180
At this point, you might realize[br]that you've been defining

0:00:03.180,0:00:07.202
a particular function every time[br]you wanted to animate your program--

0:00:07.202,0:00:09.191
the `draw` function.

0:00:09.191,0:00:13.436
To remind you, here's our[br]animated car program again.

0:00:13.436,0:00:16.992
It has this variable named x,[br]it starts off at 11.

0:00:16.992,0:00:22.648
And then inside the `draw` function,[br]it draws the car at that variable x,

0:00:22.648,0:00:26.638
and then it adds three[br]to that variable x each time.

0:00:26.638,0:00:28.501
And that results in a car

0:00:28.501,0:00:32.447
that's moving three pixels[br]across the screen continuously.

0:00:32.447,0:00:34.723
So, that's how this works.

0:00:34.723,0:00:37.683
But now that you've learned[br]how to make your own functions,

0:00:37.683,0:00:41.583
you might be wondering,[br]what about this `draw` function?

0:00:41.583,0:00:44.109
Why is it always named `draw`?

0:00:44.109,0:00:45.904
Is it a custom function?

0:00:45.904,0:00:48.894
And those are very good questions.

0:00:48.894,0:00:51.985
You see, in the ProcessingJS library,

0:00:51.985,0:00:56.132
the `draw` function is one of[br]a few predefined functions

0:00:56.132,0:01:01.009
that give our programs more control[br]over what's happening with the canvas.

0:01:01.009,0:01:04.831
A predefined function is one[br]that has already been defined

0:01:04.831,0:01:07.209
by the ProcessingJS library.

0:01:07.209,0:01:11.149
But it usually starts off[br]as an empty definition.

0:01:11.149,0:01:17.045
For example, in the ProcessingJS library,[br]there's code that looks like this:

0:01:17.045,0:01:19.434
`var draw = function() `

0:01:19.434,0:01:23.266
and then it's just empty,[br]completely empty.

0:01:23.266,0:01:28.620
Now, we load the ProcessingJS library[br]into every program here on Khan Academy,

0:01:28.620,0:01:30.904
So you never see this code.

0:01:30.904,0:01:33.647
But trust me, it exists.

0:01:33.647,0:01:41.049
Now I'll comment that code out,[br]since ProcessingJS already does it for us.

0:01:41.049,0:01:45.308
Now when you redefine `draw`,[br]in your own program,

0:01:45.308,0:01:49.809
this new definition overrides[br]the old empty defintion.

0:01:49.809,0:01:51.632
And now the `draw` function

0:01:51.632,0:01:55.497
actually does exciting things,[br]like drawing a car.

0:01:55.497,0:02:01.375
Now the question is, why does the `draw`[br]function get called over and over?

0:02:01.375,0:02:05.964
Well, there's also code[br]in the ProcessingJS library

0:02:05.964,0:02:11.111
that sets a browser timer and[br]recalls the draw function repeatedly,

0:02:11.111,0:02:13.998
over and over and over.

0:02:13.998,0:02:19.239
We have to name the function `draw`,[br]because that's the name of the function

0:02:19.239,0:02:22.073
that ProcessingJS is calling repeatedly.

0:02:22.073,0:02:27.543
If we rename this, like let's say[br]we rename it to `drawCar`.

0:02:27.543,0:02:33.730
And first we get an undefined error, so[br]we could say `var drawCar`.

0:02:33.730,0:02:37.087
So now you can see, if we[br]rename this to `drawCar`,

0:02:37.087,0:02:39.651
we don't see any animation any more.

0:02:39.651,0:02:44.692
And that's because this function[br]isn't being called repeatedly any more,

0:02:44.692,0:02:47.188
because it's not named draw.

0:02:47.188,0:02:50.796
So we have to put the code[br]that we want repeatedly called

0:02:50.796,0:02:55.912
inside a function spelled `draw` exactly.

0:02:55.912,0:03:00.594
So I'll just do it again,[br]and I'll just call `drawCar` from here.

0:03:00.594,0:03:03.237
Aha! We've got it back.

0:03:03.237,0:03:07.206
All right, so it needs to be called draw,

0:03:07.206,0:03:12.970
and this also means that you shouldn't[br]name your own custom functions `draw`,

0:03:12.970,0:03:18.228
unless you want them to be[br]treated specially and called over and over.

0:03:18.228,0:03:23.528
And also remember, you can't have[br]multiple functions named `draw`.

0:03:23.528,0:03:27.889
Only the last definition will count.

0:03:27.889,0:03:30.813
If we had a `rect` inside here--

0:03:30.813,0:03:35.143
So now we can see that our car[br]isn't being drawn any more,

0:03:35.143,0:03:40.495
and only the rect is being drawn instead,[br]because only the last defintion counts.

0:03:40.495,0:03:43.166
So let's get rid of that one.

0:03:43.166,0:03:48.289
Now the draw function is not the[br]only predefined function

0:03:48.289,0:03:50.499
that has this special behavior.

0:03:50.499,0:03:52.682
There are also a bunch of functions

0:03:52.682,0:03:56.692
for responding to mouse[br]interactions and keypresses.

0:03:56.692,0:04:01.624
Let's say we want to have a program[br]that draws a colored ellipse

0:04:01.624,0:04:04.716
wherever the user moves the mouse.

0:04:04.716,0:04:09.042
So we could do that with[br]a function like this.

0:04:09.042,0:04:15.666
[typing]

0:04:19.998,0:04:22.545
All right, oh, beautiful.

0:04:22.545,0:04:27.224
Now, this function is being called[br]over and over,

0:04:27.224,0:04:31.176
even when the user isn't[br]moving the mouse, like right now.

0:04:31.176,0:04:34.703
And this program, it works, it does[br]what we want it to do,

0:04:34.703,0:04:37.902
it's painting these nice ellipses[br]all over the screen.

0:04:37.902,0:04:42.114
But as it turns out, there's[br]a better way to do the same thing

0:04:42.114,0:04:44.288
that's more efficient.

0:04:44.288,0:04:51.892
So we can change the `draw` function[br]to `mouseMoved`, and let's see.

0:04:51.892,0:04:54.577
And it still works.

0:04:54.577,0:04:58.361
You see, our environment checks programs

0:04:58.361,0:05:00.754
to see if they've defined[br]a `mouseMoved` function,

0:05:00.754,0:05:05.457
and if so, it calls that function[br]whenever the user moves the mouse.

0:05:05.457,0:05:10.029
But it won't be called[br]if the user isn't moving the mouse.

0:05:10.029,0:05:13.423
So before, we were calling[br]the code in the `draw` function

0:05:13.423,0:05:15.908
when we didn't need to, over and over.

0:05:15.908,0:05:20.265
And now, we're only calling[br]this code in `mouseMoved`

0:05:20.265,0:05:23.292
when the mouseX or mouseY[br]have actually changed.

0:05:23.292,0:05:27.313
So our program is more efficient,[br]and that's a good thing.

0:05:27.313,0:05:30.728
Generally, if you only want to[br]change your program output

0:05:30.728,0:05:34.525
when the user moves the mouse,[br]then it's better to have that code

0:05:34.525,0:05:37.212
inside the `mouseMoved` function.

0:05:37.212,0:05:40.987
And there are a bunch more[br]predefined functions like that,

0:05:40.987,0:05:44.655
which you can see more examples of[br]in the documentation.

0:05:44.655,0:05:48.872
Like `mousePressed`, `mouseReleased`,[br]`keyPressed`, and more.

0:05:48.872,0:05:53.993
So remember, if you want to use[br]a special predefined function,

0:05:53.993,0:05:59.244
like `mouseMoved` or `draw`,[br]spell it correctly, and use it correctly.

0:05:59.244,0:06:03.410
If you don't, then make sure you[br]give your own custom functions

0:06:03.410,0:06:05.967
a new, unique name.