WEBVTT

00:00:00.115 --> 00:00:03.180
At this point, you might realize
that you've been defining

00:00:03.180 --> 00:00:07.202
a particular function every time
you wanted to animate your program--

00:00:07.202 --> 00:00:09.191
the `draw` function.

00:00:09.191 --> 00:00:13.436
To remind you, here's our
animated car program again.

00:00:13.436 --> 00:00:16.992
It has this variable named x,
it starts off at 11.

00:00:16.992 --> 00:00:22.648
And then inside the `draw` function,
it draws the car at that variable x,

00:00:22.648 --> 00:00:26.638
and then it adds three
to that variable x each time.

00:00:26.638 --> 00:00:28.501
And that results in a car

00:00:28.501 --> 00:00:32.447
that's moving three pixels
across the screen continuously.

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

00:00:34.723 --> 00:00:37.683
But now that you've learned
how to make your own functions,

00:00:37.683 --> 00:00:41.583
you might be wondering,
what about this `draw` function?

00:00:41.583 --> 00:00:44.109
Why is it always named `draw`?

00:00:44.109 --> 00:00:45.904
Is it a custom function?

00:00:45.904 --> 00:00:48.894
And those are very good questions.

00:00:48.894 --> 00:00:51.985
You see, in the ProcessingJS library,

00:00:51.985 --> 00:00:56.132
the `draw` function is one of
a few predefined functions

00:00:56.132 --> 00:01:01.009
that give our programs more control
over what's happening with the canvas.

00:01:01.009 --> 00:01:04.831
A predefined function is one
that has already been defined

00:01:04.831 --> 00:01:07.209
by the ProcessingJS library.

00:01:07.209 --> 00:01:11.149
But it usually starts off
as an empty definition.

00:01:11.149 --> 00:01:17.045
For example, in the ProcessingJS library,
there's code that looks like this:

00:01:17.045 --> 00:01:19.434
`var draw = function() `

00:01:19.434 --> 00:01:23.266
and then it's just empty,
completely empty.

00:01:23.266 --> 00:01:28.620
Now, we load the ProcessingJS library
into every program here on Khan Academy,

00:01:28.620 --> 00:01:30.904
So you never see this code.

00:01:30.904 --> 00:01:33.647
But trust me, it exists.

00:01:33.647 --> 00:01:41.049
Now I'll comment that code out,
since ProcessingJS already does it for us.

00:01:41.049 --> 00:01:45.308
Now when you redefine `draw`,
in your own program,

00:01:45.308 --> 00:01:49.809
this new definition overrides
the old empty defintion.

00:01:49.809 --> 00:01:51.632
And now the `draw` function

00:01:51.632 --> 00:01:55.497
actually does exciting things,
like drawing a car.

00:01:55.497 --> 00:02:01.375
Now the question is, why does the `draw`
function get called over and over?

00:02:01.375 --> 00:02:05.964
Well, there's also code
in the ProcessingJS library

00:02:05.964 --> 00:02:11.111
that sets a browser timer and
recalls the draw function repeatedly,

00:02:11.111 --> 00:02:13.998
over and over and over.

00:02:13.998 --> 00:02:19.239
We have to name the function `draw`,
because that's the name of the function

00:02:19.239 --> 00:02:22.073
that ProcessingJS is calling repeatedly.

00:02:22.073 --> 00:02:27.543
If we rename this, like let's say
we rename it to `drawCar`.

00:02:27.543 --> 00:02:33.730
And first we get an undefined error, so
we could say `var drawCar`.

00:02:33.730 --> 00:02:37.087
So now you can see, if we
rename this to `drawCar`,

00:02:37.087 --> 00:02:39.651
we don't see any animation any more.

00:02:39.651 --> 00:02:44.692
And that's because this function
isn't being called repeatedly any more,

00:02:44.692 --> 00:02:47.188
because it's not named draw.

00:02:47.188 --> 00:02:50.796
So we have to put the code
that we want repeatedly called

00:02:50.796 --> 00:02:55.912
inside a function spelled `draw` exactly.

00:02:55.912 --> 00:03:00.594
So I'll just do it again,
and I'll just call `drawCar` from here.

