-
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à !
