多角形の描画

多角形を描画する方法を説明します。

多角形を描画する方法を説明します。

vertex()	図形の頂点となる座標を指定
beginShape()	vertex()で指定する頂点の記録を開始
endShape()	vertex()で指定する頂点の記録を停止

上記を使って多角形を描画します。

beginShape()
beginShape(kind)
引数を指定しない場合は、vertext()で指定した座標間(頂点)を結んだ図形を描画する
kind: POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIPのどれか

vertex(x, y)
vertex(v)
x(float): float型のx座標
y(float): float型のy座標
v(float[]): 座標を持つfloat配列

endShape()
endShape(CLOSE)
引数を指定しない場合は、始点のvertex()で指定した座標と終点のvertext()で指定した座標間で線を描画しない
CLOSE: 始点と終点の座標間で線を描画

多角形の描画

size(500,500);
background(200);

beginShape();
vertex(200, 100);
vertex(310, 125);
vertex(400, 250);
vertex(350, 400);
vertex(190, 350);
vertex(100, 200);
endShape();

4行目では以降のvertex()の記録を開始します。

5〜10行目では図形の頂点となる座標を指定します。頂点を指定した順番に接続します。

11行目では記録を停止します。ここまでに指定した座標を使って多角形の図形を描画します。

beginShape()やendShape()に引数を指定しない場合はこのような描画になります。

size(500,500);
background(200);

beginShape();
vertex(200, 100);
vertex(310, 125);
vertex(400, 250);
vertex(350, 400);
vertex(190, 350);
vertex(100, 200);
endShape(CLOSE);

endShape()にCLOSEを指定すると最初に指定した座標と最後に指定した座標を接続し枠線を描画します。

size(500,500);
background(200);

beginShape(LINES);
vertex(200, 100);
vertex(310, 125);
vertex(400, 250);
vertex(350, 400);
vertex(190, 350);
vertex(100, 200);
endShape();

beginShape()にLINESを指定すると2点ずつに分かれてそれぞれが接続した線を描画します。

size(500,500);
background(200);

beginShape(TRIANGLE);
vertex(200, 100);
vertex(310, 125);
vertex(400, 250);
vertex(350, 400);
vertex(190, 350);
vertex(100, 200);
endShape();

beginShape()にTRIANGLESを指定すると3点ずつに分かれてそれぞれが接続した三角形を描画します。

size(500,500);
background(200);

beginShape(TRIANGLE_STRIP);
vertex(200, 100);
vertex(310, 125);
vertex(400, 250);
vertex(350, 400);
vertex(190, 350);
vertex(100, 200);
endShape();

beginShape()にTRIANGLE_STRIPを指定すると1つ目と2つ目を使った三角形、2つ目と3つ目を使った三角形・・・と連続で頂点を使った三角形を描画します。

size(500,500);
background(200);

beginShape(TRIANGLE_FAN);
vertex(200, 100);
vertex(310, 125);
vertex(400, 250);
vertex(350, 400);
vertex(190, 350);
vertex(100, 200);
endShape();

beginShape()にTRIANGLE_FANを指定すると指定した頂点を接続した多角形の内側で作成できる三角形を描画します。

これら以外のオプションについては公式サイトを参照してください。