let hover_zoom_factor_box = 1.5;

let base_zoom_factor_circle = 1;

let hover_zoom_factor_circle = 1.5;

let boxside = 20;

let radius = 20;

let xstart = 0.2 * boxside + boxside;

let ystart = 0.2 * boxside + boxside;

let xgap = xstart + xstart * 0.1;

let ygap = ystart + ystart * 0.1;

​

class Box {

  constructor(xcentre, ycentre, width_side, height_side, col) {

    this.xcentre = xcentre;

    this.ycentre = ycentre;

    this.width_side = width_side;

    this.height_side = height_side;

    this.col = col;

  }

​

  drawbox() {

    noStroke();

    rectMode(CENTER);

    let zoom = this.getZoomFactor();

    fill(this.getFillColor());

    rect(this.xcentre, this.ycentre, this.width_side * zoom, this.height_side * zoom);

    noFill();

  }

  isMouseOnBox() {

    return (mouseX >= this.xcentre - this.width_side / 2 &&

            mouseX <= this.xcentre + this.width_side / 2 &&

            mouseY >= this.ycentre - this.height_side / 2 &&

            mouseY <= this.ycentre + this.height_side / 2);

  }

  getZoomFactor() {

    return this.isMouseOnBox() ? hover_zoom_factor_box : base_zoom_factor_box;

  }

​

  getFillColor() {

    return this.isMouseOnBox() ? [255, 255, 255] : [100, 100, 100];

  }

}

​

class Circle {

  constructor(xcentre, ycentre, radius, col) {

    this.xcentre = xcentre;

    this.ycentre = ycentre;

    this.radius = radius;

    this.col = col;

  }

​

  drawcircle() {

    noStroke();

    let zoom = this.getZoomFactor();

    fill(this.getFillColor());

    circle(this.xcentre, this.ycentre, this.radius * zoom);

  }

​

  isMouseOnCircle() {

    let d = dist(mouseX, mouseY, this.xcentre, this.ycentre);

    return d <= this.radius;

  }

​

  getZoomFactor() {

    return this.isMouseOnCircle() ? hover_zoom_factor_circle : base_zoom_factor_circle;

  }

​

  getFillColor() {

    if (this.isMouseOnCircle()) {

      return [255, 0, 0, 120]; // Brighter red when hovered

    } else {

      return [random(100), random(100), random(100), 120]; // Random color otherwise

    }

  }

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

}

​

function draw() {

  background(220);

​

  // Update zoom factors dynamically

  base_zoom_factor_box = 1.5 + 0.5 * sin(frameCount * 0.05);

  base_zoom_factor_circle = 1.5 + 0.5 * cos(frameCount * 0.05);

​

  let ArrAllBox = [];

  let ArrRowBox = [];

  let ArrAllCircle = [];

  let ArrRowCircle = [];

​

  // Create the boxes grid

  for (let i = xstart; i <= width - xstart; i += xgap) {

    for (let j = ystart; j <= height - ystart; j += ygap) {

      let new_box = new Box(i, j, boxside, boxside);

      let new_circle = new Circle(i, j, radius);

​

      new_box.drawbox();

      new_circle.drawcircle();

​

      ArrRowBox.push(new_box);

      ArrRowCircle.push(new_circle);

    }

    ArrAllBox.push(ArrRowBox);

    ArrRowBox = [];

    ArrAllCircle.push(ArrRowCircle);

    ArrRowCircle = [];

  }

}

​