createCanvas(400, 400);

  noFill();

}

​

function draw() {

  background(220);

  translate(width/2,height/2);

  tris(0,0,100);

  tris(0,150,100);

  push();

  translate(130,125);

  rotate(radians(180));

  tris(0,0,100);

  pop();

  circle(0,0,200);

  noLoop();

}

​

const tris = (x,y,r,colors,isFill) =>{

  const num = 3;

  const rr = r/2;

  const angle = 360/num;

  push();

  translate(x,y);

  rotate(radians(30));

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

    const xx = rr * cos(radians(angle * i));

    const yy = rr * sin(radians(angle * i));

    if(isFill) fill(colors[i]);

    hexagon(xx,yy,r);

  }

  pop();

}

​

const hexagon = (x,y,r) =>{

  const num = 6;

  const rr = r/2;

  const angle = 360/num;

  push();

  translate(x,y);

  beginShape();

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

    const xx = rr * cos(radians(angle * i));

    const yy = rr * sin(radians(angle * i));

    vertex(xx,yy);

  }

  endShape(CLOSE);

  pop();

}