let cols = 4;

let rows = 4;

​

function setup() {

  createCanvas(400, 400);

​

  let colSpacing = width / (cols + 1);  // horizontal spacing between the eyes

  let rowSpacing = height / (rows + 1); // vertical spacing between the eyes

​

  // Calculate the evil eyes positions on the canvas

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

    for (let j = 1; j <= rows; j++) {

      let x = i * colSpacing;

      let y = j * rowSpacing;

      evilEyes.push(new EvilEye(x, y)); // add each eyes to the array

    }

  }

}

​

function draw() {

  background(0);

​

  // Draw a frame around the canvas

  noFill();

  stroke(20, 10, 135);

  strokeWeight(5);

  rect(0, 0, width, height);

​

  // Draw each evil eyes on the canvas

  for (let eye of evilEyes) {

    eye.display();

  }

}

​

// Class for creating and displaying the evil eye

class EvilEye {

  constructor(x, y) {

    this.x = x;

    this.y = y;

  }

​

  // Draw the eye on the canvas

  display() {

    // Calculate the angle between the eye and the mouse (for eye movement)

    let angle = atan2(mouseY - this.y, mouseX - this.x);

​

    // Layer 1 - Outer dark blue circle

    noStroke();

    fill(20, 10, 135);

    ellipse(this.x, this.y, width / 6, height / 6);

​

    // Calculate positions for Layers 2, 3, and 4 based on the angle with smaller offsets

    let xOffset = cos(angle) * 4; 

    let yOffset = sin(angle) * 4; 

​

    // Layer 2 - White circle

    noStroke();

    fill(255);

    ellipse(this.x + xOffset, this.y + yOffset, width / 6 - 40, height / 6 - 40);

​

    // Layer 3 - Light blue circle

    noStroke();

    fill(134, 190, 236);

    ellipse(this.x + xOffset * 0.5, this.y + yOffset * 0.5, width / 6 - 50, height / 6 - 50);

​

    // Layer 4 - Pupil (Black circle)

    noStroke();

    fill(0);

    ellipse(this.x + xOffset * 1.5, this.y + yOffset * 1.5, 10, 10);

  }

}

​