0:00:00.115,0:00:03.180
A ce stade, vous avez peut-être[br]réalisé que vous avez défini

0:00:03.180,0:00:07.202
une fonction particulière à chaque fois[br]que vous vouliez animer votre programme,

0:00:07.202,0:00:09.191
la fonction `draw`.

0:00:09.191,0:00:13.436
En guise de rappel, voici à nouveau[br]notre program d'animation de voiture.

0:00:13.436,0:00:16.992
il a la variable appelée x,[br]qui commence avec une valeur de 11.

0:00:16.992,0:00:22.648
Puis dans la fonction `draw`, il dessine[br]la voiture à la position contenue dans x,

0:00:22.648,0:00:26.638
puis il ajoute trois à cette variable x,[br]et ceci à chaque appel de la fonction.

0:00:26.638,0:00:28.501
A cela nous donne une voiture

0:00:28.501,0:00:32.447
qui se déplace constamment de [br]trois pixels à travers l'écran.

0:00:32.447,0:00:34.723
Donc voilà comment cela fonctionne.

0:00:34.723,0:00:37.683
Maintenant que vous avez appris[br]à faire vos propres fonctions,

0:00:37.683,0:00:41.583
vous vous demandez peut-être,[br]ce qu'est cette fonction `draw`?

0:00:41.583,0:00:44.109
Pourquoi est elle nommée `draw`?

0:00:44.109,0:00:45.904
Est-ce une fonction personnalisée?

0:00:45.904,0:00:48.894
Et ce sont de très bonnes questions.

0:00:48.894,0:00:51.985
Voyez vous, dans la[br]librairie ProcessingJS,

0:00:51.985,0:00:56.132
la fonction `draw` est l'une des[br]quelques fonctions prédéfinies

0:00:56.132,0:01:01.009
qui donne à notre programme un[br]meilleur contrôle de la zone de dessin.

0:01:01.009,0:01:04.831
Les fonctions prédéfinies sont celle[br]qui ont déjà été définies

0:01:04.831,0:01:07.209
par la librairie ProcessingJS.

0:01:07.209,0:01:11.149
Mais d'habitude aucun code[br]n'y est défini.

0:01:11.149,0:01:17.045
Par exemple, dans la librairie[br]ProcessingJS, il y a un code comme ça:

0:01:17.045,0:01:19.434
`var draw = function() { }`

0:01:19.434,0:01:23.266
Et là, c'est simplement vide,[br]complètement vide.

0:01:23.266,0:01:28.620
Comme nous chargeons ProcessingJS[br]dans chaque programme de la Khan Academy

0:01:28.620,0:01:30.904
Vous n'avez jamais vu ce code.

0:01:30.904,0:01:33.647
Mais croyez moi, il existe.

0:01:33.647,0:01:41.049
Maintenant je vais commenter cela, car[br]ProcessingJS le fait déjà pour nous.

0:01:41.049,0:01:45.308
Maintenant si vous redéfinissez `draw`,[br]dans votre program,

0:01:45.308,0:01:49.809
Cette nouvelle version masque[br]l'ancienne définition vide.

0:01:49.809,0:01:51.632
Et maintenant la fonction `draw`

0:01:51.632,0:01:55.497
fait des choses passionnantes,[br]comme dessiner une voiture.

0:01:55.497,0:02:01.375
Maintenant la questions est: pourquoi la[br]fonction `draw` est appelée en continu?

0:02:01.375,0:02:05.964
Eh bien, il y a aussi du code[br]dans la librairie ProcessingJS

0:02:05.964,0:02:11.111
qui définit une minuterie et appel[br]la fonction `draw` de manière répétée,

0:02:11.111,0:02:13.998
encore et encore et encore.

0:02:13.998,0:02:19.239
Nous devons nommer la fonction `draw`,[br]car c'est le nom de la fonction

0:02:19.239,0:02:22.073
que ProcessingJS appel de manière répétée.

0:02:22.073,0:02:27.543
Si nous renommions cela, par emple[br]nous la renommons `drawCar`.

0:02:27.543,0:02:33.730
D'abord nous avons une erreur "undefined",[br]donc il faudrait écrire `var drawCar`.

0:02:33.730,0:02:37.087
Maintenant vous pouvez voir, si nous[br]renommons cela : `drawCar`,

0:02:37.087,0:02:39.651
nous ne voyons plus d'animation.

0:02:39.651,0:02:44.692
Et c'est parce que cette fonction[br]n'est plus appelée de manière répétée,

0:02:44.692,0:02:47.188
car elle n'est pas nommée draw.

0:02:47.188,0:02:50.796
Donc nous avons mis le code à[br]appeler de manière répétée

0:02:50.796,0:02:55.912
dans une fonction qui s'écrit `draw`.

0:02:55.912,0:03:00.594
Donc je vais juste le refaire encore,[br]et je vais appeler `drawCar`ici.

