01-05 図形描画

前回の項では circle() を使って円を描く方法を学びました。ここでは、より多くの図形を描く方法を紹介します

楕円の描画（ellipse）

ellipse() を使うと、楕円を描くことができます。

ellipse(x, y, w, h);

• x, y → 楕円の中心の座標
• w → 楕円の幅
• h → 楕円の高さ

幅と高さを同じにすれば正円を描くこともできる。（circle()の代用）

ellipse(50, 100, 150, 200); // 座標(50, 100)に幅150、高さ200の楕円を描く

四角形の描画（rect）

rect() を使うと、長方形を描くことができます。

rect(x, y, w, h);

• x, y → 四角形の左上の座標
• w → 幅
• h → 高さ

rect(50, 100, 150, 200); // 座標(50, 100)から右下に幅150、高さ200の長方形を描く

三角形の描画（triangle）

triangle() を使うと、三角形を描くことができます。

triangle(x1, y1, x2, y2, x3, y3);

• x1, y1 → 1つ目の点の座標
• x2, y2 → 2つ目の点の座標
• x3, y3 → 3つ目の点の座標

triangle(100, 300, 200, 100, 300, 300); // 指定した３点を結ぶ三角形を描く

練習問題1-5-1

次の作品（仙厓 義梵：◯△□）のような図形を描きなさい。

○△□ (絵画)

function setup() {
  createCanvas(400, 400);
  background(243, 228, 199);
  noFill();
  stroke(69, 62, 56, 50);
  strokeWeight(20);
  ellipse(300, 206, 138, 138);
  triangle(120, 240, 195, 135, 260, 240);
  rect(33, 144, 82, 117);
}

線の描画（line）

line() を使うと、2点を結ぶ直線を描くことができます。

line(x1, y1, x2, y2);

• x1, y1 → 始点の座標
• x2, y2 → 終点の座標

line(50, 200, 350, 200); // 指定した2点を結ぶ直線を描く

テキストの描画（text）

text() を使うと、画面に文字を表示できます。

text(s, x, y);

• s → 描画する文字
• x, y → 文字の位置

注意：下記の例のように、文字は数字と違いダブルクォーテーション（”）で括る必要があります。

text("Hello", 100, 50); // 座標(100, 50)にHelloと描く

これで、p5.js を使った基本的な図形描画の方法を学びました！次のステップに進みましょう。