let colors = ["#ffe47d1f", "#ffb5171f", "#7087961f", "#ed8e6e1f"];

​

let brushColor = ["#F5CCE0", "#A5BBD4", "#ABDAE3", "#F4DAE9"];

​

function setup() {

  createCanvas(500, 500, WEBGL);

  pg = pg_init(random(colors));

  pg2 = pg_init(random(colors));

  pg3 = pg_init(random(colors));

  pg4 = pg_init(random(colors));

  background("#F3EEEA");

  noStroke();

​

  brush.noStroke();

}

​

function draw() {

  translate(-width / 2, -height / 2);

  pg.push();

  grid(4, pg);

  pg.pop();

​

  pg2.push();

  grid(3, pg2);

  pg2.pop();

​

  pg3.push();

  grid(3, pg3);

  pg3.pop();

​

  pg4.push();

  grid(4, pg4);

  pg4.pop();

​

  image(pg, 0, 0);

  image(pg2, width / 2, 0);

  image(pg3, 0, height / 2);

  image(pg4, width / 2, height / 2);

​

  brushGrid(3);

  noLoop();

}

​

keyPressed = () => {

  if (key === "s") {

    saveCanvas(canvas, "canvas", "png");

    //saveGif('canvas', 4);

  }

};

​

function pg_init(c) {

  const pg = createGraphics(width / 2, height / 2);

  pg.noStroke();

  pg.fill(c);

  pg.rectMode(CENTER);

  return pg;

}

​

function brushGrid(num) {

  const n1 = num + 1;

  const w = width;

  const h = height;

​

  const margin_left = w / n1 / n1;

  const margin_bottom = h / n1 / n1;

  const nw = w / n1;

  const nh = h / n1;

  push();

  brush.push();

  brush.bleed(0.02, 0.3, 1);

  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);

      brush.fill(random(brushColor), random(30, 140));

      const r = nw;

      brush.rect(x, y, nw, nh);

    }

  }

  brush.pop();

  pop();

}

​

const grid = (num, pg) => {

  const n1 = num + 1;

​

  const margin_left = width / 2 / n1 / n1;

  const margin_bottom = height / 2 / n1 / n1;

​

  const nw = width / 2 / n1;

  const nh = height / 2 / 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);

      if ((i % 2 === 0 && j % 2 === 0) || (i % 2 === 1 && j % 2 === 1)) {

        pg.rect(x + nw / 2, y + nw / 2, nw, nw / 2);

      } else {

        pg.circle(x + nw / 2, y + nw / 2, nw / 2);

      }

    }

  }

};

​