Dans cette leçon vidéo, le présentateur montre comment utiliser l'API Canvas en JavaScript pour animer des rectangles afin de visualiser un signal sinusoïdal évoluant dans le temps. Il décrit pas à pas la création du contexte 2D, le nettoyage périodique du canevas avec fillRect, le calcul de la hauteur des barres à l'aide de Math.sin (mise à l'échelle par un facteur de 200) et l'ajout d'un décalage d'angle (variable dec) incrémenté à chaque itération pour créer le mouvement. Une boucle génère un nombre configurable de barres (ex. 60), en espaçant chaque rectangle selon la largeur du canevas, et un second jeu de barres symétriques est ajouté pour illustrer la modulation d'amplitude. L'animation est pilotée par une fonction récursive appelée via setTimeout (ou setInterval) avec un intervalle d'environ 20 ms. Le tutoriel souligne les bonnes pratiques (choix de couleur, masquage des anciennes images) et montre le rendu final, expliquant comment ce même principe peut servir à créer des graphiques interactifs animés.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon sur l'API Canvas. Aujourd'hui, nous allons voir un petit exemple pratique qui consiste à faire animer des formes de base, en l'occurrence des rectangles. Un tel effet peut par exemple être utilisé pour créer des graphiques interactifs. Nous, dans cette vidéo, nous allons essayer de représenter un signal sinusoïdal qui évolue dans le temps. Au chargement de la page, On appelle une fonction anonyme qui va créer le contexte de rendu en 2D, bien entendu. Ensuite, on va appeler une fonction qui s'appelle animer, qui va être récursive. On déclare la fonction. Puisqu'elle est récursive, donc il va se rappeler à travers le timeout avec une période de 20 millisecondes par exemple. Bien sûr, on peut appeler la même fonction à travers la méthode setInterval, ça fait la même chose. Comme nous l'avons vu lors d'une vidéo précédente, quand on a affaire à une animation, il faut toujours couvrir l'espace de travail avec une couleur. Dans ce cas, je vais opter pour la couleur blanche. C'est une opération qui va être faite périodiquement afin qu'il puisse masquer les anciens objets. À l'aide de la méthode fillRect qui permet de créer un rectangle plein qui commence à la position 0, 0 et qui va s'étendre à la position 1000, 600, ce qui correspond exactement aux dimensions de notre canevas. Avant la création de ce calque de masquage, on va d'abord spécifier la couleur de remplissage. Qui sera blanche dans ce cas. Maintenant on va dessiner notre première barre verticale qui sera un rectangle mince mais on va lui changer de couleur. On mettra par exemple du gris un peu foncé. Notre rectangle commencera par exemple à la position, on va dire, 10 pixels à partir de la gauche, 300 à la verticale pour dire la moitié de la hauteur. Comme ça, la base du rectangle sera centrée au container qui n'est rien d'autre que le canevas. Puisque le rectangle sera mince, donc on va prendre une largeur de 8 pixels par exemple, puis on spécifie une valeur pour la hauteur. Notez bien que cette hauteur sera calculée à l'aide d'une fonction sinusoïdale. On mettra par exemple amp que l'on va calculer au préalable. Par exemple juste ici, on mettra amp égal, on appelle la fonction Math.sin qu'on a déjà vu en JavaScript qui permet d'exécuter la fonction sinus. Et comme valeur initiale on mettra par exemple 2π. On sait que la valeur du sinus est comprise entre -1 et 1. Attention, si on déclare ça ici, ça sera pas visible sur l'espace. Alors on va remettre la valeur à l'échelle. On va par exemple multiplier par 200. Comme ça, au lieu de 1 pixel, on aura 200 pixels. Exécutons déjà pour voir le rendu. On n'obtient rien, c'est normal parce que la valeur c'est 2π et on sait que sinus 2π est égal à 0, donc on n'aura rien. Alors on va changer de valeur, on va par exemple diviser par 4, ce qui correspond à 90°. On obtient 100 et c'est la valeur maximale que l'on peut atteindre. Afin de faire animer cet objet, on va initialiser certaines variables. Par exemple, on va créer une variable qui s'appelle dec pour décalage, initialisée à 0. On va le rajouter ici, puis on va l'incrémenter. Par exemple de 0,02. N'oubliez pas que les valeurs des angles sont spécifiées en radians. Alors exécutons. On voit bien que ça change avec une cadence semi-huitièmes. Tout ce qui reste à faire maintenant, c'est multiplier ces barres. Alors on va créer une boucle pour ça. D'abord, je vais spécifier le nombre de barres que je souhaite afficher. Par exemple nbr, mettre à 60 barres si vous voulez. Ensuite, on va calculer l'écart entre les barres égal à la largeur maximale du canevas, qui est dans ce cas 1000, divisé par le nbr. Maintenant, on va créer la boucle ici qui va s'exécuter 60 fois dans ce cas. Et là on va multiplier par la variable i qui varie. Là aussi on doit changer la position de début de chaque rectangle ou bien de chaque barre. On mettra la variable écart multipliée par i. On ajoutera un petit décalage vers la gauche de 4 pixels par exemple afin que l'objet ne soit pas dessiné sur le bord du canevas. En réexécutant, on voit bien que tous les éléments changent avec la même cadence. Pour corriger ça, on va diviser par nbr ici. Alors exécutons. Donc là, l'évolution de l'animation est bien celle attendue. On voit bien que ça évolue de manière sinusoïdale. On peut encore améliorer ce rendu. Pour ça, il suffit de copier ces 2 lignes, on change de couleur, par exemple du gris clair, et là on change de signe pour avoir la barre opposée ou bien la barre symétrique. Regardons maintenant ce que ça va donner. On obtient ceci. Ça nous rappelle la forme caractéristique de la modulation d'amplitude. Comme je l'ai mentionné au début de cette vidéo, le principe qu'on a vu pour cette animation est presque le même si vous voulez réussir des graphiques interactifs et animés. Merci pour votre attention et à la vidéo prochaine.
