この記事は Qiita p5js アドベントカレンダー18日目の記事です。
これはなに
p5.jsが用意している関数について理解を深める記事です。
今回はVertexのbeginContour()について。
Vertexとは
通常のShapeが持つ関数とは異なる、少し複雑な図形を描画したい時に使用するもので、
beginShape()
とendShape()
の間にvertex(x, y)
で頂点を指定し、図形を作ります。
【p5.js】beginShapeとvertex関数
beginContour()
図形の型抜き?を行う関数で、beginShape()の中で使用する関数です。
リファレンスより
beginContour()とendContour()関数を使用して、文字「O」の中心のような形状の中に負の形状を作成します。beginContour()は形状の頂点の記録を始め、endContour()は記録を停止させます。負の形状を定義する頂点は、外側の形状とは反対の方向に「巻く」必要があります。まず、時計回りに外側の頂点を描画し、次に反時計回りに内部の頂点の形状を描画します。
これらの関数は beginShape()/endShape() の組の中でしか使用できず、 translate(), rotate(), scale() などの変換は beginContour()/endContour() の組の中では機能しない。また、ellipse()やrect()などの他の形状を使用することもできません。(DeepL翻訳)
beginShapeと同様に中では使用できない関数がいくつかるようですね。
vertexで頂点を指定していくようです。
また必ずendContour
で終了させる必要があります。
また外側は時計回り、beginContour()の中は反時計回りなことも注意が必要です。
下記の記事が分かりやすかったです。
これなんでなんだろ...
P5.js 日本語リファレンス(beginContour)
Type
beginContour(): p5;
endContour(): p5;
使ってみる
型抜きで思いついたのがゼルダの伝説のトライフォースだったので、これを作ってみましょう。
これは見事な型抜き感です。
まずbeginShape()で正三角形を作ります。
正三角形の作り方はこちらの記事を参考にさせていただきました。
http://blog.livedoor.jp/reona396/archives/55107577.html
function setup() {
createCanvas(600, 600);
background(0)
}
r = 100
function draw() {
translate(width / 2, height / 2)
rotate(radians(-90));
beginShape()
for (let i = 0; i < 3; i++) {
vertex(r*cos(radians(360*i/3)), r*sin(radians(360*i/3)));
}
endShape()
}
そしたら真ん中に逆三角形の穴を開けます。
ちょっと苦戦しましたがこれでいけました!
function draw() {
translate(width / 2, height / 2)
rotate(radians(-90));
beginShape()
for (let i = 0; i < 3; i++) {
vertex(r*cos(radians(360*i/3)), r*sin(radians(360*i/3)));
}
beginContour()
for (let i = 0; i < 3; i++) {
vertex(-r/2*cos(radians(360*i/3)), r/2*sin(radians(360*i/3)));
}
endContour()
endShape()
}
そしたら最後にfill()で色をつけます。
beginContour()の中は穴が空いているので色付けされません。
function draw() {
translate(width / 2, height / 2)
rotate(radians(-90));
fill('gold') // 追加
beginShape()
for (let i = 0; i < 3; i++) {
vertex(r*cos(radians(360*i/3)), r*sin(radians(360*i/3)));
}
beginContour()
for (let i = 0; i < 3; i++) {
vertex(-r/2*cos(radians(360*i/3)), r/2*sin(radians(360*i/3)));
}
endContour()
endShape()
}
トライフォースの完成!
やったー!
参考
p5.js reference | beginContour()()
Processing で三角形を描く
P5.js 日本語リファレンス(beginContour)