let count = 4

​

function setup() {

  canvas=createCanvas(400, 400);

  textAlign(CENTER, CENTER)

  textSize(30)

}

​

function draw() {

  background(173, 216, 230);

  let size = width / count;

  for (let index = 0; index < count; index++){

    for (let index2 = 0; index2 < count; index2++){

      let offset = size/5

      let x = index * size;

      let y = index2 * size;

       fill("maroon")

      rect (x + offset, y + offset, 60);

  let count = 3  

  noFill()

      strokeWeight(25)

    let lineX1 = map(index, 0, count-1, 10, 390);

    let lineY1 = map(index, 0, count-1, 10, 10);

    circle(lineX1, lineY1, 51)

    let lineX2 = map(index, 0, count-1, 10, 390);

    let lineY2 = map(index, 0, count-1, 200, 200);

    circle(lineX2, lineY2, 69)

       let lineX3 = map(index, 0, count-1, 10, 390);

    let lineY3 = map(index, 0, count-1, 390, 390);

    circle(lineX3, lineY3, 51)

      // text (x + ' ' + y, x + offset, y + offset)

    }

}

​

}

 function mouseClicked() {

  console.log ("I've been clicked!")

​

​

  saveCanvas(canvas, "Grid.jpeg")

 }