let rows;

let cols;

​

function setup() {

  createCanvas(800,800);

  background(0);

  cols = width/gridSize;

  rows = height/gridSize;

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

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

      push();

      translate(i*gridSize,j*gridSize);

      rectMode(CENTER);

      noFill();

      // stroke(255);

      stroke(random(255),random(255),random(255));

      rect(0,0,gridSize,gridSize);

      stroke(random(255),random(255),random(255));

      ellipse(0,0,gridSize/2,gridSize/2)

      pop();

    }

  }

}

​

​

​

​

​

// /*

//  * iteration and loops

//  * Saskia Freeke @sasj_nl inspired pattern

//  * Dynamic version

//  * Kuan-Ju Wu June 8 2021

//  */

​

// let gridSize = 20;

// let cols;

// let rows;

// let hue;

// let hueDir = 1;

​

// function setup() {

//   createCanvas(800, 800);

//   colorMode(HSB, 100);

//   frameRate(10);

//   cols = int(width / gridSize);

//   rows = int(height / gridSize);

//   hue = 20;

// }

​

// function draw() {

//   if (hue >= 60 || hue <= 0) {

//     hueDir *= -1;

//   }

​

//   hue = hue + hueDir;

​

//   for (let j = 0; j < rows; j++) {

//     for (let i = 0; i < cols; i++) {

//       push();

//       translate(i * gridSize, j * gridSize);

//       let backgrounHue = (map(i + j, 0, rows + cols, 0, 20) + hue) % 100;

//       fill(random(backgrounHue - 20, backgrounHue + 20), 100, 50);

//       drawRect();

//       fill(

//         random(backgrounHue - 30, backgrounHue + 10),

//         random(100),

//         random(100)

//       );

//       drawDimond();

//       fill(

//         random(backgrounHue - 10, backgrounHue + 30),

//         random(100),

//         random(100)

//       );

//       drawCircle();

//       pop();

//     }

//   }

// }

​

// function drawRect() {

//   rectMode(CENTER);

//   noStroke();

//   rect(gridSize / 2, gridSize / 2, gridSize, gridSize);

// }

​

// function drawDimond() {

//   noStroke();

//   beginShape();

//   vertex(gridSize / 2, 0);

//   vertex(gridSize, gridSize / 2);

//   vertex(gridSize / 2, gridSize);

//   vertex(0, gridSize / 2);

//   endShape(CLOSE);

// }

​

// function drawCircle() {

//   noStroke();

//   ellipse(gridSize / 2, gridSize / 2, gridSize / 2, gridSize / 2);

// }