size(800,800);  //Set the sketch size
background(0);  //Black Background

rectMode(CENTER);  //Changes the rectangle drawing mode so that we have to pick a middle position and a size e.g. (xCentre, yCentre, wdith, height)
noFill();  //Draw stuff with no fill


float squareSize = 0;  //setup a variable we will use later for drawing sqaures

//In a loop, draw sqaures at regular intervals on the screen.
//For this example, the window is 800x800 and I'm drawing sqaures at even spaces in both directions
//In this 4x4 grid the middle of the squares appear at 100,300,500,700 pixels in each direction
//Because sqaureSize is just less than 200pixels there is a little gap between the squares
//To be more flexible, these increments and offsets would be a worked out from the size of the sketch but that's not important right now

//This loops makes the basesquareSize smaller for each - then, for every change in square size, we draw all the squares
for(int baseSquareSize=180; baseSquareSize>0; baseSquareSize-=30)
{
  //This loop increments [increases] the x position value of the square centre. The escape condition is x<900 which happens on the fifth run around the loop
  for(int x=100; x<900; x+=200)
  {
    //This loop increments [increases] the y position value of the square centre
    for(int y=100; y<900; y+=200)
    {
      //At this point, because the y loop is 'inside; the x loop
      //we are drawing a sqaure in each position in vertical colums
      //The vertical loop - the one we are in here - runs inside the horizontal x loop
      //which means sqaures are calculated down and then across
      //This is just a point of interest really


      stroke(random(255), random(255), random(255));  //sets the stroke value as random between 0-255 for r,g,b channels
      strokeWeight(random(2,7));  //sets the width of the line as a random number between 2 and 7, stops it getting too large or too thin

      squareSize = baseSquareSize * random(0.75,1.25); //multiplies base square size by a random number between 0.5 and 1.5 meaning that the sqaure will be scaled by a random number for each drawn loop, making it slightly different in size for each iteration
                                                       //changing the multiplier here to 1 (i.e. squareSize = baseSqaureSize) means all the sqaures will be of even size and decrement regularly

      pushMatrix();  //start keeping track of the transformations we are doing
        translate(x,y);  //moves the drawing origin by x across and y down so that it is in the middle of the sqaure we want to draw
        rotate(random(-PI/2,PI/2));  //apply a random rotation to the origin between +/- 45 degrees
        rect(0,0,squareSize,squareSize); //Draw a square of size squareSize at the position the origin (0,0). As we moved the origin to x,y earlier, the middle of the square is at reference point 0,0
      popMatrix(); //reset translations before we start again
    }//for Y loop
  }//for x loop
}//for squareSize loop