​

function setup() {

   createCanvas(500,500);

   pg =  createGraphics(width, height);

   pg.noStroke();

}

​

function draw() {

   //background("#F0ECE5");

   const n1 = 3;

   const m_l = width / n1 / n1;

   const m_b = height / n1 / n1;

   pg.fill("#161A30") 

   grid(5,pg);

   pg.push();

   pg.fill("#B6BBC4");

   pg.translate(-m_l,-m_b+13);

   grid(5,pg);

   pg.pop();

   pg.push();

   pg.fill("#B6BBC4");

   pg.translate(pg.width - m_l,-m_b+13);

   grid(5,pg);

   pg.pop();

   pg.push();

   pg.fill("#B6BBC4");

   pg.translate(-m_l,m_b);

   grid(5,pg);

   pg.pop();

   pg.push();

   pg.fill("#B6BBC4");

   pg.translate(pg.width - m_l,m_b);

   grid(5,pg);

   pg.pop();

   image(pg,0,0);

   noLoop();

}

​

keyPressed = () => {

  if (key === 's') {

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

    //saveGif('canvas', 4);

  }

};

​

// 三角形を描く

function test(pg,x,y,s){

   // triangle

   pg.push();

   pg.beginShape();

   const a = 360/3;

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

      const xx = s*cos(radians(i*a)+PI/4);

      const yy = s*sin(radians(i*a)+PI/4);

      pg.vertex(xx+x,yy+y);

   }

   pg.endShape(CLOSE);

   pg.pop();

}

​

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

         test(pg,x+nw/2,y+nw/2,nw/3);

      }

   }

};