1
00:00:00,115 --> 00:00:03,180
At this point, you might realize
that you've been defining

2
00:00:03,180 --> 00:00:07,202
a particular function every time
you wanted to animate your program--

3
00:00:07,202 --> 00:00:09,191
the `draw` function.

4
00:00:09,191 --> 00:00:13,436
To remind you, here's our
animated car program again.

5
00:00:13,436 --> 00:00:16,992
It has this variable named x,
it starts off at 11.

6
00:00:16,992 --> 00:00:22,648
And then inside the `draw` function,
it draws the car at that variable x,

7
00:00:22,648 --> 00:00:26,638
and then it adds three
to that variable x each time.

8
00:00:26,638 --> 00:00:28,501
And that results in a car

9
00:00:28,501 --> 00:00:32,447
that's moving three pixels
across the screen continuously.

10
00:00:32,447 --> 00:00:34,723
So, that's how this works.

11
00:00:34,723 --> 00:00:37,683
But now that you've learned
how to make your own functions,

12
00:00:37,683 --> 00:00:41,583
you might be wondering,
what about this `draw` function?

13
00:00:41,583 --> 00:00:44,109
Why is it always named `draw`?

14
00:00:44,109 --> 00:00:45,904
Is it a custom function?

15
00:00:45,904 --> 00:00:48,894
And those are very good questions.

16
00:00:48,894 --> 00:00:51,985
You see, in the ProcessingJS library,

17
00:00:51,985 --> 00:00:56,132
the `draw` function is one of
a few predefined functions

18
00:00:56,132 --> 00:01:01,009
that give our programs more control
over what's happening with the canvas.

19
00:01:01,009 --> 00:01:04,831
A predefined function is one
that has already been defined

20
00:01:04,831 --> 00:01:07,209
by the ProcessingJS library.

21
00:01:07,209 --> 00:01:11,149
But it usually starts off
as an empty definition.

22
00:01:11,149 --> 00:01:17,045
For example, in the ProcessingJS library,
there's code that looks like this:

23
00:01:17,045 --> 00:01:19,434
`var draw = function() `

24
00:01:19,434 --> 00:01:23,266
and then it's just empty,
completely empty.

25
00:01:23,266 --> 00:01:28,620
Now, we load the ProcessingJS library
into every program here on Khan Academy,

26
00:01:28,620 --> 00:01:30,904
So you never see this code.

27
00:01:30,904 --> 00:01:33,647
But trust me, it exists.

28
00:01:33,647 --> 00:01:41,049
Now I'll comment that code out,
since ProcessingJS already does it for us.

29
00:01:41,049 --> 00:01:45,308
Now when you redefine `draw`,
in your own program,

30
00:01:45,308 --> 00:01:49,809
this new definition overrides
the old empty defintion.

31
00:01:49,809 --> 00:01:51,632
And now the `draw` function

32
00:01:51,632 --> 00:01:55,497
actually does exciting things,
like drawing a car.

33
00:01:55,497 --> 00:02:01,375
Now the question is, why does the `draw`
function get called over and over?

34
00:02:01,375 --> 00:02:05,964
Well, there's also code
in the ProcessingJS library

35
00:02:05,964 --> 00:02:11,111
that sets a browser timer and
recalls the draw function repeatedly,

36
00:02:11,111 --> 00:02:13,998
over and over and over.

37
00:02:13,998 --> 00:02:19,239
We have to name the function `draw`,
because that's the name of the function

38
00:02:19,239 --> 00:02:22,073
that ProcessingJS is calling repeatedly.

39
00:02:22,073 --> 00:02:27,543
If we rename this, like let's say
we rename it to `drawCar`.

40
00:02:27,543 --> 00:02:33,730
And first we get an undefined error, so
we could say `var drawCar`.

41
00:02:33,730 --> 00:02:37,087
So now you can see, if we
rename this to `drawCar`,

42
00:02:37,087 --> 00:02:39,651
we don't see any animation any more.

43
00:02:39,651 --> 00:02:44,692
And that's because this function
isn't being called repeatedly any more,

44
00:02:44,692 --> 00:02:47,188
because it's not named draw.

45
00:02:47,188 --> 00:02:50,796
So we have to put the code
that we want repeatedly called

46
00:02:50,796 --> 00:02:55,912
inside a function spelled `draw` exactly.

47
00:02:55,912 --> 00:03:00,594
So I'll just do it again,
and I'll just call `drawCar` from here.

