At this point, you might realize that you've been defining
a particular function every time you wanted to animate your program--
the `draw` function.
To remind you, here's our animated car program again.
It has this variable named x, it starts off at 11.
And then inside the `draw` function, it draws the car at that variable x,
and then it adds three to that variable x each time.
And that results in a car
that's moving three pixels across the screen continuously.
So, that's how this works.
But now that you've learned how to make your own functions,
you might be wondering, what about this `draw` function?
Why is it always named `draw`?
Is it a custom function?
And those are very good questions.
You see, in the ProcessingJS library,
the `draw` function is one of a few predefined functions
that give our programs more control over what's happening with the canvas.
A predefined function is one that has already been defined
by the ProcessingJS library.
But it usually starts off as an empty definition.
For example, in the ProcessingJS library, there's code that looks like this:
`var draw = function() `
and then it's just empty, completely empty.
Now, we load the ProcessingJS library into every program here on Khan Academy,
So you never see this code.
But trust me, it exists.
Now I'll comment that code out, since ProcessingJS already does it for us.
Now when you redefine `draw`, in your own program,
this new definition overrides the old empty defintion.
And now the `draw` function
actually does exciting things, like drawing a car.
Now the question is, why does the `draw` function get called over and over?
Well, there's also code in the ProcessingJS library
that sets a browser timer and recalls the draw function repeatedly,
over and over and over.
We have to name the function `draw`, because that's the name of the function
that ProcessingJS is calling repeatedly.
If we rename this, like let's say we rename it to `drawCar`.
And first we get an undefined error, so we could say `var drawCar`.
So now you can see, if we rename this to `drawCar`,
we don't see any animation any more.
And that's because this function isn't being called repeatedly any more,
because it's not named draw.
So we have to put the code that we want repeatedly called
inside a function spelled `draw` exactly.
So I'll just do it again, and I'll just call `drawCar` from here.
Aha! We've got it back.
All right, so it needs to be called draw,
and this also means that you shouldn't name your own custom functions `draw`,
unless you want them to be treated specially and called over and over.
And also remember, you can't have multiple functions named `draw`.
Only the last definition will count.
If we had a `rect` inside here--
So now we can see that our car isn't being drawn any more,
and only the rect is being drawn instead, because only the last defintion counts.
So let's get rid of that one.
Now the draw function is not the only predefined function
that has this special behavior.
There are also a bunch of functions
for responding to mouse interactions and keypresses.
Let's say we want to have a program that draws a colored ellipse
wherever the user moves the mouse.
So we could do that with a function like this.
[typing]
All right, oh, beautiful.
Now, this function is being called over and over,
even when the user isn't moving the mouse, like right now.
And this program, it works, it does what we want it to do,
it's painting these nice ellipses all over the screen.
But as it turns out, there's a better way to do the same thing
that's more efficient.
So we can change the `draw` function to `mouseMoved`, and let's see.
And it still works.
You see, our environment checks programs
to see if they've defined a `mouseMoved` function,
and if so, it calls that function whenever the user moves the mouse.
But it won't be called if the user isn't moving the mouse.
So before, we were calling the code in the `draw` function
when we didn't need to, over and over.
And now, we're only calling this code in `mouseMoved`
when the mouseX or mouseY have actually changed.
So our program is more efficient, and that's a good thing.
Generally, if you only want to change your program output
when the user moves the mouse, then it's better to have that code
inside the `mouseMoved` function.
And there are a bunch more predefined functions like that,
which you can see more examples of in the documentation.
Like `mousePressed`, `mouseReleased`, `keyPressed`, and more.
So remember, if you want to use a special predefined function,
like `mouseMoved` or `draw`, spell it correctly, and use it correctly.
If you don't, then make sure you give your own custom functions
a new, unique name.