はんざき技研

プログラミングや3DCGの記録

p5.jsで正三角形を描く方法二つ

考え方自体はどの言語でも使えるものなのでp5.jsと題しているのはあまり意味ないです。
正三角形を描画するときには
・1辺を基準にする場合
・中心点を基準にする場合
の二つがあります。
三角関数を理解しているのは前提としてそれぞれの考え方を書いておきます。

1.一辺を基準に描く方法

f:id:salmander:20220209173938p:plain
これは描きたい辺の位置や長さ決まっているときに使う方法。
Y座標0位置に画面幅分の底辺を設置するところから考えた場合になります。
三角比から正三角形の高さは
「1辺の長さ/2×√3」
であることが分かる。
p5.jsでは三点の位置が分かるならtriangle関数を使って一行で三角形を描画できます。
キャンバスのサイズは400×400としています。

let edge=400; //1辺の長さ
triangle(0,0,  //左端の点
             edge,0,  //右端の点
             edge/2,edge/2*sqrt(3));  //中央下の点

2.中心点を基準に描く方法

f:id:salmander:20220209173951p:plain
これは正三角形を置きたい位置が決まっているときに使える書き方です。
正三角形を角の数が少ない円と捉えると言ってもいい。

  beginShape();
  for(let angle=TAU/4;angle<=TAU;angle+=TAU/3){
    const rad=200;
    let posx=rad*cos(angle);
    let posy=rad*sin(angle);
    vertex(600+posx,200+posy);
  }
  endShape(CLOSE);

辺基準のときと比較しやすくするために向きを同じにしています。
分かりやすい違いは半径を200としているが、先の一辺の長さを400としたときよりも小さくなっていること。
辺の長さを揃えようとすると半径は230程度必要で1.154...倍になる。単純に半径の二倍が1辺の長さと思わないように注意しないといけないです。
もう一つの特徴は画面の中心から長さを取っているので三点の位置は当然基準から同じ長さになることです。

f:id:salmander:20220209182354p:plain
並べると違いが分かりやすいですね。どちらがよいという話ではなくてそれぞれの特性を理解して必要に応じて使い分ける必要がありそうです。