WEBVTT 00:00:01.109 --> 00:00:03.193 Il y a plusieurs façon de réaliser des animations, 00:00:03.193 --> 00:00:05.241 mais le principe de base est toujours le même : 00:00:05.241 --> 00:00:07.132 Si vous prenez un ensemble de dessins 00:00:07.132 --> 00:00:09.726 où chacun est un peu différent du précédent 00:00:09.726 --> 00:00:11.462 et que vous les affichez assez rapidement, 00:00:11.462 --> 00:00:13.267 ils auront l'air de bouger. 00:00:13.267 --> 00:00:16.167 Il y a bien longtemps, tous les dessins étaient dessinés à la main. 00:00:16.167 --> 00:00:19.696 Et c'était TRES long de faire assez de dessins pour seulement 3 secondes d'animation. 00:00:19.696 --> 00:00:22.877 Heureusement pour nous, on utilise les nouvelles technologies. 00:00:22.877 --> 00:00:26.130 C'est très simple de réaliser une animation avec du code. 00:00:26.130 --> 00:00:27.998 Et je vais vous montrer ça ! 00:00:27.998 --> 00:00:31.468 Sur la droite, vous voyez cette voiture dessinée sur un fond jaune. 00:00:31.468 --> 00:00:34.965 Si, si... j'ai dessiné ma voiture moi-même, merci ! 00:00:34.965 --> 00:00:38.575 Bon... ici, vous voyez le dessin du fond d'écran. 00:00:38.575 --> 00:00:42.531 Et la voiture n'a pas de contour, on utilise la fonction "noStroke()" pour ça. 00:00:42.531 --> 00:00:47.471 Et ici, on a créé une variable "x", qui est la position de la voiture, qui vaut 10. 00:00:47.471 --> 00:00:49.456 Et vous voyez que si je change cette valeur, 00:00:49.456 --> 00:00:52.105 la voiture se déplace en fonction. 00:00:52.105 --> 00:00:53.531 Remettons 10. 00:00:53.531 --> 00:00:57.594 Et ici, on définit la couleur de remplissage de la voiture et on dessine deux rectangles. 00:00:57.594 --> 00:01:00.063 Le premier rectangle est pour celui du bas 00:01:00.063 --> 00:01:02.483 et celui-là est pour le haut. 00:01:02.483 --> 00:01:05.027 Puis, ici, on fait la même chose pour les roues 00:01:05.027 --> 00:01:06.979 On définit la couleur et on dessine deux ellipses : 00:01:06.979 --> 00:01:08.648 Une positionnée à x+25 00:01:08.648 --> 00:01:10.191 et l'autre à x+75 00:01:10.191 --> 00:01:12.828 Et à la fin on a ce nouveau code. 00:01:12.828 --> 00:01:15.169 On appèle ce code la "définition d'une fonction". 00:01:15.169 --> 00:01:16.691 Vous verrez ça en détail plus tard. 00:01:16.691 --> 00:01:19.566 Pour l'instant on va juste l'utiliser. 00:01:19.566 --> 00:01:24.292 La chose importante, ici, est de repérer le mot-clé "draw" ("dessiner" en anglais). 00:01:24.292 --> 00:01:25.190 avec les accolades. Une qui est ouverte ici, 00:01:25.190 --> 00:01:26.750 l'autre qui est fermée ici. 00:01:26.750 --> 00:01:30.530 Cet ensemble, est ce qu'on appèle la boucle de dessin ou la boucle d'animation. 00:01:30.530 --> 00:01:35.295 Tout ce que vous mettrez entre les accolades sera exécuté sans arrêt à une vitesse très rapide. 00:01:35.295 --> 00:01:36.702 C'est pour ça que ça s'appèle une boucle. 00:01:36.702 --> 00:01:41.792 Et le code à l'extérieur des accolades sera exécuté qu'une fois au tout début du programme. 00:01:41.792 --> 00:01:45.529 OK. Pour une animation, la première étape consiste à déplacer votre code de dessin à l'intérieur des accolades. 00:01:45.529 --> 00:01:47.833 Comme ça, votre dessin sera dessiné sans arrêt. 00:01:47.833 --> 00:01:51.661 Faisons ça... Je vais prendre tout ce code... là. 00:01:51.661 --> 00:01:54.261 Et le mettre à l'intérieur de ma boucle. 00:01:54.261 --> 00:02:02.471 Pour bien voir que ce code est entre les accolades, je vais l'indenter en sélectionnant le code et en pressant la touche "Tab" (tabulation). 00:02:02.471 --> 00:02:05.746 Et maintenant, je vois mieux que le code est situé entre les accolades. 00:02:05.746 --> 00:02:10.208 En faisant ça, on a l'impression que rien n'a changé. 00:02:10.208 --> 00:02:17.788 Car, la première fois que cette boucle est exécutée l'ordinateur définit la variable "x", lui affecte 10, dessine deux rectangles et deux ellipses. 00:02:17.788 --> 00:02:24.289 Puis, il va recommencer pour définir "x", dessiner 2 rectangles et 2 ellipses. 00:02:24.289 --> 00:02:28.213 Puis, il va définir "x", dessiner 2 rectangles,.... Exactement toujours les mêmes choses ! 00:02:28.213 --> 00:02:31.151 Rien ne change ! Donc on ne voit aucune animation. 00:02:31.151 --> 00:02:34.660 Il ne fait que dessiner les mêmes rectangles et les ellipses toujours au dessus des précédents. 00:02:34.660 --> 00:02:40.395 Or souvenez-vous : on a dit que pour faire une animation, il fallait que quelque chose soit différent entre chaque dessin. 00:02:40.395 --> 00:02:42.761 Donc si je veux que ma voiture avance, 00:02:42.761 --> 00:02:45.361 je dois changer la valeur de la variable "x", n'est-ce pas ? 00:02:45.361 --> 00:02:48.052 Donc, aller je le change en... 11. 00:02:48.052 --> 00:02:51.117 Ha ! non ! Maintenant, il dessine sans arrêt à la position 11... 00:02:51.117 --> 00:02:57.564 Bon... Comment vais-je faire pour changer la valeur de "x" à chaque fois que l'ordinateur exécute la boucle ? 00:02:57.564 --> 00:02:59.707 OK. Regardez cette astuce simplement magique ! 00:02:59.707 --> 00:03:02.789 Regardez... ce "var x" crée une nouvelle variable. 00:03:02.789 --> 00:03:08.061 Quand on met ce code DANS la boucle, il va créer une nouvelle variable à chaque fois, sans arrêt. 00:03:08.061 --> 00:03:13.467 On a besoin de créer cette variable à l'extérieur de la boucle. Comme ça, elle sera créée q'une seule fois. 00:03:13.467 --> 00:03:22.770 Et ainsi, à chaque boucle, l'ordinateur va pouvoir réutiliser la même variable et elle aura la valeur qu'on lui aura donné. 00:03:22.770 --> 00:03:31.295 Allez, je fais ça. Je prends cette variable, je la mets à l'extérieur de la boucle. Elle est donc créée qu'une fois. 00:03:31.295 --> 00:03:38.291 Donc à chaque boucle, l'ordinateur va réutiliser la même variable. Sa valeur, pour l'instant est toujours de 11. 00:03:38.291 --> 00:03:41.757 Donc elle va rester à 11. Voici le tour de magie ! 00:03:41.757 --> 00:03:46.148 Quelque part à l'intérieur de la boucle, on va changer la valeur de "x" pour qu'elle soit un peu plus grande. 00:03:46.148 --> 00:03:50.539 Comme : x contient l'ancienne valeur de "x" plus 1. 00:03:50.539 --> 00:03:54.931 Yeah !! ça marche !!! 00:03:54.931 --> 00:04:02.823 Sauf que... il manque un truc. En fait, on a oublié de dessiner le fond d'écran à l'intérieur de la boucle. 00:04:02.823 --> 00:04:07.147 Donc il dessine la voiture en la déplaçant mais au dessus des précédentes.... 00:04:07.147 --> 00:04:12.190 Donc, si je prends cette ligne pour la mettre dans la boucle, comme ça... 00:04:12.190 --> 00:04:15.984 Et j'appuie sur le bouton "restart" (Redémarrer") pour voir ma voiture au début. 00:04:15.984 --> 00:04:18.269 Yeah !! C'est parfait !! 00:04:18.269 --> 00:04:22.386 Si je veux accélérer ma voiture, il suffit de changer la façon d'augmenter "x" à chaque passage. 00:04:22.386 --> 00:04:28.862 Donc si je mets 10, Whooooo ! Elle sort de l'écran ! Et je peux mettre un nombre négatif "x-10" et... 00:04:28.862 --> 00:04:34.552 Elle repasse ! puis positif... Hoops ! la voilà ! 00:04:34.552 --> 00:04:36.550 Bon. Voici les choses importantes à retenir : 00:04:36.550 --> 00:04:43.513 Cette partie, ici, est appelée la boucle d'animation. les dessins qui seront à l'intérieur seront dessinés en permanence, sans arrêt. 00:04:43.513 --> 00:04:52.015 Puis, vous créez vos variables à l'extérieur de la boucle. C'est très important, car cela permet de réutiliser la même variable dans la boucle. 00:04:52.015 --> 00:04:55.854 Puis, à l'intérieur de la boucle, ici, on va changer la valeur de la variable un petit peu... 00:04:55.854 --> 00:05:02.315 souvent, en utilisant sa précédente valeur plus ou moins un nombre. 00:05:02.315 --> 00:05:07.834 Enfin, on utilise cette variable pour que notre dessin soit un peu différent à chaque fois. 00:05:07.881 --> 00:05:10.171 Et... voilà !