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度(右下)
🌼 花びらをたくさん並べると「花」の形になります。