g = 100,

  b = 200;

let z = -1000;

let x = 0,

  y = 0;

let tempX, tempY, screenPositionGen;

let boxPositionX2D, boxPositionY2D;

let d;

let explosions = [];

let particles = [];

const gravity = 0.25;

let firsTimeExplosion = false; // not yet occured

​

function setup() {

  createCanvas(400, 400, WEBGL);

  avoidClipping();

  angleMode(DEGREES);

  addScreenPositionFunction();

}

​

function draw() {

  background(255);

  translate(-width / 2, -height / 2, 0);

  push();

  fill(r, g, b);

  translate(x, y, z);

  box(80, 80, 80);

  // explosion

  particles.forEach((p) => {

    p.step();

    p.draw();

  });

  particles = particles.filter((p) => p.isAlive);

​

  //Screenposition

  ScreenPositionGen = screenPosition(0, 0, 0);

  boxPositionX2D = ScreenPositionGen.x;

  boxPositionY2D = ScreenPositionGen.y;

​

  z += 5;

​

  pop();

}

​

function avoidClipping() {

  perspective(PI / 3.0, width / height, 1, 1000000);

}

​

function explosionCreated() {

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

}

​

function mouseClicked(event) {

  d = dist(

    mouseX - width / 2,

    mouseY - height / 2,

    boxPositionX2D,

    boxPositionY2D

  );

​

  if (d < 80) {

    firsTimeExplosion = true;

    explosionCreated();

    // particles are created and explosion takes place

    //Rest of the code

    x = random(0, 400);

    y = random(0, 400);

    z = -1000;

    r = random(0, 255);

    g = random(0, 255);

    b = random(0, 255);

  }

}

​

class Particle {

  constructor(x, y, xSpeed, ySpeed, pColor, size) {

    this.x = 0;

    this.y = 0;

    this.xSpeed = xSpeed;

    this.ySpeed = ySpeed;

    this.color = pColor;

    this.size = 40;

    this.isAlive = true;

  }

​

  step() {

    this.trail = createVector(this.x, this.y, this.z);

    this.x += this.xSpeed;

    this.y += this.ySpeed;

    this.ySpeed += gravity;

  }

​

  draw() {

    fill(r, g, b);

    noStroke();

    // Breakdown to smaller boxes ?? How ??

    rect(this.x, this.y, this.size, this.size);

  }

}

​

class Firework extends Particle {

  constructor(x, y) {

    super(x, y, random(-5, 5), random(-5, 5), 255, 10);

  }

​

  step() {

    super.step();

    const explosionSize = 40;

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

      const speed = random(-5, 5);

      const angle = random(TWO_PI);

      const xSpeed = cos(angle) * speed;

      const ySpeed = sin(angle) * speed;

      particles.push(

        new Particle(this.x, this.y, xSpeed, ySpeed, this.color, 5)

      );

    }

    this.isAlive = false;

  }

}

​