【p5.js】beginShapeとvertex関数

Last updated at 2021-11-26Posted at 2021-11-26

p5.jsについての備忘録です。
rect関数などとは別に存在する描画方法、beginShapeとvertex関数についてまとめ。

beginShape

beginShape(kind?: BEGIN_KIND): p5;

beginShapeを使用することでより複雑な形を表現できる。
引数kindには形となるものを渡す必要があり、それは以下の通り

POINTS, LINES, TRIANGLES, TRIANGLE_FAN,
TRIANGLE_STRIP, QUADS, QUAD_STRIP

指定しない場合は不規則な多角形となる。

この関数を実行した後はvertex関数を呼び出す必要があり、
endShapeで描画を止める

beginShape内ではellipseやrectは使用できない。

beginShape と endShapeの中でのみ使われる関数。
図形の頂点座標をvertex関数で指定する。

vertex(x: number, y: number): p5;

例えばvertexを下記のように4つ指定した場合、正方形が出来上がる
（左側の罫線はendShape(CLOSE)とすることで描画できる）

vertex(30, 20);
vertex(85, 20);
vertex(85, 75);
vertex(30, 75);

もしbeginShapeの引数にTRIANGLE_FANを渡していた場合、
頂点の結びは三角形を作ろうとするためマスのような図形になる

頂点を一つ増やし、一部を動的にすれば次のようになる

vertex(30, frameCount);