WEBVTT

00:00:00.000 --> 00:00:04.846
Vous vous êtes probablement aperçu que
vous avez déjà définit une fonction spéciale

00:00:04.905 --> 00:00:09.315
à chaque fois que vous avez fait des animations
dans vos programmes : la fonction "draw"

00:00:09.315 --> 00:00:13.670
Pour rappel, voici le programme 
qui anime une voiture...

00:00:13.670 --> 00:00:16.286
vous avez "var x=11"

00:00:16.286 --> 00:00:18.310
qui représente la position de départ

00:00:18.310 --> 00:00:20.358
et la fonction "draw" contient
tout le code de dessin

00:00:20.358 --> 00:00:23.183
et on augmente "x" de 3 à chaque fois.

00:00:23.183 --> 00:00:27.519
Et en redémarrant le programme, 
la voiture bouge.

00:00:27.519 --> 00:00:31.107
Maintenant que vous savez comment 
faire vos propres fonctions,

00:00:31.107 --> 00:00:34.154
vous vous demandez peut être à quoi
correspond cette fonction "draw" ?

00:00:34.154 --> 00:00:37.131
Est-ce une fonction spéciale, pourquoi 
est-elle appelée "draw",...

00:00:37.131 --> 00:00:39.798
Ce sont de très bonnes questions.

00:00:39.798 --> 00:00:43.222
Alors... Dans notre environnement,
ici à Khan Academy,

00:00:43.222 --> 00:00:45.726
il y a quelques fonctions spéciales,

00:00:45.726 --> 00:00:50.070
je les appelle des "fonctions magiques". 
Mais c'est juste moi qui les appelle comme ça.

00:00:50.070 --> 00:00:52.835
Quand on fait fonctionner VOS fonctions,

00:00:52.835 --> 00:00:56.480
on regarde d'abord pour voir si vous définissez
des fonctions avec certains noms.

00:00:56.480 --> 00:00:59.686
comme "draw", et, si c'est le cas, 
on les appel à certains moments.

00:00:59.686 --> 00:01:02.908
Par exemple, si vous définissez 
une fonction "draw" dans votre code,

00:01:02.908 --> 00:01:07.329
on va trouver cette fonction, on va 
regarder le code qui est à l'intérieur

00:01:07.329 --> 00:01:12.078
et on va appeler ce code tant que possible, 
le plus vite possible, sans s'arrêter.

00:01:12.078 --> 00:01:17.235
Si vous n'avez pas de fonction "draw", 
on n'aura rien à appeler.

00:01:17.235 --> 00:01:23.464
Ça veut dire aussi que si on change
le nom de cette fonction, en... "drow"

00:01:23.464 --> 00:01:25.959
OK, ça ne fonctionne plus.

00:01:25.959 --> 00:01:29.357
ou en "dessineVoiture"... 
OK, ça ne marche plus, non plus.

00:01:29.357 --> 00:01:32.508
Donc si on change son nom, 
le programme ne la trouvera pas,

00:01:32.508 --> 00:01:35.659
et du coup, elle ne sera pas appelée.

00:01:35.659 --> 00:01:37.996
Et du coup, le code ne sera pas
appelé régulièrement,

00:01:37.996 --> 00:01:40.233
il sera tout simplement jamais appeler !

00:01:40.233 --> 00:01:44.201
Cela veut dire aussi que vous ne devriez pas 
appeler vos propres fonctions "draw"

00:01:44.201 --> 00:01:48.839
sinon, elle sera appelée en permanence !

00:01:48.839 --> 00:01:51.808
OK. "draw()" n'est pas la seule 
fonction magique disponible.

00:01:51.808 --> 00:01:58.433
Il y a un groupe de fonctions qui sont appelée sur 
des évènements de la souris ou du clavier.

00:01:58.433 --> 00:02:02.629
Prenons un autre exemple d'animation.

00:02:02.629 --> 00:02:13.234
Si on veut dessiner une balle colorée en fonction
des mouvements de la souris...

00:02:13.234 --> 00:02:19.870
on utilise la fonction "draw", puis "fill()", 
et on dessine "ellipse" à "(mouseX, mouseY, 10, 10)"

00:02:19.870 --> 00:02:21.437
Essayons ça.... OK. Cool !

00:02:21.437 --> 00:02:24.524
On a une balle colorée qui est dessinée à l'endroit
de la souris !

00:02:24.524 --> 00:02:30.357
OK. Le code du dessin qui fait le dessin,
va être appelé en permanence, pour toujours,

00:02:30.357 --> 00:02:33.520
parce qu’on l'a mis dans 
une fonction appelée "draw".

00:02:33.520 --> 00:02:37.739
Elle sera appelée, même si la souris
ne bouge pas.

00:02:37.739 --> 00:02:41.158
Elle est appelée en ce moment, 
alors que je ne bouge pas.

00:02:41.288 --> 00:02:47.108
Pour faire ça, il y a une façon de faire 
plus efficace.

00:02:47.108 --> 00:02:52.685
Ce qu'on peut faire, c'est changer la fonction "draw"
en "mouseMoved" ("souris a bougé").

00:02:52.685 --> 00:02:59.636
Notre environnement vérifie également si le programme
définit une fonction appelée "mouseMouved".

00:02:59.647 --> 00:03:03.944
Si c'est le cas, il va appeler cette fonction
à chaque fois que la souris bouge.

00:03:03.944 --> 00:03:06.981
Vous voyez... ça fonctionne toujours.

00:03:06.981 --> 00:03:13.860
Mais elle n'est plus appelée si la souris ne bouge plus.
Si j'arrête ma souris, la fonction n'est plus appelée.

00:03:13.860 --> 00:03:21.517
Avant, avec la fonction "draw", le code était exécuté 
en permanence, même si la souris ne bougeait pas.

00:03:21.517 --> 00:03:27.020
Maintenant, en utilisant "mouseMouved", le code n'est
appelé que si la souris bouge.

00:03:27.020 --> 00:03:30.694
Donc notre programme est bien plus efficace.

00:03:30.694 --> 00:03:34.608
En général, si votre programme a besoin
d'agir quand la souris bouge,

00:03:34.608 --> 00:03:39.692
il est meilleur de mettre le code 
dans la fonction "mouseMouved"
au lieu d'utiliser la fonction "draw".

00:03:39.692 --> 00:03:43.965
Il y a un paquet de fonctions magiques
comme "mouseMouved".

00:03:43.965 --> 00:03:47.208
Il y a "mousePressed", "mouseReleased",
"keyPressed",...


00:03:47.208 --> 00:03:50.361
Lisez la documentation à propos de ces fonctions.
Elles vous serviront !

00:03:50.361 --> 00:03:54.563
Le point important, ici, c'est que si vous voulez
utiliser une fonction magique,

00:03:54.583 --> 00:03:56.577
appelez-la comme il faut !

00:03:56.577 --> 00:04:00.721
Si vous ne voulez pas l'utiliser, 
appelez vos fonctions autrement.