00:03:00.594 --> 00:03:03.237
Aha! We've got it back.

00:03:03.237 --> 00:03:07.206
All right, so it needs to be called draw,

00:03:07.206 --> 00:03:12.970
and this also means that you shouldn't
name your own custom functions `draw`,

00:03:12.970 --> 00:03:18.228
unless you want them to be
treated specially and called over and over.

00:03:18.228 --> 00:03:23.528
And also remember, you can't have
multiple functions named `draw`.

00:03:23.528 --> 00:03:27.889
Only the last definition will count.

00:03:27.889 --> 00:03:30.813
If we had a `rect` inside here--

00:03:30.813 --> 00:03:35.143
So now we can see that our car
isn't being drawn any more,

00:03:35.143 --> 00:03:40.495
and only the rect is being drawn instead,
because only the last defintion counts.

00:03:40.495 --> 00:03:43.166
So let's get rid of that one.

00:03:43.166 --> 00:03:48.289
Now the draw function is not the
only predefined function

00:03:48.289 --> 00:03:50.499
that has this special behavior.

00:03:50.499 --> 00:03:52.682
There are also a bunch of functions

00:03:52.682 --> 00:03:56.692
for responding to mouse
interactions and keypresses.

00:03:56.692 --> 00:04:01.624
Let's say we want to have a program
that draws a colored ellipse

00:04:01.624 --> 00:04:04.716
wherever the user moves the mouse.

00:04:04.716 --> 00:04:09.042
So we could do that with
a function like this.

00:04:09.042 --> 00:04:15.666
[typing]

00:04:19.998 --> 00:04:22.545
All right, oh, beautiful.

00:04:22.545 --> 00:04:27.224
Now, this function is being called
over and over,

00:04:27.224 --> 00:04:31.176
even when the user isn't
moving the mouse, like right now.

00:04:31.176 --> 00:04:34.703
And this program, it works, it does
what we want it to do,

00:04:34.703 --> 00:04:37.902
it's painting these nice ellipses
all over the screen.

00:04:37.902 --> 00:04:42.114
But as it turns out, there's
a better way to do the same thing

00:04:42.114 --> 00:04:44.288
that's more efficient.

00:04:44.288 --> 00:04:51.892
So we can change the `draw` function
to `mouseMoved`, and let's see.

00:04:51.892 --> 00:04:54.577
And it still works.

00:04:54.577 --> 00:04:58.361
You see, our environment checks programs

00:04:58.361 --> 00:05:00.754
to see if they've defined
a `mouseMoved` function,

00:05:00.754 --> 00:05:05.457
and if so, it calls that function
whenever the user moves the mouse.

00:05:05.457 --> 00:05:10.029
But it won't be called
if the user isn't moving the mouse.

00:05:10.029 --> 00:05:13.423
So before, we were calling
the code in the `draw` function

00:05:13.423 --> 00:05:15.908
when we didn't need to, over and over.

00:05:15.908 --> 00:05:20.265
And now, we're only calling
this code in `mouseMoved`

00:05:20.265 --> 00:05:23.292
when the mouseX or mouseY
have actually changed.

00:05:23.292 --> 00:05:27.313
So our program is more efficient,
and that's a good thing.

00:05:27.313 --> 00:05:30.728
Generally, if you only want to
change your program output

00:05:30.728 --> 00:05:34.525
when the user moves the mouse,
then it's better to have that code

00:05:34.525 --> 00:05:37.212
inside the `mouseMoved` function.

00:05:37.212 --> 00:05:40.987
And there are a bunch more
predefined functions like that,

00:05:40.987 --> 00:05:44.655
which you can see more examples of
in the documentation.

00:05:44.655 --> 00:05:48.872
Like `mousePressed`, `mouseReleased`,
`keyPressed`, and more.

00:05:48.872 --> 00:05:53.993
So remember, if you want to use
a special predefined function,

00:05:53.993 --> 00:05:59.244
like `mouseMoved` or `draw`,
spell it correctly, and use it correctly.

00:05:59.244 --> 00:06:03.410
If you don't, then make sure you
give your own custom functions

00:06:03.410 --> 00:06:05.967
a new, unique name.