p5play での Chain Collider（vertex mode）のグループを作った衝突判定を試す：重力をかけた円との衝突でテスト

以下の記事の続きです。

●p5play で Chain Collider（vertex mode）のグループを作ってみる - Qiita
　https://qiita.com/youtoy/items/589dad3ac7af138f79b8

前回の記事では、p5play で図形などのグループを作る仕組みを使い、基本図形ではない Chain Collider（vertex mode）をグループ化するというのを試してみました。

そして前回の記事で進めた内容は、Chain Collider（vertex mode）をグループ化した後の処理までは試していない内容でした。そのため、今回はグループ化したものと別の図形との間で、以下の衝突判定を適用するというのをやってみます。

●p5play : Group ＞ Collisions and Overlaps
　https://p5play.org/learn/group.html?page=2

試した内容

まず、今回の内容を動かしている時の様子は、以下のとおりです。

上記の内容は、Chain Collider（vertex mode） 3つをグループ化したものと、重力がかかって跳びはねる円との間で衝突判定を行っています。

その衝突判定を行う部分に関して、個々の Chain Collider ごとに異なる処理を適用できるかを試しています。ひとまずは簡易な内容で試しており、具体的には、1つ目だけは衝突時に特に変化は起こらず、残り 2つは衝突時に円と同じ色に変化するという処理を適用しています。

実装内容と実行結果

実装した内容は、以下のとおりです。

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

  world.gravity.y = 10;

  strokeWeight(5);

  const 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],
  ]);
  new floors.Sprite([
    [0, 350],
    [50, 350],
  ]);

  noStroke();
  const ball = new Sprite(60, 0, 20);
  ball.bounciness = 0.6;

  ball.collides(floors, changeColor);
}

function changeColor(ball, floor) {
  if (floor.idNum > 0) floor.color = ball.color;
}

function draw() {
  background(50);
}

グループを作成する処理の内容に関しては、冒頭に掲載している前回の記事をご参照ください。それと、衝突判定全般の話は、以前書いた以下の記事をご参照ください。

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

上記の参照先に書いていない、今回のポイントになりそうな部分を補足します。それは、changeColor() の中で、「グループ内の 3つある中で、2つだけ色が変化する」ということを実現している部分です。

その判定には、idNum というキーを用いています。
この idNum というキーは、公式ページの上部メニューから見られるドキュメント上には書いてなさそうでした（※ 詳細仕様などを見ていけば、書いてありそうですが）。そのため、このキーを探すために、上のプログラムの changeColor() の中で、floor をログとして出力し、その出力内容を見て個々の ID として使えそうな値を見つける形で探しました。

その結果、上で掲載していた動画のように「グループ中の特定のものだけに色が変わる処理を適用する」という処理を実現できました。

追記： 上記を基にしてやりたかったこと

今回の仕組みを適用したかった内容があったのですが、想定通りに作れた感じがするので、動作させている様子を追加で掲載してみます。