ai firework launcher

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Tip: Use windowWidth/windowHeight for responsive canvas
  
  // Set gravity
  gravity = createVector(0, 0.1); // Slightly less gravity for a floatier effect
  
  // No stroke for cleaner particles
  noStroke();
  // Use HSB color mode for easier color manipulation (hue 0-255)
  colorMode(HSB, 255); 
}

function draw() {
  // Draw a semi-transparent black background to create trails
  background(0, 25); 
  
  // Update and display each firework
  for (let i = fireworks.length - 1; i >= 0; i--) {
    fireworks[i].update();
    fireworks[i].show();
    
    // If the firework has finished its explosion, remove it from the array
    if (fireworks[i].done()) {
      fireworks.splice(i, 1);
    }
  }
}

function mousePressed() {
  // Launch a new firework from the bottom of the canvas
  // The hue is randomized for different colors
  fireworks.push(new Firework(random(255)));
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Called when preview panel is resized
}

class Particle {
  constructor(x, y, hu, firework) {
    this.pos = createVector(x, y); // Position
    this.firework = firework;      // Is this particle part of the initial rocket or the explosion?
    this.lifespan = 255;           // How long the particle lives (alpha value)
    this.hu = hu;                  // Hue for its color
    
    // Initial velocity
    if (this.firework) {
      // Rocket particle goes straight up with random initial speed
      this.vel = createVector(0, random(-10, -5)); 
    } else {
      // Explosion particles burst outwards with random velocity
      this.vel = p5.Vector.random2D(); // Random direction
      this.vel.mult(random(1, 6));     // Random speed
    }
    
    this.acc = createVector(0, 0); // Acceleration
  }

  // Apply a force to the particle (e.g., gravity)
  applyForce(force) {
    this.acc.add(force);
  }

  // Update particle's position and lifespan
  update() {
    if (!this.firework) {
      // Explosion particles slow down due to air resistance (or just simple drag)
      this.vel.mult(0.9); 
      this.lifespan -= 5; // Fade out
    }
    
    this.vel.add(this.acc); // Add acceleration to velocity
    this.pos.add(this.vel); // Add velocity to position
    this.acc.mult(0);       // Reset acceleration for the next frame
  }

  // Check if the particle has died (lifespan is 0)
  done() {
    return this.lifespan < 0;
  }

  // Display the particle
  show() {
    colorMode(HSB, 255); // Ensure HSB mode for particle colors
    
    if (!this.firework) {
      // Explosion particles are smaller and fade out
      strokeWeight(2);
      stroke(this.hu, 255, 255, this.lifespan); // Color with fading alpha
    } else {
      // Rocket particle is brighter and has a tail
      strokeWeight(4);
      stroke(this.hu, 255, 255); // Bright color
    }
    
    point(this.pos.x, this.pos.y); // Draw a point at the particle's position
  }
}

class Firework {
  constructor(hu) {
    this.hu = hu;                     // Hue for this firework
    this.firework = new Particle(random(width), height, this.hu, true); // The rocket particle
    this.exploded = false;            // Has the rocket exploded yet?
    this.particles = [];              // Array to hold explosion particles
  }

  // Check if the firework (and its explosion) is done
  done() {
    return this.exploded && this.particles.length === 0;
  }

  // Update the firework's state
  update() {
    if (!this.exploded) {
      this.firework.applyForce(gravity); // Apply gravity to the rocket
      this.firework.update();            // Update rocket position
      
      // If the rocket has reached its peak (velocity in Y direction becomes positive), explode!
      if (this.firework.vel.y >= 0) {
        this.exploded = true;
        this.explode();
      }
    } else {
      // If exploded, update all explosion particles
      for (let i = this.particles.length - 1; i >= 0; i--) {
        this.particles[i].applyForce(gravity); // Apply gravity to particles
        this.particles[i].update();
        
        // Remove dead particles from the array
        if (this.particles[i].done()) {
          this.particles.splice(i, 1);
        }
      }
    }
  }

  // Create explosion particles
  explode() {
    // Generate a random number of particles
    for (let i = 0; i < random(50, 150); i++) {
      // Each particle starts at the rocket's position
      this.particles.push(new Particle(this.firework.pos.x, this.firework.pos.y, this.hu, false));
    }
  }

  // Display the firework
  show() {
    if (!this.exploded) {
      // Display the rocket particle
      this.firework.show();
    } else {
      // Display all explosion particles
      for (let particle of this.particles) {
        particle.show();
      }
    }
  }
}