この辺の記事で利用しているvertexについてご質問を受けたので解説します!

Processingで多角形・星を描く : だらっと学習帳
Processing でキラキラ図形を描く : だらっと学習帳
Processing で描ける図形まとめ - Qiita

vertex とは
vertex()beginShape()endShape() とあわせて、オリジナルの図形を描くための関数です。

いつも利用している rect()ellipse() はそれぞれ四角、円しか描けません。
じゃあ複雑な図形が描きたい時はどうしよう…?
そこで使えるのがこの vertex です!

vertexはその名の通り「頂点」を指定する関数です。
頂点をいくつか指定すると、それらを点つなぎパズルのようにつなぎ、図形として定義できます。

vertex の使い方
ではオリジナルの図形を描く手順を解説していきます。

1. beginShape() と書く
「ここからオリジナルの図形を定義していきますよ」という合図です。
2. vertexで図形の頂点を指定する
vertex(x地点, y地点) と指定します。
必要な数だけ指定しないといけません。例えば、四角なら4点、三角形なら3点必要です。
3. endShape() と書く
「オリジナル図形の定義は以上です」という合図です。

例えば、「普通のrectじゃ長方形や正方形しか描けないけど、私は平行四辺形が描きたいなぁ」という場合について考えてみます。
平行四辺形の頂点は4点なので、以下のように4回vertexを指定することで描くことができます。

pict
void setup() {
size(300, 300);
}

void draw() {
background(200, 200, 200);

beginShape();

vertex(30, 100);
vertex(200, 100);
vertex(270, 200);
vertex(100, 200);

endShape();
}

上記のvertexは以下のように対応しています。
kaisetsu
(30, 100)の地点からスタートして、(20, 100)→(200, 100)→(270, 200)→(100, 200)と時計回りに指定しています。

でも平行四辺形の線がなんか変?最後の辺の線がなぜか描かれていない…。
そんな時は、endShape() を
endShape(CLOSE)
と書くと最後まで線がつながります!
sen
void setup() {
size(300, 300);
}

void draw() {
background(200, 200, 200);

beginShape();

vertex(30, 100);
vertex(200, 100);
vertex(270, 200);
vertex(100, 200);

endShape(CLOSE);
}


オリジナル図形の中心
今度はひし形を描いてみようと思います。
hishigata
void setup() {
size(300, 300);
}

void draw() {
background(200, 200, 200);

beginShape();

vertex(150, 30);
vertex(210, 150);
vertex(150, 270);
vertex(90, 150);

endShape(CLOSE);
}

でもこの書き方だと例えば「ひし形をゆっくり左右にor上下に動かすアニメーションを描きたい」時に面倒です。
動かすべき点が4つもあるのはダルいです。
というわけで、pushMatrix()popMatrix() 、それと translate() を利用して、この図形の中心と中心からの距離で書くようにしてみます。
void setup() {
size(300, 300);
}

void draw() {
background(200, 200, 200);

pushMatrix();
translate(150, 150);

beginShape();

//vertex(150, 30);
//vertex(210, 150);
//vertex(150, 270);
//vertex(90, 150);

vertex(0, -120);
vertex(60, 0);
vertex(0, 120);
vertex(-60, 0);

endShape(CLOSE);
popMatrix();
}

上記のコードは「中心を(150, 150)として、そこから(0, -120)の距離→(60, 0)の距離→(0, 120)の距離→(-60, 0)の距離 の地点を順番に結んで図形をつくる」を指しています。
hidhigatasetsumei
中心から縦方向は120上下に離れていて、横方向は60左右に離れているので、
それぞれ上方向ならマイナス、下方向ならプラス、
左方向ならマイナス、右方向ならプラスで距離を指定してあります。
これはなぜかというと、Processingの座標指定方法を思い出していただければ簡単で、
Y軸方向は上から下へ数値が大きくなる→中心よりも上にある点のY座標の数値は中心点のY座標に対して小さくなる
X軸方向は左からから右へ数値が大きくなる→中心よりも左にある点のX座標の数値は中心点のX座標に対して小さくなる
ためにマイナスをとるようになります。
sign

