A ce stade, vous avez peut-être réalisé que vous avez défini
une fonction particulière à chaque fois que vous vouliez animer votre programme,
la fonction `draw`.
En guise de rappel, voici à nouveau notre program d'animation de voiture.
il a la variable appelée x, qui commence avec une valeur de 11.
Puis dans la fonction `draw`, il dessine la voiture à la position contenue dans x,
puis il ajoute trois à cette variable x, et ceci à chaque appel de la fonction.
A cela nous donne une voiture
qui se déplace constamment de trois pixels à travers l'écran.
Donc voilà comment cela fonctionne.
Maintenant que vous avez appris à faire vos propres fonctions,
vous vous demandez peut-être, ce qu'est cette fonction `draw`?
Pourquoi est elle nommée `draw`?
Est-ce une fonction personnalisée?
Et ce sont de très bonnes questions.
Voyez vous, dans la librairie ProcessingJS,
la fonction `draw` est l'une des quelques fonctions prédéfinies
qui donne à notre programme un meilleur contrôle de la zone de dessin.
Les fonctions prédéfinies sont celle qui ont déjà été définies
par la librairie ProcessingJS.
Mais d'habitude aucun code n'y est défini.
Par exemple, dans la librairie ProcessingJS, il y a un code comme ça:
`var draw = function() { }`
Et là, c'est simplement vide, complètement vide.
Comme nous chargeons ProcessingJS dans chaque programme de la Khan Academy
Vous n'avez jamais vu ce code.
Mais croyez moi, il existe.
Maintenant je vais commenter cela, car ProcessingJS le fait déjà pour nous.
Maintenant si vous redéfinissez `draw`, dans votre program,
Cette nouvelle version masque l'ancienne définition vide.
Et maintenant la fonction `draw`
fait des choses passionnantes, comme dessiner une voiture.
Maintenant la questions est: pourquoi la fonction `draw` est appelée en continu?
Eh bien, il y a aussi du code dans la librairie ProcessingJS
qui définit une minuterie et appel la fonction `draw` de manière répétée,
encore et encore et encore.
Nous devons nommer la fonction `draw`, car c'est le nom de la fonction
que ProcessingJS appel de manière répétée.
Si nous renommions cela, par emple nous la renommons `drawCar`.
D'abord nous avons une erreur "undefined", donc il faudrait écrire `var drawCar`.
Maintenant vous pouvez voir, si nous renommons cela : `drawCar`,
nous ne voyons plus d'animation.
Et c'est parce que cette fonction n'est plus appelée de manière répétée,
car elle n'est pas nommée draw.
Donc nous avons mis le code à appeler de manière répétée
dans une fonction qui s'écrit `draw`.
Donc je vais juste le refaire encore, et je vais appeler `drawCar`ici.
Aha! Ca remarche.
Ok, donc il a besoin de s'appeler draw,
et cela veut aussi dire que vous ne devez pas nommer vos propres fonctions `draw`,
a part si vous voulez qu'elle soit traitée particulièrement et répétée en continu.
Et souvenez vous, vous ne pouvez pas avoir plusieurs fonctions nommées `draw`.
Seul la dernière définition va être prise en compte.
Si on a un `rect` la dedans--
Donc la nous pouvons voir que notre voiture n'est plus dessinée,
seul le rectangle est dessiné à la place, car seul la dernière définition compte.
Donc débarrassons-nous de celle-là.
La fonction draw n'est pas la seule fonction prédéfinie
qui a un comportement spécial.
Il y a aussi un groupe de fonctions
pour répondre aux actions de la souris et aux appuis de touches du clavier.
Disons que l'on veut un program qui dessine une ellipse colorée
à l'emplacement ou l'utilisateur déplace le pointeur de la souris.
Donc nous pouvons faire cela avec une fonction comme ça.
[frappe au clavier]
Ok, oh, magnifique.
Maintenant, cette fonction est appelée encore et encore,
même si l'utilisateur ne déplace pas la souris, comme maintenant.
Et ce programme, il fonctionne, il fait ce que nous voulons qu'il fasse.
Il dessine ces jolies ellipses partout sur l'écran.
Mais en fait, il y a un meilleur moyen de faire la même chose
qui est plus efficace.
Nous pouvons changer la fonction `draw` en `mouseMoved`, et voyons.
Ca marche toujours.
Vous voyez, notre environnement regarde si notre programme
à définit une fonction `mouseMoved` ,
et si c'est le cas, il appel cette fonction quand la souris se déplace.
Mais elle ne sera pas appelée si l'utilisateur ne déplace pas la souris.
Donc avant, on appelait le code dans la fonction `draw` lorsque
nous n'en avions pas besoins, encore et encore
Et maintenant, on appelle ce code dans `mouseMoved`
seulement lorsque mouseX ou mouseY a changé.
Donc notre programme est plus efficace, et c'est une bonne chose.
Généralement, si vous voulez changer le résultat de votre programme
seulement quand l'utilisateur bouge la souris, alors c'est mieux de coder
dans la fonction `mouseMoved`.
Et il y a encore quelques autres fonctions prédéfinies comme ça,
dont vous pouvez trouver plus d'exemples dans la documentation.
Comme `mousePressed`, `mouseReleased`, `keyPressed` et plus encore.
Donc souvenez-vous, si vous voulez utiliser une fonction prédéfinie spéciale,
comme `mouseMoved` ou `draw`, écrivez-là correctement, et utilisez-là correctement.
Si vous ne le faites pas, assurez-vous de donner à vos fonctions personnalisée
un nouveau nom unique.