beginShapeの図形を複製するときは関数にまとめるのが良い

p5.jsの便利な図形描画の方法にbeginShapeがある。
多角形や計算では算出できない複雑な図形を書く時には覚えておきたい関数だ。
ただvertexで各点を指定する必要があるのでコードが長くなりやすい。複製をするならなおのことだ。

  beginShape();
  vertex(10,200);
  vertex(20,200);
  vertex(30,100);
  vertex(40,0); 
  endShape(CLOSE);
  
  beginShape();
  vertex(posx+10,posy+200);
  vertex(posx+20,posy+200);
  vertex(posx+30,posy+100);
  vertex(posx+40,posy+0); 
  endShape(CLOSE);

次のように関数にまとめて閉じてしまえば描画に関するコードを隠せるし複製もしやすくなる。

function setup() {
  createCanvas(400, 400);
  background(220);
  noLoop();
}

function draw() {
  rokkaku(100,200);
  rokkaku(10,100);
  rokkaku(200,150);
  rokkaku(300,240);
}

function rokkaku(initx,inity){
  const rad=50;
  const num=6;

  beginShape();
  for(let theta=0;theta<=TAU;theta+=TAU/num){
    let posx=initx+rad*cos(theta);
    let posy=inity+rad*sin(theta);
    vertex(posx,posy);
  }
  endShape(CLOSE);
}

特に二重ループなどで図形を行列化する場合はできておかないと非常に難解になってしまうので是非覚えておきたい。
上の例はfor文を利用して正多角形を描画しているのでコードは短く済んでいるが、draw内でbeginShapeを記述することはなるべく避けた方がよさそうだ。