48
00:03:00,594 --> 00:03:03,237
Aha! We've got it back.

49
00:03:03,237 --> 00:03:07,206
All right, so it needs to be called draw,

50
00:03:07,206 --> 00:03:12,970
and this also means that you shouldn't
name your own custom functions `draw`,

51
00:03:12,970 --> 00:03:18,228
unless you want them to be
treated specially and called over and over.

52
00:03:18,228 --> 00:03:23,528
And also remember, you can't have
multiple functions named `draw`.

53
00:03:23,528 --> 00:03:27,889
Only the last definition will count.

54
00:03:27,889 --> 00:03:30,813
If we had a `rect` inside here--

55
00:03:30,813 --> 00:03:35,143
So now we can see that our car
isn't being drawn any more,

56
00:03:35,143 --> 00:03:40,495
and only the rect is being drawn instead,
because only the last defintion counts.

57
00:03:40,495 --> 00:03:43,166
So let's get rid of that one.

58
00:03:43,166 --> 00:03:48,289
Now the draw function is not the
only predefined function

59
00:03:48,289 --> 00:03:50,499
that has this special behavior.

60
00:03:50,499 --> 00:03:52,682
There are also a bunch of functions

61
00:03:52,682 --> 00:03:56,692
for responding to mouse
interactions and keypresses.

62
00:03:56,692 --> 00:04:01,624
Let's say we want to have a program
that draws a colored ellipse

63
00:04:01,624 --> 00:04:04,716
wherever the user moves the mouse.

64
00:04:04,716 --> 00:04:09,042
So we could do that with
a function like this.

65
00:04:09,042 --> 00:04:15,666
[typing]

66
00:04:19,998 --> 00:04:22,545
All right, oh, beautiful.

67
00:04:22,545 --> 00:04:27,224
Now, this function is being called
over and over,

68
00:04:27,224 --> 00:04:31,176
even when the user isn't
moving the mouse, like right now.

69
00:04:31,176 --> 00:04:34,703
And this program, it works, it does
what we want it to do,

70
00:04:34,703 --> 00:04:37,902
it's painting these nice ellipses
all over the screen.

71
00:04:37,902 --> 00:04:42,114
But as it turns out, there's
a better way to do the same thing

72
00:04:42,114 --> 00:04:44,288
that's more efficient.

73
00:04:44,288 --> 00:04:51,892
So we can change the `draw` function
to `mouseMoved`, and let's see.

74
00:04:51,892 --> 00:04:54,577
And it still works.

75
00:04:54,577 --> 00:04:58,361
You see, our environment checks programs

76
00:04:58,361 --> 00:05:00,754
to see if they've defined
a `mouseMoved` function,

77
00:05:00,754 --> 00:05:05,457
and if so, it calls that function
whenever the user moves the mouse.

78
00:05:05,457 --> 00:05:10,029
But it won't be called
if the user isn't moving the mouse.

79
00:05:10,029 --> 00:05:13,423
So before, we were calling
the code in the `draw` function

80
00:05:13,423 --> 00:05:15,908
when we didn't need to, over and over.

81
00:05:15,908 --> 00:05:20,265
And now, we're only calling
this code in `mouseMoved`

82
00:05:20,265 --> 00:05:23,292
when the mouseX or mouseY
have actually changed.

83
00:05:23,292 --> 00:05:27,313
So our program is more efficient,
and that's a good thing.

84
00:05:27,313 --> 00:05:30,728
Generally, if you only want to
change your program output

85
00:05:30,728 --> 00:05:34,525
when the user moves the mouse,
then it's better to have that code

86
00:05:34,525 --> 00:05:37,212
inside the `mouseMoved` function.

87
00:05:37,212 --> 00:05:40,987
And there are a bunch more
predefined functions like that,

88
00:05:40,987 --> 00:05:44,655
which you can see more examples of
in the documentation.

89
00:05:44,655 --> 00:05:48,872
Like `mousePressed`, `mouseReleased`,
`keyPressed`, and more.

90
00:05:48,872 --> 00:05:53,993
So remember, if you want to use
a special predefined function,

91
00:05:53,993 --> 00:05:59,244
like `mouseMoved` or `draw`,
spell it correctly, and use it correctly.

92
00:05:59,244 --> 00:06:03,410
If you don't, then make sure you
give your own custom functions

93
00:06:03,410 --> 00:06:05,967
a new, unique name.