let gridSize = 6;

let frameSize;

​

function setup() {

  createCanvas(800, 800);

  colors = [

    color(230, 230, 250),  // lavender

    color(255, 182, 193),  // pastel pink

    color(0),              // black

    color(255)             // white

  ];

  frameSize = width / gridSize;

  noLoop();

}

​

function draw() {

  background(255);

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

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

      drawComposition(i * frameSize, j * frameSize, frameSize);

    }

  }

}

​

function drawComposition(x, y, size) {

  push();

  translate(x + size/2, y + size/2);

  // draw background square

  noFill();

  stroke(0);

  strokeWeight(1);

  rectMode(CENTER);

  square(0, 0, size);

  // draw overlapping squares

  let numSquares = floor(random(5, 8));

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

    push();

    rotate(random(TWO_PI));

    noFill();

    stroke(colors[i % colors.length]);

    strokeWeight(1);

    let squareSize = map(i, 0, numSquares, size * 0.8, size * 0.2);

    square(0, 0, squareSize);

    // draw interior lines

    if (random() < 0.5) {

      let numLines = floor(random(1, 4));

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

        let lineSize = random(squareSize * 0.2, squareSize * 0.8);

        line(-lineSize/2, 0, lineSize/2, 0);

        rotate(random(TWO_PI));

      }

    }

    pop();

  }

  pop();

}

​

function mousePressed() {

  redraw();

}