Based on Interrupted Grid from Code as a Creative Medium

https://github.com/CodeAsCreativeMedium/exercises/blob/main/02_iteration/12_interrupted_grid/interrupted_grid_js/interrupted_grid_js.js

*/

​

let size;

let padding;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  noFill();

  stroke(255);

  strokeWeight(2);

  smooth(); //smooths out the design

  noLoop(); //stops the circles and the grid from constantly changing at the draw frame rate

  size = min(width / 10, height / 10); //sets the size of the rectangles to me the minimum amount of the width and height divided by 10

  // rectMode(CENTER);

}

​

function draw() {

  background(0);

​

  padding = size * 0.2; //variable that changes the padding between the circles and squares

​

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

    for (let y = 0; y < height - size; y += size) { //for loops to run for as long as the width and height of the screen

      let chance = random(1); //assigns a variable that picks a random number from 0 to 1

      if (chance < 0.05) { //if hte random number is less than 0.05 a circle is drawn instead of a square

        circle(x + size * 0.6, y + size * 0.6, size - padding);

      } else { //a square is drawn in a grid across the screen with squares as long as the chance variable is more than 0.05

        square(x + padding, y + padding, size - padding); //the x and y position is determined by with width and height minus the predeterminted size of the space that the square can go in and adding the padding needed to create a cleaner look, the size of the square is determined by the size of the square minus the padding

      }

    }

  }

}

​

function windowResized() { //when the window is resized, the size variable is adjusted to the new height and width

  resizeCanvas(windowWidth, windowHeight);

  size = min(width / 10, height / 10);

}

​