WEBVTT

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

NOTE Paragraph

00:00:03.180 --> 00:00:07.202
une fonction particulière à chaque fois
que vous vouliez animer votre programme,

00:00:07.202 --> 00:00:09.191
la fonction `draw`.

00:00:09.191 --> 00:00:13.436
En guise de rappel, voici à nouveau
notre program d'animation de voiture.

00:00:13.436 --> 00:00:16.992
il a la variable appelée x,
qui commence avec une valeur de 11.

00:00:16.992 --> 00:00:22.648
Puis dans la fonction `draw`, il dessine
la voiture à la position contenue dans x,

00:00:22.648 --> 00:00:26.638
puis il ajoute trois à cette variable x,
et ceci à chaque appel de la fonction.

00:00:26.638 --> 00:00:28.501
A cela nous donne une voiture

00:00:28.501 --> 00:00:32.447
qui se déplace constamment de 
trois pixels à travers l'écran.

00:00:32.447 --> 00:00:34.723
Donc voilà comment cela fonctionne.

00:00:34.723 --> 00:00:37.683
Maintenant que vous avez appris
à faire vos propres fonctions,

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

00:00:41.583 --> 00:00:44.109
Pourquoi est elle nommée `draw`?

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

00:00:45.904 --> 00:00:48.894
Et ce sont de très bonnes questions.

00:00:48.894 --> 00:00:51.985
Voyez vous, dans la
librairie ProcessingJS,

00:00:51.985 --> 00:00:56.132
la fonction `draw` est l'une des
quelques fonctions prédéfinies

00:00:56.132 --> 00:01:01.009
qui donne à notre programme un
meilleur contrôle de la zone de dessin.

00:01:01.009 --> 00:01:04.831
Les fonctions prédéfinies sont celle
qui ont déjà été définies

00:01:04.831 --> 00:01:07.209
par la librairie ProcessingJS.

00:01:07.209 --> 00:01:11.149
Mais d'habitude aucun code
n'y est défini.

00:01:11.149 --> 00:01:17.045
Par exemple, dans la librairie
ProcessingJS, il y a un code comme ça:

00:01:17.045 --> 00:01:19.434
`var draw = function() { }`

00:01:19.434 --> 00:01:23.266
Et là, c'est simplement vide,
complètement vide.

00:01:23.266 --> 00:01:28.620
Comme nous chargeons ProcessingJS
dans chaque programme de la Khan Academy

00:01:28.620 --> 00:01:30.904
Vous n'avez jamais vu ce code.

00:01:30.904 --> 00:01:33.647
Mais croyez moi, il existe.

00:01:33.647 --> 00:01:41.049
Maintenant je vais commenter cela, car
ProcessingJS le fait déjà pour nous.

00:01:41.049 --> 00:01:45.308
Maintenant si vous redéfinissez `draw`,
dans votre program,

00:01:45.308 --> 00:01:49.809
Cette nouvelle version masque
l'ancienne définition vide.

00:01:49.809 --> 00:01:51.632
Et maintenant la fonction `draw`

00:01:51.632 --> 00:01:55.497
fait des choses passionnantes,
comme dessiner une voiture.

00:01:55.497 --> 00:02:01.375
Maintenant la questions est: pourquoi la
fonction `draw` est appelée en continu?

00:02:01.375 --> 00:02:05.964
Eh bien, il y a aussi du code
dans la librairie ProcessingJS

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,

00:02:11.111 --> 00:02:13.998
encore et encore et encore.

00:02:13.998 --> 00:02:19.239
Nous devons nommer la fonction `draw`,
car c'est le nom de la fonction

00:02:19.239 --> 00:02:22.073
que ProcessingJS appel de manière répétée.

00:02:22.073 --> 00:02:27.543
Si nous renommions cela, par emple
nous la renommons `drawCar`.

00:02:27.543 --> 00:02:33.730
D'abord nous avons une erreur "undefined",
donc il faudrait écrire `var drawCar`.

00:02:33.730 --> 00:02:37.087
Maintenant vous pouvez voir, si nous
renommons cela : `drawCar`,

00:02:37.087 --> 00:02:39.651
nous ne voyons plus d'animation.

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,

00:02:44.692 --> 00:02:47.188
car elle n'est pas nommée draw.

00:02:47.188 --> 00:02:50.796
Donc nous avons mis le code à
appeler de manière répétée

00:02:50.796 --> 00:02:55.912
dans une fonction qui s'écrit `draw`.

00:02:55.912 --> 00:03:00.594
Donc je vais juste le refaire encore,
et je vais appeler `drawCar`ici.

00:03:00.594 --> 00:03:03.237
Aha! Ca remarche.

00:03:03.237 --> 00:03:07.206
Ok, donc il a besoin de s'appeler draw,