このように書いておけば中心をずらすだけでひし形を動かせるようになります。
つまり、translate()の値を変更するだけでアニメーションできるようになるのです。
例として、ひし形が右へ流れるアニメーションを書いてみました。
4点動かすよりも中心点をずらすだけで済む方が楽で良いですね!
output_4l8Fxv
int x = 150;

void setup() {
size(300, 300);
}

void draw() {
background(200, 200, 200);

pushMatrix();
translate(x, 150);

beginShape();

vertex(0, -120);
vertex(60, 0);
vertex(0, 120);
vertex(-60, 0);

endShape(CLOSE);
popMatrix();

x++;

if (x > width + 60) {
x = -60;
}
}


中心からの距離を利用する
中心点を決めてそこからの距離をどうこう…というとやっぱり極座標系ですよね!
というわけで、今度は六角形を描いてみましょう。

six
void setup() {
size(300, 300);
}

void draw() {
background(200, 200, 200);

pushMatrix();
translate(150, 150);

beginShape();

int R = 100;

for (int vertexIndex = 0; vertexIndex < 6; vertexIndex++) {
vertex(R * cos(TWO_PI*vertexIndex/6), R * sin(TWO_PI*vertexIndex/6));
}

endShape(CLOSE);
popMatrix();
}

中心は(150, 150)です。
R が中心からの距離で、ここでは100を指定しています。
また、六角形なので6点vertexを指定しています。
それら6点を半径100の円上に等間隔になるような角度で打点しています。
この辺の説明は以下の記事で図付きで詳しく説明していますので合わせてご覧ください。
Processingで多角形・星を描く : だらっと学習帳

バリエーションとして、ある式に沿って360度vertexを打点していくやり方もあります。
例えば、以下のような式がある時、
77687bb2
7419e578
これを360度打点していくとこうなります。
kira
void setup() {
size(300, 300);
}

void draw() {
background(200, 200, 200);

pushMatrix();
translate(150, 150);

beginShape();

int A = 100;

for (int theta = 0; theta < 360; theta++) {
vertex(A * pow(cos(radians(theta)), 3), A * pow(sin(radians(theta)), 3));
}

endShape(CLOSE);
popMatrix();
}

上記の図形の出典は以下の記事です。こちらも合わせてご覧ください。
Processing でキラキラ図形を描く : だらっと学習帳

vertex じゃなくてもよくない?
ここまでを読んで、「でも星やハートならtextで文字として出せばいいし、もっと複雑な図形も画像として表示させればよくない?」と思った方もいると思います。
それもアリです!
ですが、vertexを使うことで簡単に線の色や塗りつぶしの色を変えられたり、
サイズが調整しやすかったり、
あるいはこんな複雑な変形アニメーションができるようになるのです!(使っているのは curveVertex()ですが)
図形が驚くほど扱いやすくなる書き方なんですよね。




vertexについて簡単にですが解説してみました。
もし「ここがわからない!」という所があればお気軽にTwitterで質問投げてください!

あと、この記事思いのほか書くのに時間かかったんで宣伝させてください〜!!!
【以下宣伝】
SUZURI、BOOTHでProcessing製オリジナルグッズ販売中です!
Tシャツやスマホケース、バッグやマグカップなどなど取り揃えております!
レオナ ( reona396 ) のオリジナルアイテム ∞ SUZURI(スズリ)
My Products - BOOTH(同人誌通販・ダウンロード)
PIXIV FANBOXもやってます!
「こういう解説記事もっと書いて!」と思っていただけたなら、ご支援いただけると嬉しいです!
reona396[pixivFANBOX]

あと、本記事を大学などの授業やその資料で引用・リンクを貼るの大歓迎です!

2018年7月17日 vertexじゃなくてもよくない? の項 追記