このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の rect関数を説明します。
rect()
説明文
画面に長方形を描画します。長方形はすべての角度が90度の4辺の形状です。デフォルトでは最初の2つのパラメータは左上隅の位置を設定し3番目のパラメータは幅を設定し4番目のパラメータは高さを設定します。ただし、これらのパラメータの解釈方法は rectMode() で変更できます。
5番目、6番目、7番目、8番目のパラメータが指定されている場合、それぞれ左上隅、右上隅、右下隅、左下隅の隅の半径を決定します。半径を省略した場合、以前に指定した半径値の値に設定されます。
構文
rect(x, y, w, [h], [tl], [tr], [br], [bl])
rect(x, y, w, h, [detailX], [detailY])
パラメタ
-
x
Number：長方形のx座標 -
y
Number：長方形のy座標 -
w
Number：長方形の幅 -
h
Number：長方形の高さ (オプション) -
tl
Number：左上隅のオプションの半径 (オプション) -
tr
Number：右上隅のオプションの半径 (オプション) -
br
Number：右下隅のオプションの半径 (オプション) -
bl
Number：左下隅のオプションの半径 (オプション) -
detailX
Number：x方向のセグメント数(WebGLモードの場合)(オプション) -
detailY
Number：y方向のセグメント数(WebGLモードの場合)(オプション)
例1
function setup() {
createCanvas(400, 400);
stroke("red");
//左上点(30, 20)に幅55と高さ80の長方形を描画します。
rect(30, 20, 55, 80);
stroke("blue");
//角が丸く, 半径が15の長方形を描画します。
rect(110, 20, 55, 55, 15);
stroke("green");
//以下の半径の角が丸い長方形を描画します：
//左上= 20, 右上= 15, 右下= 10, 左下= 5。
rect(190, 20, 55, 55, 20, 15, 10, 5);
}
実行結果
著作権
p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.
ライセンス
Creative Commons(CC BY-NC-SA 4.0) に従います。