erase() はレイヤーと一緒に使わないとダメなんだと気付いた夏

p5.js の erase() を使用した作例を Twitter 等で見かけるのですが、その動作がよくわからなくて、自分の理解のためにこの記事を書いてみます。

まず p5.js のリファレンスにあるサンプルを見てみたんですけど、これがよくわかんないんですよね。

reference | 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）先生のこのツイート。

fill(0, 255);で黒の塗りつぶしを行っているからでしょうか．eraseはあった箇所を消すため，レイヤーでの表現と相性が良い命令だと思っています．上面のレイヤーの描画を削除すると背面レイヤーが表示されるようなイメージです😃

— takawo shunsuke (@takawo) June 21, 2020

なるほどレイヤー！ イメージ的には画用紙を何枚も重ねるような感じですね。
erase() はその画用紙をハサミで切り取るイメージ。画用紙を重ねれば erase() であけた穴を通して下の画用紙の絵が見えるということ！

具体的にはどうやるの？

p5.js では createGraphics() を使ってレイヤーを作ることができます。

reference | p5.js

さっきのコードをレイヤーを使うように書き直してみましょう。

	// バッググラウンド
	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() を使ってアニメーション作例を作ってみました。

Night Divides the Day.🚪🚪🚪#p5js #processing pic.twitter.com/hSkAZZ3DfR

— deconbatch (@deconbatch) August 1, 2020

Erase test. - OpenProcessing

※絵文字を使っているのでフォントによって見た目異なります。

takawo shunsuke（@takawo）先生の森の中を歩いているかのようなこの作例もとても面白いです。

200613 - OpenProcessing

フォークさせてもらって、こんなアニメーションも作ってみました。

【も】森の中の一軒家#dailycodingchallenge #creativecoding #p5js pic.twitter.com/GUXQpdAhdD

— deconbatch (@deconbatch) May 5, 2020

レオナ（@reona396）先輩のブログには erase() についての説明が沢山のサンプルとともにあります。
p5.js のリファレンスにあった透明な三角形の意味も先輩のブログを読んでわかりました。

p5.jsのerase()で色んなものを消してみよう！ : だらっと学習帳

いろんな説明読んでみて、自分で作例作ってみて、これでしっかり理解できたと思います。
Twitter で今後 erase() を使った作例を見たら、きっと今までとは違って見えることでしょう。楽しみです！😀

📘 他にも note でいろんな記事書いています。

deconbatch｜note

🐦 Twitter でもいろいろ面白いの上げてるのでぜひフォローしてください。

タイトル未設定

🎨 こちらのブログはソースコード付きの作品集になってます。

クリエイティブ・コーディング・天国！

deconbatch's Land of 1000 Creative Codings.

この先には erase() を使用したちょっと大きめの作品画像があります。この記事がお気に召しましたら投げ銭お願いしますね。😉✨