[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.11,0:00:03.19,Default,,0000,0000,0000,,Il y a plusieurs façon de \Nréaliser des animations,
Dialogue: 0,0:00:03.19,0:00:05.24,Default,,0000,0000,0000,,mais le principe de base est\Ntoujours le même :
Dialogue: 0,0:00:05.24,0:00:07.13,Default,,0000,0000,0000,,Si vous prenez un ensemble de dessins
Dialogue: 0,0:00:07.13,0:00:09.73,Default,,0000,0000,0000,,où chacun est un peu différent du précédent
Dialogue: 0,0:00:09.73,0:00:11.46,Default,,0000,0000,0000,,et que vous les affichez assez rapidement,
Dialogue: 0,0:00:11.46,0:00:13.27,Default,,0000,0000,0000,,ils auront l'air de bouger.
Dialogue: 0,0:00:13.27,0:00:16.17,Default,,0000,0000,0000,,Il y a bien longtemps, tous les dessins\Nétaient dessinés à la main.
Dialogue: 0,0:00:16.17,0:00:19.70,Default,,0000,0000,0000,,Et c'était TRES long de faire assez de \Ndessins pour seulement 3 secondes d'animation.
Dialogue: 0,0:00:19.70,0:00:22.88,Default,,0000,0000,0000,,Heureusement pour nous,\Non utilise les nouvelles technologies.
Dialogue: 0,0:00:22.88,0:00:26.13,Default,,0000,0000,0000,,C'est très simple de réaliser \Nune animation avec du code.
Dialogue: 0,0:00:26.13,0:00:27.100,Default,,0000,0000,0000,,Et je vais vous montrer ça !
Dialogue: 0,0:00:27.100,0:00:31.47,Default,,0000,0000,0000,,Sur la droite, vous voyez cette voiture\Ndessinée sur un fond jaune.
Dialogue: 0,0:00:31.47,0:00:34.96,Default,,0000,0000,0000,,Si, si... j'ai dessiné ma voiture moi-même, merci !
Dialogue: 0,0:00:34.96,0:00:38.58,Default,,0000,0000,0000,,Bon... ici, vous voyez le dessin du fond d'écran.
Dialogue: 0,0:00:38.58,0:00:42.53,Default,,0000,0000,0000,,Et la voiture n'a pas de contour, on utilise\Nla fonction "noStroke()" pour ça.
Dialogue: 0,0:00:42.53,0:00:47.47,Default,,0000,0000,0000,,Et ici, on a créé une variable "x", qui est la \Nposition de la voiture, qui vaut 10.
Dialogue: 0,0:00:47.47,0:00:49.46,Default,,0000,0000,0000,,Et vous voyez que si je change cette valeur,
Dialogue: 0,0:00:49.46,0:00:52.10,Default,,0000,0000,0000,,la voiture se déplace en fonction.
Dialogue: 0,0:00:52.10,0:00:53.53,Default,,0000,0000,0000,,Remettons 10.
Dialogue: 0,0:00:53.53,0:00:57.59,Default,,0000,0000,0000,,Et ici, on définit la couleur de remplissage de la voiture\Net on dessine deux rectangles.
Dialogue: 0,0:00:57.59,0:01:00.06,Default,,0000,0000,0000,,Le premier rectangle est pour celui du bas
Dialogue: 0,0:01:00.06,0:01:02.48,Default,,0000,0000,0000,,et celui-là est pour le haut.
Dialogue: 0,0:01:02.48,0:01:05.03,Default,,0000,0000,0000,,Puis, ici, on fait la même chose pour les roues
Dialogue: 0,0:01:05.03,0:01:06.98,Default,,0000,0000,0000,,On définit la couleur et on dessine deux ellipses :
Dialogue: 0,0:01:06.98,0:01:08.65,Default,,0000,0000,0000,,Une positionnée à x+25
Dialogue: 0,0:01:08.65,0:01:10.19,Default,,0000,0000,0000,,et l'autre à x+75
Dialogue: 0,0:01:10.19,0:01:12.83,Default,,0000,0000,0000,,Et à la fin on a ce nouveau code.
Dialogue: 0,0:01:12.83,0:01:15.17,Default,,0000,0000,0000,,On appèle ce code la "définition d'une fonction".
Dialogue: 0,0:01:15.17,0:01:16.69,Default,,0000,0000,0000,,Vous verrez ça en détail plus tard.
Dialogue: 0,0:01:16.69,0:01:19.57,Default,,0000,0000,0000,,Pour l'instant on va juste l'utiliser.
Dialogue: 0,0:01:19.57,0:01:24.29,Default,,0000,0000,0000,,La chose importante, ici, est de repérer \Nle mot-clé "draw" ("dessiner" en anglais).
Dialogue: 0,0:01:24.29,0:01:25.19,Default,,0000,0000,0000,,avec les accolades. Une qui est ouverte ici,
Dialogue: 0,0:01:25.19,0:01:26.75,Default,,0000,0000,0000,,l'autre qui est fermée ici.
Dialogue: 0,0:01:26.75,0:01:30.53,Default,,0000,0000,0000,,Cet ensemble, est ce qu'on appèle\Nla boucle de dessin ou la boucle d'animation.
Dialogue: 0,0:01:30.53,0:01:35.30,Default,,0000,0000,0000,,Tout ce que vous mettrez entre les accolades\Nsera exécuté sans arrêt à une vitesse très rapide.
Dialogue: 0,0:01:35.30,0:01:36.70,Default,,0000,0000,0000,,C'est pour ça que ça s'appèle une boucle.
Dialogue: 0,0:01:36.70,0:01:41.79,Default,,0000,0000,0000,,Et le code à l'extérieur des accolades sera exécuté\Nqu'une fois au tout début du programme.
Dialogue: 0,0:01:41.79,0:01:45.53,Default,,0000,0000,0000,,OK. Pour une animation, la première étape consiste à déplacer \Nvotre code de dessin à l'intérieur des accolades.
Dialogue: 0,0:01:45.53,0:01:47.83,Default,,0000,0000,0000,,Comme ça, votre dessin sera dessiné sans arrêt.
Dialogue: 0,0:01:47.83,0:01:51.66,Default,,0000,0000,0000,,Faisons ça... Je vais prendre tout ce code... là.
Dialogue: 0,0:01:51.66,0:01:54.26,Default,,0000,0000,0000,,Et le mettre à l'intérieur de ma boucle.
Dialogue: 0,0:01:54.26,0:02:02.47,Default,,0000,0000,0000,,Pour bien voir que ce code est entre les accolades, \Nje vais l'indenter en sélectionnant le code \Net en pressant la touche "Tab" (tabulation).
Dialogue: 0,0:02:02.47,0:02:05.75,Default,,0000,0000,0000,,Et maintenant, je vois mieux que le code est \Nsitué entre les accolades.
Dialogue: 0,0:02:05.75,0:02:10.21,Default,,0000,0000,0000,,En faisant ça, on a l'impression que rien n'a changé.
Dialogue: 0,0:02:10.21,0:02:17.79,Default,,0000,0000,0000,,Car, la première fois que cette boucle est exécutée\Nl'ordinateur définit la variable "x", lui affecte 10, dessine\Ndeux rectangles et deux ellipses.
Dialogue: 0,0:02:17.79,0:02:24.29,Default,,0000,0000,0000,,Puis, il va recommencer pour définir "x", dessiner \N2 rectangles et 2 ellipses.
Dialogue: 0,0:02:24.29,0:02:28.21,Default,,0000,0000,0000,,Puis, il va définir "x", dessiner 2 rectangles,....\NExactement toujours les mêmes choses !
Dialogue: 0,0:02:28.21,0:02:31.15,Default,,0000,0000,0000,,Rien ne change ! Donc on ne voit aucune animation.
Dialogue: 0,0:02:31.15,0:02:34.66,Default,,0000,0000,0000,,Il ne fait que dessiner les mêmes rectangles et les ellipses\Ntoujours au dessus des précédents.
Dialogue: 0,0:02:34.66,0:02:40.40,Default,,0000,0000,0000,,Or souvenez-vous : on a dit que pour faire une animation,\Nil fallait que quelque chose soit différent entre chaque dessin.
Dialogue: 0,0:02:40.40,0:02:42.76,Default,,0000,0000,0000,,Donc si je veux que ma voiture avance,
Dialogue: 0,0:02:42.76,0:02:45.36,Default,,0000,0000,0000,,je dois changer la valeur de la variable "x",\Nn'est-ce pas ?
Dialogue: 0,0:02:45.36,0:02:48.05,Default,,0000,0000,0000,,Donc, aller je le change en... 11.
Dialogue: 0,0:02:48.05,0:02:51.12,Default,,0000,0000,0000,,Ha ! non ! Maintenant, il dessine sans arrêt\Nà la position 11...\N
Dialogue: 0,0:02:51.12,0:02:57.56,Default,,0000,0000,0000,,Bon... Comment vais-je faire pour changer la valeur de "x" \Nà chaque fois que l'ordinateur exécute la boucle ?
Dialogue: 0,0:02:57.56,0:02:59.71,Default,,0000,0000,0000,,OK. Regardez cette astuce simplement magique !
Dialogue: 0,0:02:59.71,0:03:02.79,Default,,0000,0000,0000,,Regardez... ce "var x" crée une nouvelle variable.
Dialogue: 0,0:03:02.79,0:03:08.06,Default,,0000,0000,0000,,Quand on met ce code DANS la boucle, il va créer\Nune nouvelle variable à chaque fois, sans arrêt.
Dialogue: 0,0:03:08.06,0:03:13.47,Default,,0000,0000,0000,,On a besoin de créer cette variable à l'extérieur de la boucle.\NComme ça, elle sera créée q'une seule fois.
Dialogue: 0,0:03:13.47,0:03:22.77,Default,,0000,0000,0000,,Et ainsi, à chaque boucle, l'ordinateur va pouvoir réutiliser la \Nmême variable et elle aura la valeur qu'on lui aura donné.
Dialogue: 0,0:03:22.77,0:03:31.30,Default,,0000,0000,0000,,Allez, je fais ça. Je prends cette variable, je la mets à \Nl'extérieur de la boucle. Elle est donc créée qu'une fois.
Dialogue: 0,0:03:31.30,0:03:38.29,Default,,0000,0000,0000,,Donc à chaque boucle, l'ordinateur va réutiliser \Nla même variable. Sa valeur, pour l'instant est toujours de 11.
Dialogue: 0,0:03:38.29,0:03:41.76,Default,,0000,0000,0000,,Donc elle va rester à 11.\NVoici le tour de magie !
Dialogue: 0,0:03:41.76,0:03:46.15,Default,,0000,0000,0000,,Quelque part à l'intérieur de la boucle, on va changer\Nla valeur de "x" pour qu'elle soit un peu plus grande.
Dialogue: 0,0:03:46.15,0:03:50.54,Default,,0000,0000,0000,,Comme : x contient l'ancienne valeur de "x" plus 1.
Dialogue: 0,0:03:50.54,0:03:54.93,Default,,0000,0000,0000,,Yeah !! ça marche !!!
Dialogue: 0,0:03:54.93,0:04:02.82,Default,,0000,0000,0000,,Sauf que... il manque un truc. En fait, on a oublié de\Ndessiner le fond d'écran à l'intérieur de la boucle.
Dialogue: 0,0:04:02.82,0:04:07.15,Default,,0000,0000,0000,,Donc il dessine la voiture en la déplaçant mais au dessus \Ndes précédentes....
Dialogue: 0,0:04:07.15,0:04:12.19,Default,,0000,0000,0000,,Donc, si je prends cette ligne pour la mettre dans la boucle,\Ncomme ça...
Dialogue: 0,0:04:12.19,0:04:15.98,Default,,0000,0000,0000,,Et j'appuie sur le bouton "restart" (Redémarrer") pour\Nvoir ma voiture au début.
Dialogue: 0,0:04:15.98,0:04:18.27,Default,,0000,0000,0000,,Yeah !! C'est parfait !!
Dialogue: 0,0:04:18.27,0:04:22.39,Default,,0000,0000,0000,,Si je veux accélérer ma voiture, il suffit de changer\Nla façon d'augmenter "x" à chaque passage.
Dialogue: 0,0:04:22.39,0:04:28.86,Default,,0000,0000,0000,,Donc si je mets 10, Whooooo ! Elle sort de l'écran !\NEt je peux mettre un nombre négatif "x-10" et...
Dialogue: 0,0:04:28.86,0:04:34.55,Default,,0000,0000,0000,,Elle repasse ! puis positif... Hoops ! la voilà !
Dialogue: 0,0:04:34.55,0:04:36.55,Default,,0000,0000,0000,,Bon. Voici les choses importantes à retenir :
Dialogue: 0,0:04:36.55,0:04:43.51,Default,,0000,0000,0000,,Cette partie, ici, est appelée la boucle d'animation.\Nles dessins qui seront à l'intérieur seront dessinés \Nen permanence, sans arrêt.
Dialogue: 0,0:04:43.51,0:04:52.02,Default,,0000,0000,0000,,Puis, vous créez vos variables à l'extérieur de la boucle.\NC'est très important, car cela permet de réutiliser la même\Nvariable dans la boucle.
Dialogue: 0,0:04:52.02,0:04:55.85,Default,,0000,0000,0000,,Puis, à l'intérieur de la boucle, ici, on va changer la valeur \Nde la variable un petit peu...
Dialogue: 0,0:04:55.85,0:05:02.32,Default,,0000,0000,0000,,souvent, en utilisant sa précédente valeur \Nplus ou moins un nombre.
Dialogue: 0,0:05:02.32,0:05:07.83,Default,,0000,0000,0000,,Enfin, on utilise cette variable pour que notre dessin \Nsoit un peu différent à chaque fois.
Dialogue: 0,0:05:07.88,0:05:10.17,Default,,0000,0000,0000,,Et... voilà !