p5.jsで正多角形を描く方法

p5.jsで正多角形を描画する関数を作成していきます。

自分でShapeを作るにはbeginShape()とvertex()とendShape()を使えば自作図形を描くことができます。

正多角形
正多角形（外周）
描画例
参考文献

正多角形

正多角形は一つの円周上に等しい角度間隔で点を置き、それを線で結べば描けます。関数Poligon()として正多角形を描く関数を作ってみました。

function Polygon(x, y, size, pointNum){
   const Radius = size;
   const angleStep = 2*PI/pointNum ;
   let angle = 0;
   beginShape();
   for(let i=0;i<=pointNum;i=i+1){
      let px = x + Radius*cos(angle);
      let py = y + Radius*sin(angle);
      vertex(px, py);
      angle = angle + angleStep;
   }
   endShape(CLOSE);
}

この関数で六角形を描いてみると下になります。 Polygon(0, 0, 300, 6);

f:id:gin_graphic:20201218073820p:plain:w250

入力引数は

x：図形中心のx座標
y：図形中心のx座標
size：図形の大きさ（これを半径とした円を使って描画）
pointNum：点の数（何角形にするか　3以上）

としています。pointNumを変えれば、目的の正多角形が描画されます。

正多角形（外周）

次に正多角形で、外周のみの描画をする関数を作りました。真ん中が空いた様な図形になります。こちらはstroke()を使うと図形内部の線画描かれるので、noStroke()して使う方が良いですね。

function outlinePolygon(x, y, size, weight, pointNum){
   const outsideRadius = size;
   const insideRadius = size - weight ;
   const angleStep = 2*PI/pointNum ;
   let angle = 0;
   beginShape(TRIANGLE_STRIP);
   for(let i=0;i<=pointNum;i=i+1){
      let px = x + outsideRadius*cos(angle);
      let py = y + outsideRadius*sin(angle);
      vertex(px, py);
      px = x + insideRadius*cos(angle);
      py = y + insideRadius*sin(angle);
      vertex(px, py);
      angle = angle + angleStep;
   }
   endShape(CLOSE);
}

f:id:gin_graphic:20201218073826p:plain:w250