0:00:01.109,0:00:03.193
Il y a plusieurs façon de [br]réaliser des animations,

0:00:03.193,0:00:05.241
mais le principe de base est[br]toujours le même :

0:00:05.241,0:00:07.132
Si vous prenez un ensemble de dessins

0:00:07.132,0:00:09.726
où chacun est un peu différent du précédent

0:00:09.726,0:00:11.462
et que vous les affichez assez rapidement,

0:00:11.462,0:00:13.267
ils auront l'air de bouger.

0:00:13.267,0:00:16.167
Il y a bien longtemps, tous les dessins[br]étaient dessinés à la main.

0:00:16.167,0:00:19.696
Et c'était TRES long de faire assez de [br]dessins pour seulement 3 secondes d'animation.

0:00:19.696,0:00:22.877
Heureusement pour nous,[br]on utilise les nouvelles technologies.

0:00:22.877,0:00:26.130
C'est très simple de réaliser [br]une animation avec du code.

0:00:26.130,0:00:27.998
Et je vais vous montrer ça !

0:00:27.998,0:00:31.468
Sur la droite, vous voyez cette voiture[br]dessinée sur un fond jaune.

0:00:31.468,0:00:34.965
Si, si... j'ai dessiné ma voiture moi-même, merci !

0:00:34.965,0:00:38.575
Bon... ici, vous voyez le dessin du fond d'écran.

0:00:38.575,0:00:42.531
Et la voiture n'a pas de contour, on utilise[br]la fonction "noStroke()" pour ça.

0:00:42.531,0:00:47.471
Et ici, on a créé une variable "x", qui est la [br]position de la voiture, qui vaut 10.

0:00:47.471,0:00:49.456
Et vous voyez que si je change cette valeur,

0:00:49.456,0:00:52.105
la voiture se déplace en fonction.

0:00:52.105,0:00:53.531
Remettons 10.

0:00:53.531,0:00:57.594
Et ici, on définit la couleur de remplissage de la voiture[br]et on dessine deux rectangles.

0:00:57.594,0:01:00.063
Le premier rectangle est pour celui du bas

0:01:00.063,0:01:02.483
et celui-là est pour le haut.

0:01:02.483,0:01:05.027
Puis, ici, on fait la même chose pour les roues

0:01:05.027,0:01:06.979
On définit la couleur et on dessine deux ellipses :

0:01:06.979,0:01:08.648
Une positionnée à x+25

0:01:08.648,0:01:10.191
et l'autre à x+75

0:01:10.191,0:01:12.828
Et à la fin on a ce nouveau code.

0:01:12.828,0:01:15.169
On appèle ce code la "définition d'une fonction".

0:01:15.169,0:01:16.691
Vous verrez ça en détail plus tard.

0:01:16.691,0:01:19.566
Pour l'instant on va juste l'utiliser.

0:01:19.566,0:01:24.292
La chose importante, ici, est de repérer [br]le mot-clé "draw" ("dessiner" en anglais).

0:01:24.292,0:01:25.190
avec les accolades. Une qui est ouverte ici,

0:01:25.190,0:01:26.750
l'autre qui est fermée ici.

0:01:26.750,0:01:30.530
Cet ensemble, est ce qu'on appèle[br]la boucle de dessin ou la boucle d'animation.

0:01:30.530,0:01:35.295
Tout ce que vous mettrez entre les accolades[br]sera exécuté sans arrêt à une vitesse très rapide.

0:01:35.295,0:01:36.702
C'est pour ça que ça s'appèle une boucle.

0:01:36.702,0:01:41.792
Et le code à l'extérieur des accolades sera exécuté[br]qu'une fois au tout début du programme.

0:01:41.792,0:01:45.529
OK. Pour une animation, la première étape consiste à déplacer [br]votre code de dessin à l'intérieur des accolades.

0:01:45.529,0:01:47.833
Comme ça, votre dessin sera dessiné sans arrêt.

0:01:47.833,0:01:51.661
Faisons ça... Je vais prendre tout ce code... là.

0:01:51.661,0:01:54.261
Et le mettre à l'intérieur de ma boucle.

0:01:54.261,0:02:02.471
Pour bien voir que ce code est entre les accolades, [br]je vais l'indenter en sélectionnant le code [br]et en pressant la touche "Tab" (tabulation).

0:02:02.471,0:02:05.746
Et maintenant, je vois mieux que le code est [br]situé entre les accolades.

0:02:05.746,0:02:10.208
En faisant ça, on a l'impression que rien n'a changé.

0:02:10.208,0:02:17.788
Car, la première fois que cette boucle est exécutée[br]l'ordinateur définit la variable "x", lui affecte 10, dessine[br]deux rectangles et deux ellipses.

