Based on the Recursive Squares example from Chapter 8: Drawing with Recursion, Processing: Creative Coding and Generative Art in Processing 2, 2013, by Ira Greenberg, Dianna Xu, Deepak Kumar

*/

​

let minSize = 50;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  initialize();

}

​

function initialize() {

  background(0);

  rectMode(CENTER);

  noFill();

  stroke(255);

  let squareSize = min(width, height) / 2; //determines the initial size of the grid

  // console.log(squareSize);

  drawSquare(width / 2, height / 2, squareSize); //draws squares with the parementers within the function

}

​

function drawSquare(x, y, size) {

  square(x, y, size);

​

  if (size >= minSize) { //as long as the squareSize is larger then the minimum size set in the beginning of the function, the grids of squares will be created

    let newSize = size / 2;

    console.log(newSize);

​

    drawSquare(x - newSize, y - newSize, newSize); //draws squares in the top left corner of each section of the design

    drawSquare(x + newSize, y - newSize, newSize); //draws squares in the top right corner of each section of the design

    drawSquare(x - newSize, y + newSize, newSize); //draws squares in the bottom right corner of each section of the design

    drawSquare(x + newSize, y + newSize, newSize); //draws squares in the bottom left corner of each section of the design

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  initialize();

}

​