erase() はレイヤーと一緒に使わないとダメなんだと気付いた夏
p5.js の erase() を使用した作例を Twitter 等で見かけるのですが、その動作がよくわからなくて、自分の理解のためにこの記事を書いてみます。
まず p5.js のリファレンスにあるサンプルを見てみたんですけど、これがよくわかんないんですよね。
一番目のサンプルは白い丸描いてるだけじゃないの?
二番目は透明度を加味した三角形?
三番目は dom? なんで HTML 関係してくるの?
う〜ん… どういうこと?😰
この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨
うまくいかないよ?
よくわからないときは自分でコードを書いてみるに限ります。
まずはテスト用に灰色のバックグラウンド上に青色の四角形 A を描いたものを用意。
function setup() {
createCanvas(480, 320);
colorMode(HSB, 360, 100, 100, 100);
noLoop();
strokeWeight(3);
background(0, 0, 80, 100); // 灰色
// A : 1番目の rect
fill(220, 60, 90, 100); // 青
rect(0.0, 20, width * 0.8, height - 40);
}
ここに erase() で円 a を描いて(?)みます。
// background ごと消える!?
erase();
ellipse(width * 0.8, height * 0.5, width * 0.2, width * 0.2);
noErase();
すると、水色の円が描かれました。この水色は OpenProcessing の画面の色です。四角形 A に穴が開くというより、バックグラウンドもろとも穴が開いたような感じ?
想像ではこのように四角形 A の一部が削れてバッググラウンドが現れるイメージだったのですが、違うようです。
崩れ去った理想…
じゃあもう一つ四角形 B を重ねたらどうでしょう?
// B : 2番目の rect
fill(40, 80, 90, 100); // オレンジ
rect(0.0, 50, width * 0.5, height - 100);
この上に erase() で円 b を描いてみると?
// 2番目の rect だけじゃなくて、1番目の rect と background ごと消える
erase();
ellipse(width * 0.5, height * 0.5, width * 0.2, width * 0.2);
noErase();
うひ! 最初の四角形 A もバッググラウンドも関係なくもろとも削れちゃう?
どうなってんでしょう?これ!?
実行結果の画面表示だとよくわからないのですが、結果を画像として保存してみるとこのように erase() の部分が透明になっています。
erase() でバッググラウンドごと消えるというのはキャンバスごと削れて透明になってしまうということのようです。
なるほど… それはわかったけど… どう使うのこれ?🤔
そういうことか!
この疑問を一発で解決に導いてくださったのが takawo shunsuke(@takawo)先生のこのツイート。
なるほどレイヤー! イメージ的には画用紙を何枚も重ねるような感じですね。
erase() はその画用紙をハサミで切り取るイメージ。画用紙を重ねれば erase() であけた穴を通して下の画用紙の絵が見えるということ!
具体的にはどうやるの?
p5.js では createGraphics() を使ってレイヤーを作ることができます。
さっきのコードをレイヤーを使うように書き直してみましょう。
// バッググラウンド
layer01 = createGraphics(width, height);
layer01.colorMode(HSB, 360, 100, 100, 100);
layer01.background(0, 0, 80, 100); // 灰色
// 1番目の rect と erase
layer02 = createGraphics(width, height);
layer02.colorMode(HSB, 360, 100, 100, 100);
layer02.strokeWeight(3);
layer02.fill(220, 60, 90, 100); // 青
layer02.rect(0.0, 20, width * 0.8, height - 40);
layer02.erase();
layer02.ellipse(width * 0.8, height * 0.5, width * 0.2, width * 0.2);
layer02.noErase();
// 2番目の rect と erase
layer03 = createGraphics(width, height);
layer03.colorMode(HSB, 360, 100, 100, 100);
layer03.strokeWeight(3);
layer03.fill(40, 80, 90, 100); // オレンジ
layer03.rect(0.0, 50, width * 0.5, height - 100);
layer03.erase();
layer03.ellipse(width * 0.5, height * 0.5, width * 0.2, width * 0.2);
layer03.noErase();
// 3つのレイヤーを重ねる
image(layer01, 0, 0);
image(layer02, 0, 0);
image(layer03, 0, 0);
でけた! でけたよ!
灰色の机の上に青い画用紙を置いて一部切り取り、その上に小さめのオレンジの画用紙を置いて一部切り取り。イメージどおりですね!
erase() を使った作例
イメージを掴んだところで、erase() を使ってアニメーション作例を作ってみました。
※絵文字を使っているのでフォントによって見た目異なります。
takawo shunsuke(@takawo)先生の森の中を歩いているかのようなこの作例もとても面白いです。
フォークさせてもらって、こんなアニメーションも作ってみました。
レオナ(@reona396)先輩のブログには erase() についての説明が沢山のサンプルとともにあります。
p5.js のリファレンスにあった透明な三角形の意味も先輩のブログを読んでわかりました。
いろんな説明読んでみて、自分で作例作ってみて、これでしっかり理解できたと思います。
Twitter で今後 erase() を使った作例を見たら、きっと今までとは違って見えることでしょう。楽しみです!😀
📘 他にも note でいろんな記事書いています。
🐦 Twitter でもいろいろ面白いの上げてるのでぜひフォローしてください。
🎨 こちらのブログはソースコード付きの作品集になってます。
この先には erase() を使用したちょっと大きめの作品画像があります。この記事がお気に召しましたら投げ銭お願いしますね。😉✨
ここから先は
¥ 100
この記事が面白かったらサポートしていただけませんか? ぜんざい好きな私に、ぜんざいをお腹いっぱい食べさせてほしい。あなたのことを想いながら食べるから、ぜんざいサポートお願いね 💕