p5play で Chain Collider（vertex mode）のグループを作ってみる #JavaScript

この記事は p5play の Group の仕組みで、以下の「Chain Colliders」のグループを作ってみる、という内容の記事です。

●p5play : Sprite ＞ Chain Colliders
　https://p5play.org/learn/sprite.html?page=11

p5play の Group のサンプル

p5play の Group のサンプルを見ていると、　グループ化している対象は円・矩形など、基本図形のみです。

このグループを作る仕組みで、冒頭の Chain Collider を使えると良さそうな状況があり、今回の内容を試してみました。

基本図形のグループを作る方法

基本の図形を使う際は、以下のような書き方ができます。

処理の内容は「グループを作る ⇒ 共通のパラメータを設定」という流れです。

その他に、グループ共通のパラメータを設定する中にランダムな価を使うと、例えば以下のように画面内に個々の図形を散りばめることができます。

それ以外にも、グループを作成した後に以下のような処理を行うことで、個別のスプライトへの追加設定を行えるようです。

また、以下のように i というインデックスを使って、個々の図形で異なるパラメータの設定ができるようです。

p5play で Chain Collider（vertex mode）の Group を作る

それでは本題です。

Chain Collider の vertex mode は、new Sprite() という処理を行う際に、座標の組みの配列を設定して使います。これをグループ作成後に設定するのは難しそうです。

そこで、グループを作成した後に new Sprite() による個別設定を行う、というやり方を使ってみることにします。

処理の流れは、「グループの作成 ⇒ 個別の床の座標を指定」とします。また、draw() の中で、特定の床の色を後から変化させる、というのも試してみました。

それを実装したものが以下です。

let floors;

function setup() {
  new Canvas(300, 400);
  strokeWeight(5);

  floors = new Group();
  floors.collider = "static";
  floors.color = color(190, 200, 220); // 灰色

  new floors.Sprite([
    [20, 40],
    [100, 90],
    [150, 150],
  ]);
  new floors.Sprite([
    [250, 150],
    [100, 300],
    [50, 300],
  ]);
}

function draw() {
  background(50);

  floors[0].color = color(
    (frameCount / 2) % 120,
    150,
    ((frameCount / 4) % 120) + 120
  );
}

上記を実行した結果、以下のように床を描画することができました。

これだけだとグループの仕組みを使った恩恵があまりないですが、以下の記事に書いていた衝突判定などを組み合わせると今回の実装内容が活きてきそうです。例えば、個々の床と別のオブジェクトとの衝突時に、衝突が行った床だけ何らかの変化を生じさせる、というのを簡単に実装できそうです。

●p5play の 2つのスプライトのグループ間で「Collisions and Overlaps」の仕組みを扱う - Qiita
　https://qiita.com/youtoy/items/6d56327bd3a1d232cb9b