const fireworks = [];

let gravity;

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(HSB);

  // Initialize gravity as a vector pointing downwards

  gravity = createVector(0, 0.2);

  stroke(255);

  strokeWeight(4);

  // Set the background to black initially

  background(0);

}

​

function draw() {

  // Switch color mode back to RGB for fading effect in the background

  colorMode(RGB);

    background(0, 15);

​

  noStroke();

  fill(255);

  for (let i = 0; i < 10; i++) {

    let xrandom = random(width);

    let yrandom = random(height);

    ellipse(xrandom, yrandom, 3, 3);

  }

  // Redraw background with low opacity to create a trailing effect

  background(0, 0, 0, 25);

  // Iterate through the fireworks array in reverse order

  for (let i = fireworks.length - 1; i >= 0; i--) {

    // Update the firework's position and state

    fireworks[i].update();

    // Display the firework

    fireworks[i].show();

    // Remove the firework from the array if it is done exploding

    if (fireworks[i].done()) {

      fireworks.splice(i, 1);

    }

  }

}

​

// Function called whenever the mouse is pressed

function mousePressed() {

  // Create a new firework at the mouse position and add it to the fireworks array

  fireworks.push(new Firework(mouseX, mouseY));

}

​

// Firework class definition

class Firework {

  constructor(x, y) {

    this.firework = new Particle(x, y, true);

    this.exploded = false;

    this.particles = [];

  }

  // Update the firework's state

  update() {

    if (!this.exploded) {

      // Apply gravity to the firework

      this.firework.applyForce(gravity);

      // Update the firework's position

      this.firework.update();

      // If the firework reaches the peak and starts falling, it explodes

      if (this.firework.vel.y >= 0) {

        this.exploded = true;

        this.explode();

      }

    }

    // Update the particles from the explosion

    for (let i = this.particles.length - 1; i >= 0; i--) {

      this.particles[i].applyForce(gravity);

      this.particles[i].update();

      // Remove particle if its lifespan is over

      if (this.particles[i].done()) {

        this.particles.splice(i, 1);

      }

    }

  }

  // Handle the explosion of the firework

  explode() {

    // Create multiple particles at the firework's current position

    for (let i = 0; i < 100; i++) {

      let p = new Particle(this.firework.pos.x, this.firework.pos.y);

      this.particles.push(p);

    }

  }

  // Display the firework and its particles

  show() {

    if (!this.exploded) {

      this.firework.show();

    }

    // Show all particles from the explosion

    for (let i = 0; i < this.particles.length; i++) {

      this.particles[i].show();

    }

  }

  // Determine if the firework is done (all particles are gone)

  done() {

    return this.exploded && this.particles.length === 0;

  }

}

​

// Particle class definition

class Particle {

  constructor(x, y, firework = false) {

    // Set the initial position of the particle

    this.pos = createVector(x, y);

    // Determine if this is the main firework particle or an explosion particle

    this.firework = firework;

    // Initialize the lifespan of the particle

    this.lifespan = 255;

    if (this.firework) {

      // If it's a firework, set the initial upward velocity

      this.vel = createVector(0, random(-12, -8));

    } else {

      // If it's an explosion particle, give it a random direction and speed

      this.vel = p5.Vector.random2D();

      this.vel.mult(random(2, 10));

    }

    // Initialize the acceleration of the particle

    this.acc = createVector(0, 0);

    // Give the particle a random hue for color

    this.hue = random(255);

  }

​

  applyForce(force) {

    this.acc.add(force);

  }

​

  // Update the particle's position and state

  update() {

    if (!this.firework) {

      // Slow down explosion particles over time

      this.vel.mult(0.9);

      // Reduce the lifespan of explosion particles

      this.lifespan -= 4;

    }

    // Update velocity and position based on acceleration

    this.vel.add(this.acc);

    this.pos.add(this.vel);

    // Reset acceleration after applying it

    this.acc.mult(0);

  }

​

  // Check if the particle's lifespan is over

  done() {

    return this.lifespan < 0;

  }

​

  // Display the particle on the canvas

  show() {

    // Set color mode to HSB for vibrant particles

    colorMode(HSB);

    if (!this.firework) {

      // Explosion particles are drawn with a thinner line and fading color

      strokeWeight(2);

      stroke(this.hue, 255, 255, this.lifespan);

    } else {

      // Firework particles are drawn with a thicker line

      strokeWeight(4);

      stroke(this.hue, 255, 255);

    }

    // Draw the particle as a point

    point(this.pos.x, this.pos.y);

  }

}

​