const colors2 = ['#EABE6C','#891652'];

const colors3 = ['#7469B6','#E1AFD1'];

const colors4 = ['#FC6736','#0C2D57'];

const colors5 = ['#222831','#00ADB5'];

const colors6 = ['#CE5A67','#1F1717'];

​

const colorBox = [colors1,colors2,colors3,colors4,colors5,colors6];

const pgs = [];

const colorsRand = [];

let num;

let w;

​

function setup() {

  createCanvas(800, 800); 

  noStroke();

  num = Math.floor(random(5,20));

  w = width/num;

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

    pgs.push([]);

    colorsRand.push([]);

​

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

      pgs[i].push(createGraphics(w, w));

      pgs[i][j].noStroke();

      colorsRand[i].push([Math.floor(random(colorBox.length))]);

    }

  }

}

​

function draw() {

  background(220);

​

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

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

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

         push();

         translate(w*(i+1), w*(j+1));

         rotate(PI/2);

         const c = colorBox[colorsRand[i][j]][0];

         pgs[i][j].fill(c);

         arrowGroup(pgs[i][j]);

         image(pgs[i][j], -w, 0);

         pop();

       }else{

         push();

         const c = colorBox[colorsRand[i][j]][1];

         pgs[i][j].fill(c);

         arrowGroup(pgs[i][j]);

         image(pgs[i][j], w*i, w*j);

         pop();

       }

    }

  }

  noLoop();

}

​

keyPressed = () => {

  if (key === 's') {

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

    //saveGif('canvas', 2);

  }

};

​

// 矢印でキャンバスを埋める関数

const arrowGroup = (pg) => {

  pg.push();

  pg.translate(0,-pg.height/2);

  arrow(pg);

  pg.pop();

  pg.push();

  arrow(pg);

  pg.pop();

}

​

// 矢印を作成する関数

const arrow = (pg) =>{

  pg.push();

  pg.translate(pg.width/2,pg.height/2);

  pg.rotate(PI/4);

  pg.rect(0,0,pg.width,pg.height);

  pg.pop();

  pg.push();

  pg.fill(220);

  pg.translate(pg.width/2,pg.height/2 + pg.height/4);

  pg.rotate(PI/4);

  pg.rect(0,0,pg.width/2,pg.height/2);  

  pg.pop();

  pg.push();

  pg.rect(0,pg.height, pg.width, pg.height/2);

  pg.pop();

}