TP-5 : Un système de particules

Nous allons implémenter un système de particules en JavaScript, grâce à la balise canvas.

Voici une capture d’écran de ce que nous allons réaliser :

Bien sûr dans notre cas, les particules se déplaceront.

1. Création du canvas

Le canvas est une balise HTML qui permet de dessiner des graphiques en 2D ou en 3D. Il est très utilisé pour les jeux vidéo ou les animations.

Dans un fichier index.js, créez deux constantes WIDTH et HEIGHT qui définiront la taille du canvas. Vous pouvez les initialiser à 800 et 600 par exemple. Faire en sorte qu’un élément canvas soit présent dans la page, avec ces dimensions.

Pour mieux voir les particules, vous pouvez ajouter un fond noir au canvas, dans un fichier style.css :

canvas {
	background-color: black;
}

Lancer le projet dans le navigateur

Pour lancer le projet, il faudra utiliser l’extension Live Server de VSCode, afin de servir les fichiers via le protocol HTTP. En effet, il n’est pas possible d’utiliser les modules JavaScript si on ouvrre le fichier html directement dans le navigateur.

1. Ouvrir le dossier de travail dans VSCode.
2. Installer l’extension Live server
3. Faire une click droit sur index.html dans l’explorer VSCode et selectionner Ouvrir avec Live Server (premier élément de la liste).

2. Création de la classe Particle

Créer une classe Particle dans un fichier particle.js qui contiendra les méthodes suivantes :

• constructor(x, y, dx, dy, color) : initialise une nouvelle particule avec les paramètres suivants :

  • x : la position en x de la particule
  • y : la position en y de la particule
  • dx : la vitesse en x de la particule
  • dy : la vitesse en y de la particule

  Cette méthode initialisera également la couleur de la particule. Pour générer une couleur aléatoire, vous pouvez utiliser la fonction suivante :

  function randomColor() {
  	return `hsl(${Math.random() * 360}, ${50 + Math.random() * 50}%, ${50 + Math.random() * 50}%)`;
  }

• update(max_width, max_height) : met à jour la position de la particule en fonction de sa vitesse et de la taille du canvas Lorsque la particule atteint le bord du canvas, elle doit rebondir.

• draw(ctx) : dessine la particule sur le canvas passé en argument Pour la couleur, vous pouvez utiliser la méthode fillStyle du contexte 2D. Vous pouvez utiliser la méthode fillRect du contexte 2D du canvas (ctx) pour dessiner un rectangle de 2 pixels de côté.

3. Création du système de particules

Initialisez un tableau de particules dans le fichier index.js. Ce tableau sera initialisé avec un nombre de particules spécifié dans une constante PARTICLE_COUNT. Chaque élément du tableau sera une instance de la classe Particle.

Creer une fonction renderParticles qui dessinera toutes les particules du tableau. Elle appellera la méthode update de chaque particule pour les faire bouger, puis la méthode draw pour les dessiner.

Cette fonction devra être appellée à intervalles réguliers pour animer les particules. Vous pouvez utiliser la fonction requestAnimationFrame pour cela. Elle est plus adaptée que setInterval pour les animations, car elle est synchronisée avec le taux de rafraîchissement du navigateur.

4. Explosion au clic

Ajoutez un écouteur d’événement sur le canvas pour détecter les clics de souris. Lorsque l’utilisateur clique, une explosion de particules doit se produire à l’endroit du clic.

5. Champs de force gravitationnel

Ajoutez un champ de force gravitationnel autour de la souris. Lorsque l’utilisateur bouge la souris, les particules doivent être repoussées par la souris.

Pour cela, vous devrez modifier la vitesse par rapport à la position de souris.

Vous pouvez utiliser la formule suivante :

const angle = Math.atan2(mouseY - this.y, mouseX - this.x);
this.dx += Math.cos(angle);
this.dy += Math.sin(angle);

• Faire en sorte que le champs de force ne s’applique qu’à une certaine distance de la souris.
• Faire en sorte que les particules hors de cette distance rallentissent progressivement.
• Faire en sorte de pouvoir paramétrer la force du champs de force.
• Faire en sorte que le champs de force dépende de la distance à la souris.
• Modifier les différents paramètres jusq’à obtenir un résultat qui vous plait.

Corrigé