createCanvas(680, 1000);

  frameRate(2);

}

​

function draw() {

  background(223, 219, 217); 

//variables defining outside bounds of the movement and placement

  var horizontalmargin = 0.15;

  var verticalmargin = 0.22;

  var numberofColumns = 12;

  var numberofRows = 22;

  var maxRotation = 50;

  var maxShift = 15;

//composition and visual effects 

  noFill();

  rectMode(CENTER);

  stroke(0);

  var composition = (width * (1.0 - 2.0 * verticalmargin)) / (numberofColumns - 1);

​

  for (var rowCounter = 0; rowCounter < numberofRows; rowCounter++) {

    for (var columnCounter = 0; columnCounter < numberofColumns; columnCounter++) {

//shape of overall composition 

      var compx = verticalmargin * width + columnCounter * composition;

      var compy = horizontalmargin * height + rowCounter * composition;

​

      //movement of squares, and positioning

      push();

      translate(compx, compy);

​

      var y = rowCounter / (numberofRows - 1);

      var rowa = y * radians(random(-maxRotation, maxRotation));

      var rowx = y * random(-maxShift, maxShift);

      var rowy = y * random(-maxShift, maxShift);

​

    translate(rowx, rowy);

     rotate(rowa);

     rect(0, 0, composition, composition);

      pop();

    }

  }

}