Processingのquad()関数は、四角形を描画するための関数です。
今回はこの関数を使って、2次元の四角形を描画する方法を書き溜め
quad()関数は、4つの頂点を指定することで四角形を描画します。
quad()の構文
1 2 3 |
quad(x1, y1, x2, y2, x3, y3, x4, y4); |
各引数は次のように対応しています。
- x1, y1: 1つ目の頂点の座標
- x2, y2: 2つ目の頂点の座標
- x3, y3: 3つ目の頂点の座標
- x4, y4: 4つ目の頂点の座標
これらの引数を指定することで、四角形を描画することができます。便利
quad()のサンプルコード
以下は、quad()関数を使って四角形を描画する例
1 2 3 4 5 6 7 8 9 10 11 |
void setup() { size(500, 500); } void draw() { background(255); fill(255, 0, 0); quad(100, 100, 400, 100, 400, 400, 100, 400); } |
このコードでは、(100, 100), (400, 100), (400, 400), (100, 400) の座標にある頂点を持つ四角形が描画されます。背景は真っ赤。
より複雑な四角形の描画
quad()関数を使って、より複雑な四角形を描画することもできる。
以下のコードでは、頂点の位置をランダムにして四角形を描画しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
void setup() { size(500, 500); } void draw() { background(255); fill(random(255), random(255), random(255)); float x1 = random(width); float y1 = random(height); float x2 = random(width); float y2 = random(height); float x3 = random(width); float y3 = random(height); float x4 = random(width); float y4 = random(height); quad(x1, y1, x2, y2, x3, y3, x4, y4); } |
怒涛のスピードで変わるから少し楽しい。
quad()関数の詳細について
quad()関数に関する詳しい情報は、Processingの公式ドキュメントを参照してください。