p5js:三角形と四辺形の描画

p5jsで三角形と四辺形を描画する方法の説明です。

三角形

三角形の描画はtriangle()を使います。三角形は３点の座標を指定して描画します。塗り潰しの色はfill,線色はstrokeで指定します。

構文

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

x1：最初の点のx座標
y1：最初の点のy座標
x2：2点目のx座標
y2：2点目のy座標
x3：3点目のx座標
y3：3点目のy座標

サンプル

function setup() {
  createCanvas(100, 100);  
  background(220);
  noLoop();
}

function draw() {  
  triangle(50, 10, 90, 90, 10, 90);
}

四辺形は４つ頂点をもつ多角形ですが、長方形と違って角度が９０度に固定されていません。４点の座標を指定して描画します。

構文

quad(x1, y1, x2, y2, x3, y3, x4, y4)

x1：最初の点のx座標
y1：最初の点のy座標
x2：2点目のx座標
y2：2点目のy座標
x3：3番目の点のX座標
y3：3番目の点のy座標
x4：4番目の点のx座標
y4：4番目の点のy座標

サンプル

function setup() {
  createCanvas(100, 100);  
  background(220);
  noLoop();
}

function draw() {  
  quad(50, 10, 90, 90, 10, 90,20,30);
}

今回は三角形と四辺形の描画方法を説明しました。塗りつぶしや線の描画についての詳しい説明はこちらでしてますので御覧ください。