genuary5

let col = [[0, 100, 80, 80], [25, 100, 90, 80], [220, 100, 60, 80]];

let pg;

let seed;

let num

let gridNum = 3;

let offset = 100;

let gridW, mergin;

​

function setup() { 

  createCanvas(800, 800);

  pg = createGraphics(800, 800);

  pg.rectMode(CENTER);

  pg.angleMode(DEGREES);

  pg.colorMode(HSB, 360, 100, 100, 100)

  frameRate(0.5);  

}

​

function draw() {

  seed = random(100000);

  background(255);

   pg.background(255);

  num = int(random(2, 5));

  gridNum = int(random(1, 6)); 

  gridW = (pg.width - offset * 2) / gridNum;

  mergin = gridW / 30;

  randomSeed(seed);

  pg.fill(random(col));

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

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

      gapSquare(offset + mergin + i * gridW + gridW / 2, offset + mergin + j * gridW + gridW / 2, gridW - mergin * 2, num);

    }

  }

  image(pg, 0, 0)

}

​

function gapSquare(x, y, w, n) {

  pg.push();

  let xgap = random(-w / 20, w / 20);

  let ygap = random(-w / 20, w / 20);

  pg.translate(x + xgap, y + ygap)

  pg.rotate(random(-10, 10));

  pg.noStroke(); 

  pg.square(0, 0, w);

  pg.erase();

  pg.square(0, 0, w * ((n - 1) / num));

  pg.noErase();

  pg.pop();

  n--;

  if(n > 0) {

    gapSquare(x, y, w * (n / num), n);

  }  

}