Fonctions spéciale ProcessingJS

Cette vidéo est un enregistrement d'exposé interactif, téléversé pour simplifier la création de sous-titres. Regardez l'exposé interactif original sur Khan Academy, ou vous pouvez mettre pause et éditer le code et voir le code dans une meilleure résolution:
http://www.khanacademy.org/programming

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.