let pg2;

let pg3;

​

function setup() {

  createCanvas(800, 800);

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

  pg.background(110);

  pg.noStroke();

  pg.rectMode(CENTER);

  pg2 = createGraphics(width/1.5,height/1.5);

  pg2.background(70);

  pg2.noStroke();

  pg2.rectMode(CENTER);

  pg3 = createGraphics(width/1.25,height/1.25);

  pg3.background(30);

  pg3.noStroke();

  pg3.rectMode(CENTER);

}

​

function draw() {

  background(220);

  push();

  pg.fill("#161A30");

  test(pg, 165, 4, PI/4);

  pop();

  push();

  pg2.fill("#31304D");

  test(pg2, 150, 4, (PI/4)+radians(10));

  pop();

  push();

  pg3.fill("#B6BBC4");

  test(pg3, 150, 4, (PI/4)+radians(20));

  pop();

  image(pg3,width/10,height/10);

  image(pg2,width/6,height/6);

  image(pg,width/4,height/4);

  noLoop();

}

​

keyPressed = () => {

  if (key === 's') {

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

    //saveGif('canvas', 4);

  }

};

​

​

​

/**  rectをnこ円周上に配置するだけ

 * @method test

 * @param  {p5.Graphics}   pg            別レイヤー

 * @param  {Number}        s             四角のサイズ

 * @param  {Number}        n             四角の個数

 * @param  {Number}        rotateAngle   全体を傾ける角度

*/

const test = (pg, s, n, rotateAngle) =>{

  const angle = 360/n;

  const r = pg.width/2;

  pg.push();

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

  pg.rotate(rotateAngle);

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

    const x = r*cos(radians(i*angle));

    const y = r*sin(radians(i*angle));

    pg.rect(x,y,s,s);

  }

  pg.pop();

}