Boucle de texte animée : Courbes de Lissajous

Chaque fois que l'utilisateur doit attendre la fin d'un processus long (par exemple, le téléchargement d'un fichier ou l'achèvement de calculs), au lieu d'afficher un message ennuyeux "veuillez patienter" ou un cercle qui tourne, pourquoi ne pas animer un texte brillant ?

Voici comment cela fonctionne (code complet ci-dessous) :

Les lignes [1-6] configurent le Canvas HTML5.
[7] Définit le flou - c'est ce qui fait "briller" les lettres.
[8] Réinitialise le compteur principal.
[9] Le texte que nous voulons afficher.

[11-25] La boucle d'animation principale :
[12] Efface l'image précédente.
[13] Pour chaque lettre :
[14] Calcule le compteur auxiliaire
[15-16] Les coordonnées x et y de la lettre sont calculées à l'aide d'une formule qui calcule le sinus/cosinus du compteur auxiliaire (courbe de Lissajous autour du centre du canvas).
Essayez de jouer avec différentes valeurs, je suis arrivé à celles-ci par essais et erreurs.
[17] La couleur RVB de la lettre :
La composante Rouge dépend de la coordonnée x.
La composante Verte est toujours zéro.
La composante Bleue dépend de la coordonnée y.
Cela donne la carte de couleurs suivante :

[18-19] applique la couleur à la lettre et à l'ombre (flou).
[20] La taille de la lettre (police) dépend de la coordonnée x.
[21] Dessine la lettre.
[23] Augmente le compteur principal.
[24] Demande l'image suivante.
[26] Démarrez !

<html>

let canvas = document.getElementById("myCanvas");

let context = canvas.getContext("2d");

context.shadowBlur = 20;

let counter = 0;

let text = 'Chargement......';

function animate() {

context.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < text.length; i++) {

let counter2 = counter / 10 + i;

let x = canvas.width / 2 + 200 * Math.sin(counter2 / (Math.PI * 1.2));

let y = canvas.height / 2 + 160 * Math.cos(counter2 / (Math.PI * 8));

let color = `rgb(${Math.floor(x / 2)}, 0, ${Math.floor(y)})`;

context.fillStyle = color;

context.shadowColor = color;

context.font = 'bold ' + x / 10 + 'px sans-serif';

context.fillText(text.charAt(i), x, y);

}

counter++;

window.requestAnimationFrame(animate);

}

animate();

</script>

</body>

</html>