Click to Launch Fireworks - xelsed.ai

function setup() {
  // Create a canvas that fills the entire browser window
  createCanvas(windowWidth, windowHeight);
  // Set the background to black for a night sky effect
  background(0);
  
  // Initialize gravity vector (downwards)
  gravity = createVector(0, 0.2); // Adjust 0.2 for stronger/weaker gravity
  
  // Set stroke weight for drawing points
  strokeWeight(4);
  
  // Set color mode to HSB for easier generation of bright, random colors
  // Hue: 0-255 (full color spectrum)
  // Saturation: 0-255 (0=grayscale, 255=vibrant)
  // Brightness: 0-255 (0=black, 255=white)
  // Alpha: 0-255 (0=transparent, 255=opaque)
  colorMode(HSB, 255);
}

function draw() {
  // Redraw background with slight transparency to create firework trails
  background(0, 25); // 25 alpha value makes it fade slowly
  
  // Loop through all fireworks from the end to the beginning
  // This allows safe removal of fireworks from the array during iteration
  for (let i = fireworks.length - 1; i >= 0; i--) {
    let firework = fireworks[i];
    
    // Update the firework's position and state
    firework.update();
    // Display the firework (or its particles if exploded)
    firework.show();
    
    // If the firework (or all its particles) has faded out, remove it
    if (firework.done()) {
      fireworks.splice(i, 1);
    }
  }
}

function mousePressed() {
  // Create a new firework at the current mouse position
  // The firework will start from the bottom and travel to this target
  fireworks.push(new Firework(mouseX, mouseY));
}

function windowResized() {
  // Resize the canvas to match the new window dimensions
  resizeCanvas(windowWidth, windowHeight);
}

constructor(targetX, targetY) {
    // Starting position at the bottom of the canvas, random X
    this.pos = createVector(random(width), height);
    // Target position (where the mouse was clicked)
    this.target = createVector(targetX, targetY);
    // Velocity vector calculated to reach the target from the starting position
    this.vel = p5.Vector.sub(this.target, this.pos);
    // Set the magnitude (speed) of the firework's ascent
    this.vel.setMag(random(8, 12)); // Adjust 8, 12 for different firework speeds
    
    // Acceleration vector (initially 0, gravity will be applied to particles)
    this.acc = createVector(0, 0);
    
    // Flag to check if the firework has exploded
    this.exploded = false;
    // Array to hold particles after explosion
    this.particles = [];
    
    // Random hue for this firework and its particles
    this.hu = random(255);
  }

done() {
    // If exploded, check if all particles are done
    if (this.exploded) {
      return this.particles.length === 0;
    } else {
      // If not exploded, it's not done yet
      return false;
    }
  }

update() {
    if (!this.exploded) {
      // Apply acceleration (currently 0 for firework's ascent, gravity affects particles)
      this.vel.add(this.acc);
      // Move the firework
      this.pos.add(this.vel);
      // Reset acceleration for next frame
      this.acc.mult(0);
      
      // Calculate distance to target
      let d = p5.Vector.dist(this.pos, this.target);
      
      // If the firework is close enough to its target, explode
      if (d < 10) { // Adjust 10 for explosion threshold
        this.explode();
        this.exploded = true;
      }
    } else {
      // If exploded, update each particle
      for (let i = this.particles.length - 1; i >= 0; i--) {
        let particle = this.particles[i];
        particle.update();
        // Remove particles that have faded out
        if (particle.done()) {
          this.particles.splice(i, 1);
        }
      }
    }
  }

show() {
    if (!this.exploded) {
      // Before explosion, draw the firework as a bright point
      stroke(this.hu, 255, 255); // Full saturation and brightness
      point(this.pos.x, this.pos.y);
    } else {
      // After explosion, draw each particle
      for (let particle of this.particles) {
        particle.show();
      }
    }
  }

explode() {
    // Generate between 50 and 100 particles
    for (let i = 0; i < random(50, 100); i++) {
      // Create a new particle at the explosion position with the firework's hue
      this.particles.push(new Particle(this.pos.x, this.pos.y, this.hu));
    }
  }

constructor(x, y, hu) {
    // Particle's position (explosion point)
    this.pos = createVector(x, y);
    // Random initial velocity, spreading outward
    this.vel = p5.Vector.random2D();
    this.vel.mult(random(1, 8)); // Adjust 1, 8 for different particle spread speeds
    
    // Acceleration vector (gravity will be applied here)
    this.acc = createVector(0, 0);
    
    // Lifespan for fading out (starts fully opaque)
    this.lifespan = 255;
    // Hue inherited from the firework
    this.hu = hu;
  }

done() {
    return this.lifespan < 0;
  }

update() {
    // Apply gravity to acceleration
    this.acc.add(gravity);
    // Apply acceleration to velocity
    this.vel.add(this.acc);
    // Move the particle
    this.pos.add(this.vel);
    // Reset acceleration for next frame
    this.acc.mult(0);
    
    // Decrease lifespan to fade the particle
    this.lifespan -= 5; // Adjust 5 for faster/slower fade
  }

show() {
    // Set stroke color with fading alpha
    stroke(this.hu, 255, 255, this.lifespan);
    strokeWeight(2); // Slightly thinner stroke for particles
    point(this.pos.x, this.pos.y);
  }