Pirogue d'Antalaha - jeu de vanille (p5.js)

js/particules.js · 4.4 Ko

/* ============================================================
   particules.js - petits effets visuels (éclaboussures, étincelles, texte)
   ============================================================
   Une PARTICULE est un petit objet éphémère : elle naît avec une
   vitesse, se déplace, devient de plus en plus transparente, puis
   disparaît. Beaucoup de particules ensemble = un effet visuel
   (gerbe d'eau, étincelles dorées...).

   Une particule peut aussi porter un TEXTE (ex. « +5 ») qui monte
   en s'effaçant.
   ============================================================ */

class Particule {

  /* ----------------------------------------------------------
     constructor(x, y, vx, vy, vie, taille, couleur, texte)
     Paramètres :
       x, y     : position de départ
       vx, vy   : vitesse (unités par seconde)
       vie      : durée de vie en secondes
       taille   : diamètre en unités (ou taille du texte)
       couleur  : tableau [rouge, vert, bleu]
       texte    : (facultatif) texte à afficher à la place du rond
     ---------------------------------------------------------- */
  constructor(x, y, vx, vy, vie, taille, couleur, texte) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.vie = vie;            // temps restant
    this.vieMax = vie;         // durée initiale (pour calculer la transparence)
    this.taille = taille;
    this.couleur = couleur;
    this.texte = texte || null;
  }

  /* ----------------------------------------------------------
     mettreAJour(dt)
     But : faire avancer la particule.
     Paramètre : dt = secondes écoulées depuis la dernière image.
     Déplacement = vitesse x temps : x += vx * dt. Ainsi la
     particule va aussi vite sur un écran lent que sur un rapide.
     ---------------------------------------------------------- */
  mettreAJour(dt) {
    this.x += this.vx * dt;
    this.y += this.vy * dt;
    // Frottement : la vitesse diminue peu à peu (comme dans l'eau).
    const frottement = Math.pow(0.25, dt);
    this.vx *= frottement;
    this.vy *= frottement;
    this.vie -= dt;
  }

  /* ----------------------------------------------------------
     estVivante()
     Retour : true tant que la particule doit être affichée.
     ---------------------------------------------------------- */
  estVivante() {
    return this.vie > 0;
  }

  /* ----------------------------------------------------------
     dessiner()
     But : afficher la particule, de plus en plus transparente.
     ---------------------------------------------------------- */
  dessiner() {
    const reste = constrain(this.vie / this.vieMax, 0, 1);   // 1 -> 0 pendant la vie
    const alpha = 255 * reste;
    noStroke();
    if (this.texte !== null) {
      fill(this.couleur[0], this.couleur[1], this.couleur[2], alpha);
      textAlign(CENTER, CENTER);
      textStyle(BOLD);
      textSize(this.taille);
      text(this.texte, this.x, this.y);
      textStyle(NORMAL);
    } else {
      fill(this.couleur[0], this.couleur[1], this.couleur[2], alpha);
      circle(this.x, this.y, this.taille * (0.4 + 0.6 * reste));   // rétrécit en fin de vie
    }
  }

  /* ----------------------------------------------------------
     Particule.gerbe(liste, x, y, nombre, couleur, vitesse)
     MÉTHODE STATIQUE (liée à la classe, pas à une particule) :
     fabrique d'un coup `nombre` particules qui partent dans toutes
     les directions, et les ajoute à `liste`.
     Paramètres : liste = tableau de particules du jeu ;
       x, y = origine ; nombre ; couleur = [r, v, b] ; vitesse = vitesse max
     ---------------------------------------------------------- */
  static gerbe(liste, x, y, nombre, couleur, vitesse) {
    for (let i = 0; i < nombre; i++) {
      const angle = random(TWO_PI);                  // direction au hasard (0 à 360°)
      const v = random(0.3, 1) * vitesse;
      liste.push(new Particule(
        x, y,
        cos(angle) * v, sin(angle) * v,              // cos/sin transforment un angle en direction
        random(0.4, 0.9),
        random(4, 9),
        couleur
      ));
    }
  }

  /* ----------------------------------------------------------
     Particule.texteFlottant(liste, x, y, texte, couleur)
     MÉTHODE STATIQUE : crée un texte qui monte (ex. « +1 »).
     ---------------------------------------------------------- */
  static texteFlottant(liste, x, y, texte, couleur) {
    liste.push(new Particule(x, y, 0, -70, 0.9, 22, couleur, texte));
  }
}