let colors = ["#ffbdb6", "#ffe0de", "#77b09b", "#c2e1d4"];

let sb;

​

function setup() {

  createCanvas(500, 500, WEBGL);

  background("#F3EEEA");

​

  pg = pg_init();

  noFill();

  strokeWeight(2);

  sb = new Scribble();

  sb.roughness = 4;

​

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

​

  pg.push();

  grid(5, pg, false, true);

  pg.pop();

​

  push();

  translate(10, 10);

  sbgrid(5, sb);

  pop();

​

  image(pg, 0, 0);

}

​

keyPressed = () => {

  if (key === 's') {

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

    //saveGif('canvas', 4);

  }

};

​

function pg_init() {

  const pg = createGraphics(width, height);

  pg.noStroke();

  pg.fill("#776B5D");

  pg.rectMode(CENTER);

  return pg;

}

​

const grid = (num, pg, f, s) => {

  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++) {

      if (f) {

        pg.fill(random(colors));

        pg.noStroke();

      }

      if (s) {

        pg.stroke(random(colors));

        pg.strokeWeight(2);

        pg.noFill();

      }

      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.circle(x + nw / 2, y + nw / 2, nw );

      } else {

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

      }

    }

  }

};

​

const sbgrid = (num, sb) => {

  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++) {

      stroke(random(colors));

      noFill();

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

        sb.scribbleEllipse(x + nw / 2, y + nw / 2, nw, nw);

      } else {

        sb.scribbleRect(x + nw / 2, y + nw / 2, nw, nw);

      }

    }

  }

  // https://jp.deconbatch.com/2022/10/twistedcanvas.html

  //const margin = 60.0;

  //const xc = [margin, width - margin,

  //            width - margin, margin]

  //const yc = [margin, margin,

  //            height - margin, height - margin]

  //sb.scribbleFilling(xc, yc, 10, -30);

};

​