円を作る高度なやり方

円を描画するときに基本的なコマンドとしてcircle()がある。
しかしあくまで描画を目的としているコマンドなので応用が利きづらい側面がある。
例えば角の数を定めたカクカクの円を描きたいとか、描画ではなく位置の取得が目的な場合には使えない。
そこで三角関数を使って数式を利用して円を利用できるようにしたい。

function setup() {
  createCanvas(400, 400);
  background(220);
  
  //角の数と直径を決める
  const num = 12;
  const rad = 100;
  
  //キャンバスの中心を移動
  translate(width / 2, height / 2);
  
  //
  beginShape();[f:id:salmander:20220401211114p:plain]
  
  for(let i = 0; i < num; i ++){
    //角度と位置を求める
    let angle = TAU / num * i;
    let x = rad * cos(angle);
    let y = rad * sin(angle);
    
    vertex(x,y);
  }
  endShape(CLOSE);
}

この書き方を覚えておくと次のように円周上に図形を配置することも出来る。

function setup() {
  createCanvas(400, 400);
  background(220);
  
  //角の数と直径、円の大きさを決める
  const num = 8;
  const posRad = 100;
  const circleRad = 50;
  
  //キャンバスの中心を移動
  translate(width / 2, height / 2);
  
  //
  for(let i = 0; i < num; i ++){
    //角度と位置を求める
    let angle = TAU / num * i;
    let x = posRad * cos(angle);
    let y = posRad * sin(angle);
    
    circle(x,y,circleRad);
  }
}