Pour continuer dans la série des développements en javascript et <canvas>, J’ai réalisé une animation de particules.
Pour cela je crée une classe « particle », avec les propriétés et méthodes suivantes :
- x, y : position
- vx, vy : vecteur vitesse
- lifetime, lifespeed : age et increment d’age
- create : initialise la particule avec une position, une vitesse aléatoire, une durée de vie aléatoire
- update : met à jour sa position, sa vitesse, son age
- draw : dessine la particule sur le canvas
Calcul de la trajectoire (rappel de physique) :
- La position est déterminée en fonction de la vitesse :
Position = Position + Vecteur vitesse - La vitesse est déterminée en fonction de l’accélération :
Vecteur vitesse = Vecteur vitesse + vecteur Accélération - Ici l’accélération ne dépend que de la force gravitationelle.
Accélération = Gravité
On obtient alors une trajectoire parabolique.
Pour déterminer la couleur de la particule, je crée une classe « palette » contenant un dégradé de 256 couleurs indexées. Lorsque je place un pixel sur le canvas, je vais rechercher la couleur en fonction de l’age de la particule. A chaque mise à jour l’age est incrémenté. Au delà de l’age limite de 256, la particule est recyclée.
L’effet de flammes est réalisé grâce à l’association de la recopie d’image et l’utilisation de l’alpha : Je recopie le contenu du premier canvas vers le deuxième, puis je fixe son alpha à 0.5, et enfin je recopie le contenu du deuxième canvas vers le premier 4 fois, mais avec un décalage, ce qui va générer l’effet voulu.
Plus »
