const colors = [

  ["#C14600", "#FF9D23"],

  ["#A9B5DF", "#7886C7"],

  ["#DDEB9D", "#A0C878"],

  ["#F7CFD8", "#A6F1E0"],

];

​

function setup() {

  createCanvas(800, 800);

  pg = createGraphics(width, height);

  pg.noStroke();

  pg.fill("#776B5D");

}

​

function draw() {

  pg.background("#fff");

  let num = Math.floor(random(3,10));

  let block = Math.floor(random(10,70));

  grid(num, pg, block, colors);

  image(pg, 0, 0);

  noLoop();

}

​

keyPressed = () => {

  if (key === 's') {

    saveCanvas(canvas, 'canvas', 'png');

    //saveGif('canvas', 4);

  }

};

​

function drawVertical(pg, x, y, block, color0) {

  let margin = block / 10;

  let parts = (block - margin * 4) / 3;

​

  pg.push();

  pg.translate(x, y);

  pg.fill(color0);

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

    pg.rect(parts * i + margin * (i + 1), 0, parts, block);

  }

  pg.pop();

}

​

function drawHorizontal(pg, x, y, block, color0) {

  let margin = block / 10;

  let parts = (block - margin * 4) / 3;

​

  pg.push();

  pg.translate(x, y);

  pg.fill(color0);

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

    pg.rect(0, parts * i + margin * (i + 1), block, parts);

  }

  pg.pop();

}

​

function mikuzusi(pg, block, nw, colors) {

  for (let j = 0; j < nw; j += block) {

    for (let i = 0; i < nw; i += block) {

      if (i % (block * 2) == j % (block * 2)) {

        drawVertical(pg, i, j, block, colors[0]);

      } else {

        drawHorizontal(pg, i, j, block, colors[1]);

      }

    }

  }

}

​

const grid = (num, pg, block, colors) => {

  const n1 = num + 1;

​

  const margin_left = width / n1 / n1;

  const margin_bottom = height / n1 / n1;

​

  const nw = width / n1;

  const nh = height / n1;

​

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

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

      const x = nw * i + margin_left * (i + 1);

      const y = nh * j + margin_bottom * (j + 1);

      pg.push();

      pg.translate(x, y);

      mikuzusi(pg, block, nw, random(colors));

      pg.pop();

    }

  }

};

​