1
00:00:00,115 --> 00:00:03,180
A ce stade, vous avez peut-être
réalisé que vous avez défini

2
00:00:03,180 --> 00:00:07,202
une fonction particulière à chaque fois
que vous vouliez animer votre programme,

3
00:00:07,202 --> 00:00:09,191
la fonction `draw`.

4
00:00:09,191 --> 00:00:13,436
En guise de rappel, voici à nouveau
notre program d'animation de voiture.

5
00:00:13,436 --> 00:00:16,992
il a la variable appelée x,
qui commence avec une valeur de 11.

6
00:00:16,992 --> 00:00:22,648
Puis dans la fonction `draw`, il dessine
la voiture à la position contenue dans x,

7
00:00:22,648 --> 00:00:26,638
puis il ajoute trois à cette variable x,
et ceci à chaque appel de la fonction.

8
00:00:26,638 --> 00:00:28,501
A cela nous donne une voiture

9
00:00:28,501 --> 00:00:32,447
qui se déplace constamment de 
trois pixels à travers l'écran.

10
00:00:32,447 --> 00:00:34,723
Donc voilà comment cela fonctionne.

11
00:00:34,723 --> 00:00:37,683
Maintenant que vous avez appris
à faire vos propres fonctions,

12
00:00:37,683 --> 00:00:41,583
vous vous demandez peut-être,
ce qu'est cette fonction `draw`?

13
00:00:41,583 --> 00:00:44,109
Pourquoi est elle nommée `draw`?

14
00:00:44,109 --> 00:00:45,904
Est-ce une fonction personnalisée?

15
00:00:45,904 --> 00:00:48,894
Et ce sont de très bonnes questions.

16
00:00:48,894 --> 00:00:51,985
Voyez vous, dans la
librairie ProcessingJS,

17
00:00:51,985 --> 00:00:56,132
la fonction `draw` est l'une des
quelques fonctions prédéfinies

18
00:00:56,132 --> 00:01:01,009
qui donne à notre programme un
meilleur contrôle de la zone de dessin.

19
00:01:01,009 --> 00:01:04,831
Les fonctions prédéfinies sont celle
qui ont déjà été définies

20
00:01:04,831 --> 00:01:07,209
par la librairie ProcessingJS.

21
00:01:07,209 --> 00:01:11,149
Mais d'habitude aucun code
n'y est défini.

22
00:01:11,149 --> 00:01:17,045
Par exemple, dans la librairie
ProcessingJS, il y a un code comme ça:

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

24
00:01:19,434 --> 00:01:23,266
Et là, c'est simplement vide,
complètement vide.

25
00:01:23,266 --> 00:01:28,620
Comme nous chargeons ProcessingJS
dans chaque programme de la Khan Academy

26
00:01:28,620 --> 00:01:30,904
Vous n'avez jamais vu ce code.

27
00:01:30,904 --> 00:01:33,647
Mais croyez moi, il existe.

28
00:01:33,647 --> 00:01:41,049
Maintenant je vais commenter cela, car
ProcessingJS le fait déjà pour nous.

29
00:01:41,049 --> 00:01:45,308
Maintenant si vous redéfinissez `draw`,
dans votre program,

30
00:01:45,308 --> 00:01:49,809
Cette nouvelle version masque
l'ancienne définition vide.

31
00:01:49,809 --> 00:01:51,632
Et maintenant la fonction `draw`

32
00:01:51,632 --> 00:01:55,497
fait des choses passionnantes,
comme dessiner une voiture.

33
00:01:55,497 --> 00:02:01,375
Maintenant la questions est: pourquoi la
fonction `draw` est appelée en continu?

34
00:02:01,375 --> 00:02:05,964
Eh bien, il y a aussi du code
dans la librairie ProcessingJS

35
00:02:05,964 --> 00:02:11,111
qui définit une minuterie et appel
la fonction `draw` de manière répétée,

36
00:02:11,111 --> 00:02:13,998
encore et encore et encore.

37
00:02:13,998 --> 00:02:19,239
Nous devons nommer la fonction `draw`,
car c'est le nom de la fonction

38
00:02:19,239 --> 00:02:22,073
que ProcessingJS appel de manière répétée.

39
00:02:22,073 --> 00:02:27,543
Si nous renommions cela, par emple
nous la renommons `drawCar`.

40
00:02:27,543 --> 00:02:33,730
D'abord nous avons une erreur "undefined",
donc il faudrait écrire `var drawCar`.

41
00:02:33,730 --> 00:02:37,087
Maintenant vous pouvez voir, si nous
renommons cela : `drawCar`,

42
00:02:37,087 --> 00:02:39,651
nous ne voyons plus d'animation.

43
00:02:39,651 --> 00:02:44,692
Et c'est parce que cette fonction
n'est plus appelée de manière répétée,

44
00:02:44,692 --> 00:02:47,188
car elle n'est pas nommée draw.

45
00:02:47,188 --> 00:02:50,796
Donc nous avons mis le code à
appeler de manière répétée

46
00:02:50,796 --> 00:02:55,912
dans une fonction qui s'écrit `draw`.

47
00:02:55,912 --> 00:03:00,594
Donc je vais juste le refaire encore,
et je vais appeler `drawCar`ici.

48
00:03:00,594 --> 00:03:03,237
Aha! Ca remarche.

