はんざき技研

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

【p5.js問題集】楕円上に配置する【10問目】

 
画像のように楕円上に円を配置してください。


解答例

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

  //x方向,y方向の楕円の半径を宣言
  const radX = 150;
  const radY = 100;

  //分割数を宣言
  const div = 36;
  
  translate(width / 2, height / 2);

  for (let i = 0; i < div; i++) {
    //xの半径計算をradXに、yの半径計算をradYにする
    let angle = (TAU / div) * i;
    let x = radX * cos(angle);
    let y = radY * sin(angle);
    
    noStroke();
    fill(100,150,200);
    circle(x, y, 15);
  }
}

補足
基本的なやり方は
【p5.js問題集】正多角形を描く【3問目】 - はんざき技研
でやったような三角関数を用いて多角形を描くのと共通している。
応用の範囲が広いので型として覚えておくと吉。