00:03:07.206 --> 00:03:12.970
et cela veut aussi dire que vous ne devez
pas nommer vos propres fonctions `draw`,

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.

00:03:18.228 --> 00:03:23.528
Et souvenez vous, vous ne pouvez pas avoir
plusieurs fonctions nommées `draw`.

00:03:23.528 --> 00:03:27.889
Seul la dernière définition va
être prise en compte.

00:03:27.889 --> 00:03:30.813
Si on a un `rect` la dedans--

00:03:30.813 --> 00:03:35.143
Donc la nous pouvons voir que notre
voiture n'est plus dessinée,

00:03:35.143 --> 00:03:40.495
seul le rectangle est dessiné à la place,
car seul la dernière définition compte.

00:03:40.495 --> 00:03:43.166
Donc débarrassons-nous de celle-là.

00:03:43.166 --> 00:03:48.289
La fonction draw n'est pas la seule
fonction prédéfinie

00:03:48.289 --> 00:03:50.499
qui a un comportement spécial.

00:03:50.499 --> 00:03:52.682
Il y a aussi un groupe de fonctions

00:03:52.682 --> 00:03:56.692
pour répondre aux actions de la souris
et aux appuis de touches du clavier.

00:03:56.692 --> 00:04:01.624
Disons que l'on veut un program
qui dessine une ellipse colorée

00:04:01.624 --> 00:04:04.716
à l'emplacement ou l'utilisateur déplace
le pointeur de la souris.

00:04:04.716 --> 00:04:09.042
Donc nous pouvons faire cela avec
une fonction comme ça.

00:04:09.042 --> 00:04:15.666
[frappe au clavier]

00:04:19.998 --> 00:04:22.545
Ok, oh, magnifique.

00:04:22.545 --> 00:04:27.224
Maintenant, cette fonction est appelée
encore et encore,

00:04:27.224 --> 00:04:31.176
même si l'utilisateur ne déplace
pas la souris, comme maintenant.

00:04:31.176 --> 00:04:34.703
Et ce programme, il fonctionne, il fait ce
que nous voulons qu'il fasse.

00:04:34.703 --> 00:04:37.902
Il dessine ces jolies ellipses
partout sur l'écran.

00:04:37.902 --> 00:04:42.114
Mais en fait, il y a un meilleur
moyen de faire la même chose

00:04:42.114 --> 00:04:44.288
qui est plus efficace.

00:04:44.288 --> 00:04:51.892
Nous pouvons changer la fonction `draw` en
`mouseMoved`, et voyons.

00:04:51.892 --> 00:04:54.577
Ca marche toujours.

00:04:54.577 --> 00:04:58.361
Vous voyez, notre environnement regarde si
notre programme

00:04:58.361 --> 00:05:00.754
à définit une fonction `mouseMoved` ,

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

00:05:05.457 --> 00:05:10.029
Mais elle ne sera pas appelée
si l'utilisateur ne déplace pas la souris.

00:05:10.029 --> 00:05:13.423
Donc avant, on appelait le code dans
la fonction `draw` lorsque

00:05:13.423 --> 00:05:15.908
nous n'en avions pas besoins,
encore et encore

00:05:15.908 --> 00:05:20.265
Et maintenant, on appelle ce code
dans `mouseMoved`

00:05:20.265 --> 00:05:23.292
seulement lorsque mouseX ou mouseY
a changé.

00:05:23.292 --> 00:05:27.313
Donc notre programme est plus efficace,
et c'est une bonne chose.

00:05:27.313 --> 00:05:30.728
Généralement, si vous voulez changer le
résultat de votre programme

00:05:30.728 --> 00:05:34.525
seulement quand l'utilisateur bouge la
souris, alors c'est mieux de coder

00:05:34.525 --> 00:05:37.212
dans la fonction `mouseMoved`.

00:05:37.212 --> 00:05:40.987
Et il y a encore quelques autres
fonctions prédéfinies comme ça,

00:05:40.987 --> 00:05:44.655
dont vous pouvez trouver plus d'exemples
dans la documentation.

00:05:44.655 --> 00:05:48.872
Comme `mousePressed`, `mouseReleased`,
`keyPressed` et plus encore.

00:05:48.872 --> 00:05:53.993
Donc souvenez-vous, si vous voulez
utiliser une fonction prédéfinie spéciale,

00:05:53.993 --> 00:05:59.244
comme `mouseMoved` ou `draw`, écrivez-là 
correctement, et utilisez-là correctement.

00:05:59.244 --> 00:06:03.403
Si vous ne le faites pas, assurez-vous de
donner à vos fonctions personnalisée

00:06:03.403 --> 00:06:07.061
un nouveau nom unique.