let columns = 8;

​

let grid = [];

let particles = [];

​

function setup() {

  createCanvas(400, 400);

  background(255);

​

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

    for (let j = 0; j < columns; j++) {

      createCell(

        (j * height) / rows,

        (i * width) / columns,

        height / rows,

        width / columns

      );

    }

  }

}

​

function draw() {

  background(0);

  for (let cell of grid) {

    cell.show();

    if (cell.w == height/rows) {

      cell.explode();

    }

  }

  updateAndDrawParticles();

}

​

function randColor() {

  let r = random(256);

  let g = random(256);

  let b = random(256);

  let result = color(r, g, b, 230);

  return result;

}

​

function createCell(x, y, w, h) {

  let cell = {

    x: x,

    y: y,

    fillColor: randColor(),

    show: function () {

      fill(this.fillColor);

      noStroke();

      ellipseMode(CORNER);

      ellipse(x, y, (w-10) - 10*cos(millis()*0.003), (h-10) - 10*cos(millis()*0.003));

    },

    explode: function () {

      makeParticles(this.x, this.y, 20);

    },

  };

​

  grid.push(cell);

}

​

​

function updateAndDrawParticles() {

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

    if (particles[i].dead) {

      particles.splice(i, 1);

    } else {

      particles[i].updateMe();

      particles[i].drawMe();

    }

  }

}

​

function randColor() {

  let r = random(256);

  let g = random(50);

  let b = random(50);

  let result = color(r, g, b, 128);

  return result;

}

​

function makeParticles(x, y, num) {

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

    let angle = random(TWO_PI);

    let speed = random(0, 8);

    let p = {

      x: x,

      y: y,

      rad: random(5, 8),

      fillColor: randColor(),

      velX: speed * cos(angle),

      velY: speed * sin(angle),

      lifespan: floor(random(25, 40)),

      age: 0,

      dead: false,

      drawMe: function () {

        let r = this.rad * (1 - this.age / this.lifespan);

        noStroke();

        fill(this.fillColor);

        ellipseMode(RADIUS);

        circle(this.x, this.y, r);

      },

      updateMe: function () {

        this.age += 1;

​

        if (this.age > this.lifespan) {

          this.dead = true;

        }

​

        if (this.dead) {

          this.fillColor = color(0, 0, 0, 128);

        }

​

        this.x = this.x + this.velX;

        this.y = this.y + this.velY;

        // this.velX += random(-0.5, 0.5);

        // this.velY += random(-0.5, 0.5);

        this.y += 1.5;

​

        if (this.velX > 4) {

          this.velX = 4;

        } else if (this.velX < -4) {

          this.velX = -4;

        }

        if (this.velY > 4) {

          this.velY = 4;

        } else if (this.velY < -4) {

          this.velY = -4;

        }

​

        // handle bouncing

        if (this.x > width - this.rad) {

          this.x = width - this.rad;

          this.velX = -this.velX;

        } else if (this.x < this.rad) {

          this.x = this.rad;

          this.velX = -this.velX;

        }

        if (this.y > height - this.rad) {

          this.y = height - this.rad;

          this.velY = -this.velY;

        } else if (this.y < this.rad) {

          this.y = this.rad;

          this.velY = -this.velY;

        }

      },

    };

    particles.push(p);

  }

}