49
00:03:03,237 --> 00:03:07,206
Ok, donc il a besoin de s'appeler draw,

50
00:03:07,206 --> 00:03:12,970
et cela veut aussi dire que vous ne devez
pas nommer vos propres fonctions `draw`,

51
00:03:12,970 --> 00:03:18,228
a part si vous voulez qu'elle soit traitée
particulièrement et répétée en continu.

52
00:03:18,228 --> 00:03:23,528
Et souvenez vous, vous ne pouvez pas avoir
plusieurs fonctions nommées `draw`.

53
00:03:23,528 --> 00:03:27,889
Seul la dernière définition va
être prise en compte.

54
00:03:27,889 --> 00:03:30,813
Si on a un `rect` la dedans--

55
00:03:30,813 --> 00:03:35,143
Donc la nous pouvons voir que notre
voiture n'est plus dessinée,

56
00:03:35,143 --> 00:03:40,495
seul le rectangle est dessiné à la place,
car seul la dernière définition compte.

57
00:03:40,495 --> 00:03:43,166
Donc débarrassons-nous de celle-là.

58
00:03:43,166 --> 00:03:48,289
La fonction draw n'est pas la seule
fonction prédéfinie

59
00:03:48,289 --> 00:03:50,499
qui a un comportement spécial.

60
00:03:50,499 --> 00:03:52,682
Il y a aussi un groupe de fonctions

61
00:03:52,682 --> 00:03:56,692
pour répondre aux actions de la souris
et aux appuis de touches du clavier.

62
00:03:56,692 --> 00:04:01,624
Disons que l'on veut un program
qui dessine une ellipse colorée

63
00:04:01,624 --> 00:04:04,716
à l'emplacement ou l'utilisateur déplace
le pointeur de la souris.

64
00:04:04,716 --> 00:04:09,042
Donc nous pouvons faire cela avec
une fonction comme ça.

65
00:04:09,042 --> 00:04:15,666
[frappe au clavier]

66
00:04:19,998 --> 00:04:22,545
Ok, oh, magnifique.

67
00:04:22,545 --> 00:04:27,224
Maintenant, cette fonction est appelée
encore et encore,

68
00:04:27,224 --> 00:04:31,176
même si l'utilisateur ne déplace
pas la souris, comme maintenant.

69
00:04:31,176 --> 00:04:34,703
Et ce programme, il fonctionne, il fait ce
que nous voulons qu'il fasse.

70
00:04:34,703 --> 00:04:37,902
Il dessine ces jolies ellipses
partout sur l'écran.

71
00:04:37,902 --> 00:04:42,114
Mais en fait, il y a un meilleur
moyen de faire la même chose

72
00:04:42,114 --> 00:04:44,288
qui est plus efficace.

73
00:04:44,288 --> 00:04:51,892
Nous pouvons changer la fonction `draw` en
`mouseMoved`, et voyons.

74
00:04:51,892 --> 00:04:54,577
Ca marche toujours.

75
00:04:54,577 --> 00:04:58,361
Vous voyez, notre environnement regarde si
notre programme

76
00:04:58,361 --> 00:05:00,754
à définit une fonction `mouseMoved` ,

77
00:05:00,754 --> 00:05:05,457
et si c'est le cas, il appel cette
fonction quand la souris se déplace.

78
00:05:05,457 --> 00:05:10,029
Mais elle ne sera pas appelée
si l'utilisateur ne déplace pas la souris.

79
00:05:10,029 --> 00:05:13,423
Donc avant, on appelait le code dans
la fonction `draw` lorsque

80
00:05:13,423 --> 00:05:15,908
nous n'en avions pas besoins,
encore et encore

81
00:05:15,908 --> 00:05:20,265
Et maintenant, on appelle ce code
dans `mouseMoved`

82
00:05:20,265 --> 00:05:23,292
seulement lorsque mouseX ou mouseY
a changé.

83
00:05:23,292 --> 00:05:27,313
Donc notre programme est plus efficace,
et c'est une bonne chose.

84
00:05:27,313 --> 00:05:30,728
Généralement, si vous voulez changer le
résultat de votre programme

85
00:05:30,728 --> 00:05:34,525
seulement quand l'utilisateur bouge la
souris, alors c'est mieux de coder

86
00:05:34,525 --> 00:05:37,212
dans la fonction `mouseMoved`.

87
00:05:37,212 --> 00:05:40,987
Et il y a encore quelques autres
fonctions prédéfinies comme ça,

88
00:05:40,987 --> 00:05:44,655
dont vous pouvez trouver plus d'exemples
dans la documentation.

89
00:05:44,655 --> 00:05:48,872
Comme `mousePressed`, `mouseReleased`,
`keyPressed` et plus encore.

90
00:05:48,872 --> 00:05:53,993
Donc souvenez-vous, si vous voulez
utiliser une fonction prédéfinie spéciale,

91
00:05:53,993 --> 00:05:59,244
comme `mouseMoved` ou `draw`, écrivez-là 
correctement, et utilisez-là correctement.

92
00:05:59,244 --> 00:06:03,403
Si vous ne le faites pas, assurez-vous de
donner à vos fonctions personnalisée

93
00:06:03,403 --> 00:06:07,061
un nouveau nom unique.