Processing Advent Calendar 2017 参加記事

07

p5.js のライブラリのひとつ p5.collide2D はその名のとおり当たり判定を手軽に実装できるライブラリです。
bmoren/p5.collide2D: 2d collision library for p5.js
このライブラリのサンプルにも含まれている、図形を重なることなく充填させる"ぎゅむぎゅむ"スケッチの描き方が面白かったので紹介します。

p5.collide2D は対象となる2つの図形が衝突しているかしていないかを判断してくれます。
例えば、以下のサンプルスケッチではマウス(=点)と四角が衝突しているか判定し、
衝突している場合は四角の色が変わるようになっています。
Basic Usage

対象となる図形は円、四角、線、点などが用意されており、
判定する組み合わせも「円と円」、「円と線」など、様々に扱うことができます。

以上をふまえて、p5.collide2Dの別のサンプルスケッチを見てみましょう。
Randomly placing objects without touching
円と円の衝突判定を利用して、対象オブジェクトとそれ以外のオブジェクトが衝突していないか判定し、
衝突していた場合は再度別の場所に描画しなおす…ということを繰り返しています。
これにより、重なることなく円が描画されています。

ただし、このスケッチは円の大きさが固定のため、どう頑張ってもスペースに収まらず描画できないというケースがあります。
そこで、円と円が衝突していたら小さい方がさらに小さくなるという機構を付け足します。
これにより、スペースに収まりきらない問題は解決し、記事の冒頭にあるような"ぎゅむぎゅむ"が実現できました。
fill up - OpenProcessing

p5.collide2Dは、ゲームへの活用など、様々なことに使えそうです。
OpenProcessingでも投稿画面上の右のメニューから気軽に利用できるのでオススメです!