Il y a plusieurs façon de réaliser des animations,
mais le principe de base est toujours le même :
Si vous prenez un ensemble de dessins
où chacun est un peu différent du précédent
et que vous les affichez assez rapidement,
ils auront l'air de bouger.
Il y a bien longtemps, tous les dessins étaient dessinés à la main.
Et c'était TRES long de faire assez de dessins pour seulement 3 secondes d'animation.
Heureusement pour nous, on utilise les nouvelles technologies.
C'est très simple de réaliser une animation avec du code.
Et je vais vous montrer ça !
Sur la droite, vous voyez cette voiture dessinée sur un fond jaune.
Si, si... j'ai dessiné ma voiture moi-même, merci !
Bon... ici, vous voyez le dessin du fond d'écran.
Et la voiture n'a pas de contour, on utilise la fonction "noStroke()" pour ça.
Et ici, on a créé une variable "x", qui est la position de la voiture, qui vaut 10.
Et vous voyez que si je change cette valeur,
la voiture se déplace en fonction.
Remettons 10.
Et ici, on définit la couleur de remplissage de la voiture et on dessine deux rectangles.
Le premier rectangle est pour celui du bas
et celui-là est pour le haut.
Puis, ici, on fait la même chose pour les roues
On définit la couleur et on dessine deux ellipses :
Une positionnée à x+25
et l'autre à x+75
Et à la fin on a ce nouveau code.
On appèle ce code la "définition d'une fonction".
Vous verrez ça en détail plus tard.
Pour l'instant on va juste l'utiliser.
La chose importante, ici, est de repérer le mot-clé "draw" ("dessiner" en anglais).
avec les accolades. Une qui est ouverte ici,
l'autre qui est fermée ici.
Cet ensemble, est ce qu'on appèle la boucle de dessin ou la boucle d'animation.
Tout ce que vous mettrez entre les accolades sera exécuté sans arrêt à une vitesse très rapide.
C'est pour ça que ça s'appèle une boucle.
Et le code à l'extérieur des accolades sera exécuté qu'une fois au tout début du programme.
OK. Pour une animation, la première étape consiste à déplacer votre code de dessin à l'intérieur des accolades.
Comme ça, votre dessin sera dessiné sans arrêt.
Faisons ça... Je vais prendre tout ce code... là.
Et le mettre à l'intérieur de ma boucle.
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).
Et maintenant, je vois mieux que le code est situé entre les accolades.
En faisant ça, on a l'impression que rien n'a changé.
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.
Puis, il va recommencer pour définir "x", dessiner 2 rectangles et 2 ellipses.
Puis, il va définir "x", dessiner 2 rectangles,.... Exactement toujours les mêmes choses !
Rien ne change ! Donc on ne voit aucune animation.
Il ne fait que dessiner les mêmes rectangles et les ellipses toujours au dessus des précédents.
Or souvenez-vous : on a dit que pour faire une animation, il fallait que quelque chose soit différent entre chaque dessin.
Donc si je veux que ma voiture avance,
je dois changer la valeur de la variable "x", n'est-ce pas ?
Donc, aller je le change en... 11.
Ha ! non ! Maintenant, il dessine sans arrêt à la position 11...
Bon... Comment vais-je faire pour changer la valeur de "x" à chaque fois que l'ordinateur exécute la boucle ?
OK. Regardez cette astuce simplement magique !
Regardez... ce "var x" crée une nouvelle variable.
Quand on met ce code DANS la boucle, il va créer une nouvelle variable à chaque fois, sans arrêt.
On a besoin de créer cette variable à l'extérieur de la boucle. Comme ça, elle sera créée q'une seule fois.
Et ainsi, à chaque boucle, l'ordinateur va pouvoir réutiliser la même variable et elle aura la valeur qu'on lui aura donné.
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.
Donc à chaque boucle, l'ordinateur va réutiliser la même variable. Sa valeur, pour l'instant est toujours de 11.
Donc elle va rester à 11. Voici le tour de magie !
Quelque part à l'intérieur de la boucle, on va changer la valeur de "x" pour qu'elle soit un peu plus grande.
Comme : x contient l'ancienne valeur de "x" plus 1.
Yeah !! ça marche !!!
Sauf que... il manque un truc. En fait, on a oublié de dessiner le fond d'écran à l'intérieur de la boucle.
Donc il dessine la voiture en la déplaçant mais au dessus des précédentes....
Donc, si je prends cette ligne pour la mettre dans la boucle, comme ça...
Et j'appuie sur le bouton "restart" (Redémarrer") pour voir ma voiture au début.
Yeah !! C'est parfait !!
Si je veux accélérer ma voiture, il suffit de changer la façon d'augmenter "x" à chaque passage.
Donc si je mets 10, Whooooo ! Elle sort de l'écran ! Et je peux mettre un nombre négatif "x-10" et...
Elle repasse ! puis positif... Hoops ! la voilà !
Bon. Voici les choses importantes à retenir :
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.
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.
Puis, à l'intérieur de la boucle, ici, on va changer la valeur de la variable un petit peu...
souvent, en utilisant sa précédente valeur plus ou moins un nombre.
Enfin, on utilise cette variable pour que notre dessin soit un peu différent à chaque fois.
Et... voilà !