A dynamic colored Eiffel tower with an afterimage effect |
La coloration dynamique est l’un des affichages les plus évidents de la boucle d’animation permanente de JavaZ. Il met à jour à la fois le mouvement de la tour Eiffel et l’ensemble du rendu, y compris la coloration. Image après image, tous les paramètres de rendu dépendent d’une seule variable, l’identifiant renvoyé par un objet fenêtre Javascript et généré par la boucle d’animation JavaZ : setTimeout()
.
activer / neutraliser la force de gravité (apesanteur par défaut) pour que la structure subisse (ou non) la force gravitationnelle | |
lecture / pause de la boucle animation (activée par défaut) | |
réinitialisation : rechargement du graphique |
Boucle d’animation JavaZ
animate_canvas()
est la fonction qui exécute le code d’animation. Cette fonction met d’abord à jour l’état de l’élément canvas. Puis il confère cette mise à jour au contexte du canvas afin de le dessiner. animate_canvas()
itère ensuite ses propres premières étapes simplement en s’auto-déclenchant à nouveau, générant ainsi une boucle programmatique sans fin [1].
function animate_canvas() {
if (clearRect){context.clearRect(0,0,width,height);}
update_canvas();
render_canvas(context);
t = setTimeout(animate_canvas, 35);
}
- JavaZ appelle
animate_canvas()
, qui à son tour appelleupdate_canvas()
. Cette fonction met à jour l’état actuel de l’élément canvas. Pendant ce temps, si requis par un booléen "clearRect", la méthode clearRect() efface tout l’élément canvas ou les pixels spécifiés dans un rectangle donné [2]. - une fois la mise à jour terminée,
render_canvas(context)
dessine l’état mis à jour de l’élément canvas. - Ensuite, JavaZ appelle la fonction
setTimeout()
. La méthode setTimeout() appelle une fonction, à savoir sa propre fonction appelante, après un laps de temps par défaut de 25 millisecondes (40 images par seconde). LesetTimeout()
n’est normalement exécuté qu’une seule fois. Comme il provoque directement l’exécution deanimate_canvas()
, il génère une boucle à moins que quelque chose ne soit fait pour l’arrêter.
Si des exécutions répétées sont nécessaires, la méthode setInterval()
est normalement utilisée en Javascript. Mais JavaZ utilise à la place le id renvoyé par la méthode setTimeout()
comme variable de temps (t). Cela permet à JavaZ de mettre à jour l’élément canvas en fonction du temps et d’en profiter. La variable temps permet de :
- définir indirectement le nombre d’images par seconde via la méthode
setTimeout()
, - mettre en pause ou arrêter l’animation en effaçant et en réinitialisant l’id de la méthode setTimeout(),
- réinitialiser l’état l’élément canvas au rechargement ou au redimensionnement de la fenêtre (réactivité ou responsivness),
- déclencher un événement à un moment donné. Pas besoin de coder un chronomètre supplémentaire.