Special ProcessingJS functions

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.