0:02:17.788,0:02:24.289
Puis, il va recommencer pour définir "x", dessiner [br]2 rectangles et 2 ellipses.

0:02:24.289,0:02:28.213
Puis, il va définir "x", dessiner 2 rectangles,....[br]Exactement toujours les mêmes choses !

0:02:28.213,0:02:31.151
Rien ne change ! Donc on ne voit aucune animation.

0:02:31.151,0:02:34.660
Il ne fait que dessiner les mêmes rectangles et les ellipses[br]toujours au dessus des précédents.

0:02:34.660,0:02:40.395
Or souvenez-vous : on a dit que pour faire une animation,[br]il fallait que quelque chose soit différent entre chaque dessin.

0:02:40.395,0:02:42.761
Donc si je veux que ma voiture avance,

0:02:42.761,0:02:45.361
je dois changer la valeur de la variable "x",[br]n'est-ce pas ?

0:02:45.361,0:02:48.052
Donc, aller je le change en... 11.

0:02:48.052,0:02:51.117
Ha ! non ! Maintenant, il dessine sans arrêt[br]à la position 11...[br]

0:02:51.117,0:02:57.564
Bon... Comment vais-je faire pour changer la valeur de "x" [br]à chaque fois que l'ordinateur exécute la boucle ?

0:02:57.564,0:02:59.707
OK. Regardez cette astuce simplement magique !

0:02:59.707,0:03:02.789
Regardez... ce "var x" crée une nouvelle variable.

0:03:02.789,0:03:08.061
Quand on met ce code DANS la boucle, il va créer[br]une nouvelle variable à chaque fois, sans arrêt.

0:03:08.061,0:03:13.467
On a besoin de créer cette variable à l'extérieur de la boucle.[br]Comme ça, elle sera créée q'une seule fois.

0:03:13.467,0:03:22.770
Et ainsi, à chaque boucle, l'ordinateur va pouvoir réutiliser la [br]même variable et elle aura la valeur qu'on lui aura donné.

0:03:22.770,0:03:31.295
Allez, je fais ça. Je prends cette variable, je la mets à [br]l'extérieur de la boucle. Elle est donc créée qu'une fois.

0:03:31.295,0:03:38.291
Donc à chaque boucle, l'ordinateur va réutiliser [br]la même variable. Sa valeur, pour l'instant est toujours de 11.

0:03:38.291,0:03:41.757
Donc elle va rester à 11.[br]Voici le tour de magie !

0:03:41.757,0:03:46.148
Quelque part à l'intérieur de la boucle, on va changer[br]la valeur de "x" pour qu'elle soit un peu plus grande.

0:03:46.148,0:03:50.539
Comme : x contient l'ancienne valeur de "x" plus 1.

0:03:50.539,0:03:54.931
Yeah !! ça marche !!!

0:03:54.931,0:04:02.823
Sauf que... il manque un truc. En fait, on a oublié de[br]dessiner le fond d'écran à l'intérieur de la boucle.

0:04:02.823,0:04:07.147
Donc il dessine la voiture en la déplaçant mais au dessus [br]des précédentes....

0:04:07.147,0:04:12.190
Donc, si je prends cette ligne pour la mettre dans la boucle,[br]comme ça...

0:04:12.190,0:04:15.984
Et j'appuie sur le bouton "restart" (Redémarrer") pour[br]voir ma voiture au début.

0:04:15.984,0:04:18.269
Yeah !! C'est parfait !!

0:04:18.269,0:04:22.386
Si je veux accélérer ma voiture, il suffit de changer[br]la façon d'augmenter "x" à chaque passage.

0:04:22.386,0:04:28.862
Donc si je mets 10, Whooooo ! Elle sort de l'écran ![br]Et je peux mettre un nombre négatif "x-10" et...

0:04:28.862,0:04:34.552
Elle repasse ! puis positif... Hoops ! la voilà !

0:04:34.552,0:04:36.550
Bon. Voici les choses importantes à retenir :

0:04:36.550,0:04:43.513
Cette partie, ici, est appelée la boucle d'animation.[br]les dessins qui seront à l'intérieur seront dessinés [br]en permanence, sans arrêt.

0:04:43.513,0:04:52.015
Puis, vous créez vos variables à l'extérieur de la boucle.[br]C'est très important, car cela permet de réutiliser la même[br]variable dans la boucle.

0:04:52.015,0:04:55.854
Puis, à l'intérieur de la boucle, ici, on va changer la valeur [br]de la variable un petit peu...

0:04:55.854,0:05:02.315
souvent, en utilisant sa précédente valeur [br]plus ou moins un nombre.

0:05:02.315,0:05:07.834
Enfin, on utilise cette variable pour que notre dessin [br]soit un peu différent à chaque fois.

0:05:07.881,0:05:10.171
Et... voilà !