🌸 p5.jsで楕円を回転させる方法(花びらの描き方)

p5.jsの ellipse() では、角度を直接変えることはできません
でも、rotate() を使えば、描く位置を回して傾けた楕円を作ることができます!


🧪 サンプルコード:楕円を45度回す

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES); // 角度を「度」で指定できるようにする
  noLoop();
}

function draw() {
  background(255); // 白い背景にする

  translate(width / 2, height / 2); // 中心に移動
  rotate(45); // 45度回転

  ellipse(0, 0, 100, 50); // 楕円を描く
}

💡 push()pop() の使い方(他に影響しないように)

push();  // 回転などの設定を保存
  translate(x, y);  // 移動
  rotate(angle);    // 回転
  ellipse(0, 0, w, h);  // 楕円を描く
pop();   // 設定を元に戻す

🧭 rotate() の0度はどこ?

角度向き
0度右(→)
90度下(↓)
180度左(←)
270度上(↑)

🌀 デフォルトでは、正の角度は時計回りになります。

             ↑
         270度(-90)
             |
← 180度       +       0度(右)
             |
         90度(下)

🧪 線で角度を確認するコード

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES);
  background(255);

  translate(width / 2, height / 2);

  // 0度の線(右向き)
  stroke(0); 
  line(0, 0, 100, 0);

  // 45度の線(右下)
  rotate(45);
  stroke('red');
  line(0, 0, 100, 0);
}

🖼️ 出力例:

  • 黒の線 → 0度(右向き)
  • 赤の線 → 45度(右下)

🌼 花びらをたくさん並べると「花」の形になります。

コメントする