let colorIndex = 0; // To keep track of the current color

​

function setup() {

  createCanvas(400, 400);

  background(0);

}

​

function draw() {

  background(0, 25); // Slightly fade the background for a trailing effect

​

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

    particles[i].update();

    particles[i].show();

    if (particles[i].finished()) {

      particles.splice(i, 1);

    }

  }

​

  // Create a new firework every 60 frames

  if (frameCount % 60 === 0) {

    createFirework();

    colorIndex = (colorIndex + 1) % 4; // Cycle through colors

  }

}

​

function createFirework() {

  let colors = ['#D43C8F', '#4EC0E1', '#70BA2B', '#F3EB33'];

  let fireworkColor = colors[colorIndex]; // Get the current color

  let x = random(width);

  let y = random(height / 2);

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

    particles.push(new Particle(x, y, fireworkColor));

  }

}

​

class Particle {

  constructor(x, y, color) {

    this.pos = createVector(x, y);

    this.vel = p5.Vector.random2D().mult(random(1, 5));

    this.acc = createVector(0, 0);

    this.lifespan = 255;

    this.color = color;

  }

​

  applyForce(force) {

    this.acc.add(force);

  }

​

  update() {

    this.vel.add(this.acc);

    this.pos.add(this.vel);

    this.acc.set(0, 0);

    this.lifespan -= 4;

  }

​

  finished() {

    return this.lifespan < 0;

  }

​

  show() {

    noStroke();

    fill(this.color + hex(this.lifespan, 2));

    ellipse(this.pos.x, this.pos.y, 5);

  }

​

}

function keyPressed() {

  if (key === 's') {

    saveGif('mySketch', 12);

  }

}