let n = 100;

let all_cells = [];

let w, h;

​

function setup() {

  createCanvas(700, 700);

  w = width;

  h = height;

  background(0);

}

​

class Cell {

  constructor(id) {

    this.id = id;

    this.w = random(30, 60);

    this.h = random(5, 20);

    this.posX = random(w);

    this.ori_posX = this.posX;

    this.posY = random(h);

    this.ori_posY = this.posY;

    this.colr = color(random(255), random(255), random(255));

  }

  show() {

    //noStroke();

    fill(this.colr);

    rect(this.posX, this.posY, this.w, this.h, random(1, 20), random(3, 8), random(4, 10), random(1, 25));

  }

  move() {

    this.posX += random(-0.3, 0.3);

    this.posY += random(-0.3, 0.3);

  }

  hover() {

    if (mouseX != 0 && mouseY != 0) {

      if (this.posX < mouseX) {

        this.posX += random(0.5, 0.7);

      } else {

        this.posX -= random(0.5, 0.7);

      }

      if (this.posY < mouseY) {

        this.posY += random(0.5, 0.7);

      } else {

        this.posY -= random(0.5, 0.7);

      }

    }

  }

  restore_pos() {

    this.posX = random(this.posX, this.ori_posX);

    this.posY = random(this.posY, this.ori_posY);

  }

}

​

function draw() {

  background(0);

  if (counter % n !== 0) {

    while (true) {

      cell_width = random(10, 20);

      cell_height = random(20, 30);

      let cell = new Cell(counter);

      all_cells[counter] = cell;

​

      if (counter % n === 0) {

        break;

      }

​

      counter++;

    }

  }

  if (mouseIsPressed) {

    for (let i = 1; i <= counter; i++) {

      all_cells[i].restore_pos();

    }

  }

  for (let i = 1; i <= counter; i++) {

    all_cells[i].move();

    all_cells[i].show();

    all_cells[i].hover();

  }

}