let particlesTwo = [];

let particlesThree = [];

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

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

    let p = new Particle();

    particles.push(p);

  }

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

    particles[i].update();

    particles[i].show();

​

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

      particles.splice(i, 1);

    }

  }

​

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

    let p = new ParticleTwo();

    particlesTwo.push(p);

  }

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

    particlesTwo[i].update();

    particlesTwo[i].show();

​

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

      particlesTwo.splice(i, 1);

    }

  }

​

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

    let p = new ParticleThree();

    particlesTwo.push(p);

  }

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

    particlesThree[i].update();

    particlesThree[i].show();

​

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

      particlesThree.splice(i, 1);

    }

  }

}

​

class Particle {

  constructor() {

    this.x = 300;

    this.y = 395;

    this.vx = random(-1, 1);

    this.vy = random(-5, -2);

    this.alpha = 255;

  }

​

  finished() {

    return this.alpha < 0;

  }

​

  update() {

    this.x += this.vx;

    this.y += this.vy;

    this.alpha -= 4;

  }

​

  show() {

    noStroke();

    fill(0, 100);

    ellipse(this.x, this.y, 16);

  }

}

​

class ParticleTwo {

  constructor() {

    this.x = 100;

    this.y = 395;

    this.vx = random(-1, 1);

    this.vy = random(-5, -2);

    this.alpha = 255;

  }

​

  finished() {

    return this.alpha < 0;

  }

​

  update() {

    this.x += this.vx;

    this.y += this.vy;

    this.alpha -= 4;

  }

​

  show() {

    noStroke();

    fill(255, 0, 0, 100);

    ellipse(this.x, this.y, 16);

  }

}

​

class ParticleThree {

  constructor() {

    this.x = 200;

    this.y = 395;

    this.vx = random(-1, 1);

    this.vy = random(-5, -2);

    this.alpha = 255;

  }

​

  finished() {

    return this.alpha < 0;

  }

​

  update() {

    this.x += this.vx;

    this.y += this.vy;

    this.alpha -= 4;

  }

​

  show() {

    noStroke();

    fill(100, this.alpha);

    ellipse(this.x, this.y, 16);

  }

}

​