0:03:00.594,0:03:03.237
Aha! Ca remarche.

0:03:03.237,0:03:07.206
Ok, donc il a besoin de s'appeler draw,

0:03:07.206,0:03:12.970
et cela veut aussi dire que vous ne devez[br]pas nommer vos propres fonctions `draw`,

0:03:12.970,0:03:18.228
a part si vous voulez qu'elle soit traitée[br]particulièrement et répétée en continu.

0:03:18.228,0:03:23.528
Et souvenez vous, vous ne pouvez pas avoir[br]plusieurs fonctions nommées `draw`.

0:03:23.528,0:03:27.889
Seul la dernière définition va[br]être prise en compte.

0:03:27.889,0:03:30.813
Si on a un `rect` la dedans--

0:03:30.813,0:03:35.143
Donc la nous pouvons voir que notre[br]voiture n'est plus dessinée,

0:03:35.143,0:03:40.495
seul le rectangle est dessiné à la place,[br]car seul la dernière définition compte.

0:03:40.495,0:03:43.166
Donc débarrassons-nous de celle-là.

0:03:43.166,0:03:48.289
La fonction draw n'est pas la seule[br]fonction prédéfinie

0:03:48.289,0:03:50.499
qui a un comportement spécial.

0:03:50.499,0:03:52.682
Il y a aussi un groupe de fonctions

0:03:52.682,0:03:56.692
pour répondre aux actions de la souris[br]et aux appuis de touches du clavier.

0:03:56.692,0:04:01.624
Disons que l'on veut un program[br]qui dessine une ellipse colorée

0:04:01.624,0:04:04.716
à l'emplacement ou l'utilisateur déplace[br]le pointeur de la souris.

0:04:04.716,0:04:09.042
Donc nous pouvons faire cela avec[br]une fonction comme ça.

0:04:09.042,0:04:15.666
[frappe au clavier]

0:04:19.998,0:04:22.545
Ok, oh, magnifique.

0:04:22.545,0:04:27.224
Maintenant, cette fonction est appelée[br]encore et encore,

0:04:27.224,0:04:31.176
même si l'utilisateur ne déplace[br]pas la souris, comme maintenant.

0:04:31.176,0:04:34.703
Et ce programme, il fonctionne, il fait ce[br]que nous voulons qu'il fasse.

0:04:34.703,0:04:37.902
Il dessine ces jolies ellipses[br]partout sur l'écran.

0:04:37.902,0:04:42.114
Mais en fait, il y a un meilleur[br]moyen de faire la même chose

0:04:42.114,0:04:44.288
qui est plus efficace.

0:04:44.288,0:04:51.892
Nous pouvons changer la fonction `draw` en[br]`mouseMoved`, et voyons.

0:04:51.892,0:04:54.577
Ca marche toujours.

0:04:54.577,0:04:58.361
Vous voyez, notre environnement regarde si[br]notre programme

0:04:58.361,0:05:00.754
à définit une fonction `mouseMoved` ,

0:05:00.754,0:05:05.457
et si c'est le cas, il appel cette[br]fonction quand la souris se déplace.

0:05:05.457,0:05:10.029
Mais elle ne sera pas appelée[br]si l'utilisateur ne déplace pas la souris.

0:05:10.029,0:05:13.423
Donc avant, on appelait le code dans[br]la fonction `draw` lorsque

0:05:13.423,0:05:15.908
nous n'en avions pas besoins,[br]encore et encore

0:05:15.908,0:05:20.265
Et maintenant, on appelle ce code[br]dans `mouseMoved`

0:05:20.265,0:05:23.292
seulement lorsque mouseX ou mouseY[br]a changé.

0:05:23.292,0:05:27.313
Donc notre programme est plus efficace,[br]et c'est une bonne chose.

0:05:27.313,0:05:30.728
Généralement, si vous voulez changer le[br]résultat de votre programme

0:05:30.728,0:05:34.525
seulement quand l'utilisateur bouge la[br]souris, alors c'est mieux de coder

0:05:34.525,0:05:37.212
dans la fonction `mouseMoved`.

0:05:37.212,0:05:40.987
Et il y a encore quelques autres[br]fonctions prédéfinies comme ça,

0:05:40.987,0:05:44.655
dont vous pouvez trouver plus d'exemples[br]dans la documentation.

0:05:44.655,0:05:48.872
Comme `mousePressed`, `mouseReleased`,[br]`keyPressed` et plus encore.

0:05:48.872,0:05:53.993
Donc souvenez-vous, si vous voulez[br]utiliser une fonction prédéfinie spéciale,

0:05:53.993,0:05:59.244
comme `mouseMoved` ou `draw`, écrivez-là [br]correctement, et utilisez-là correctement.

0:05:59.244,0:06:03.403
Si vous ne le faites pas, assurez-vous de[br]donner à vos fonctions personnalisée

0:06:03.403,0:06:07.061
un nouveau nom unique.