const oddframe = { count: 0 };

const num = 5;

const colorBox = ['#D9AB42','#096148','#0D5661','#8F5A3C','#91989F']

let oddColor;

let evenColor;

​

​

function setup() {

  createCanvas(800, 800);

  pg = createGraphics(width,height);

  pg.noStroke();

  oddColor = random(colorBox);

  const newColors = colorBox.filter(element => element !== oddColor);

  evenColor = random(newColors);

​

}

​

function draw() {

  background(220);

  grid(num,pg);

  image(pg, 0, 0);

}

​

keyPressed = () => {

  if (key === 's') {

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

    //saveGif('canvas', 2);

  }

};

​

  /** 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.fill(oddColor);

          pg.arc(x+nw/2, y+nw/2, r, r, 0, PI+PI/2, 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/2);

          pg.fill(evenColor);

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

          pg.pop();

        }

      }

    }

  };