const oddframe = { count: 0 };

const num = 5;

​

function setup() {

  createCanvas(800, 800);

  pg = createGraphics(width,height);

}

​

function draw() {

  background(220);

  grid(num, pg);

  image(pg, 0, 0);

  noLoop();

}

​

keyPressed = () => {

  if (key === 's') {

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

    //saveGif('canvas', 4);

  }

};

​

  /** num個で分割したグリッドを画面いっぱいに生成する

   * @method grid

   * @param  {Number}        num           画面の分割数

   */

  const grid = (num, pg) => {

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

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

          const r = nw;//map(oddframe.count, 0, 1, nw / 2, nw);

          pg.push();

          pg.arc(x+nw/2, y+nw/2, r, r, 0, PI, PIE);

          pg.pop();

        } else {

          const r = nw;//map(evenframe.count, 0, 1, nw / 2, nw);

          pg.push();

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

          pg.rotate(PI/3);

          pg.arc(0, 0, r, r, 0, PI, PIE);

          pg.pop();

        }

      }

    }

  };