2_3:p5.js 線、四角形、三角形、長方形を描く

p5.jsには、基本的なシェイプ(形状)を描く関数が定義されているので、三角形や四角形などを簡単に描画することができます。また線を描いてつなぎ合わせる方法で、複雑な形状を作ることもできます。

function setup() {
    createCanvas(480, 120);
}

function draw() {
    background(204);
    line(20, 50, 420, 110);	// 直線
}

line()

説明

画面に線(2点間を直接結んだ線)を描く。パラメータを4つ取るline()関数は線を2Dで描画する。線の着色には、stroke()関数を使用する。線を塗ることはできないので、fill()関数は線のカラーに影響しない。2Dの線はデフォルトで、1ピクセル幅で描画されるが、線幅はstrokeWeight()関数で変えることができる。

シンタックス

line(x1, y1, x2, y2)
line(x1, y1, z1, x2, y2, z2)

四角形と三角形

quad(158, 55, 199, 14, 392, 66, 351, 107); // 四角形
triangle(347, 54, 392, 9, 392, 66); // 三角形
triangle(158, 55, 290, 91, 290, 112); // 三角形

quad()

説明

四角形を描画する。四角形は4辺を持つ多角形。長方形(矩形)に似ているが、四角形は4つの角が90度である必要はない。パラメータの最初のペア(x1, y1)は最初の頂点を設定し、以降のペアは、定義されたシェイプの周りを、時計回りか反時計回りに進む。

シンタックス

quad(x1, y1, x2, y2, x3, y3, x4, y4)
quad(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4)

triangle()

説明

三角形は3点を結ぶことで作成される平面。最初の2つの引数(x1, y1)は1つめの点を、次の2つの引数(x2, y2)は2つめの点を、最後の2つの引数(x3, y3)は3つめの点を指定する。

シンタックス

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

長方形(矩形)

rect(180, 60, 220, 40); // 長方形

rect()

説明

画面に長方形を描画する。長方形は辺を4つ持ち4つの角は90度。デフォルトでは、最初の2つのパラメータ(x, y)は長方形の左上隅の位置を設定し、3つめのパラメータ(w)は幅を、4つめのパラメータ(h)は高さを設定する。ただしパラメータがどう解釈されるかはrectMode()関数で変えることができる。

5,6,7,8番めのパラメータ(tl, tr, br, bl)が指定された場合には、それぞれ左上隅、右上隅、右下隅、左下隅の角の半径(角丸)を決める。省略された角丸パラメータは、パラメータリストでそれより前に指定された値に設定される。

シンタックス

rect(x, y, w, h, [tl], [tr], [br], [bl])
rect(x, y, w, h, [detailX], [detailY])

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA