let hue = 0;

​

function setup() {

  createCanvas(400, 400);

//   change color mode from RGB to HSB and setting the values for hue, saturation and brightness

  colorMode(HSB, 360, 320, 100);

}

​

// draw function

function draw() {

// set background to white

  background(255);

//   increment hue from 0 to 360

  hue = (hue + 1) % 360;

//   add shapes in columns

  for (let y = 0; y < height; y += 40) {

//      add shapes in rows

    for (let x = 0; x < width; x += 40) {

//       declare distance which is the distance between the mouse position and the xth and yth item that is to be drawn in the for loop

      let d = dist(x, y, mouseX, mouseY);

//       change the fill of the shapes

//       the map function allows to change color of the area on which we are hovering using the distance variable

//       we add hue variable to it so all the shapes keep changing color all the time

      fill((hue + map(d, 0, width, 0, 360)) % 360, 100, 100);

//       draw smaller rectangles where the mouse is hovering so they are visible

      rect(x, y, d, d);

//     draw eclipses on full canvas but their size depends on the distance from the mouse  

      ellipse(x, y, d, d);

    }

  }

}

​