CreateJSで 2D 線分の交差判定

はじめに

2Dにおける物体どうしの衝突判定アルゴリズム、またはその一部として、線分同士の交差判定が必要になりました。

f:id:AMANE:20141028222308p:plain

アルゴリズム

今回は、こちらの記事を忠実に実装させていただきました

2D衝突編その10 線分と線分の衝突

線分ですので、

始点 + ベクトル(長さを持つ)
始点 + 終点

のいずれかが分かっていれば良いのでお気楽です。数回の外積計算でフィニッシュです

実装

コードはgithubにあげました

<a href="https://github.com/izmhr/lineCrossing">izmhr/lineCrossing</a>

izmhr/lineCrossing · GitHub

使ってるライブラリ

EaselはCanvasを使いやすくラップしてくれているライブラリです。愛しています。

Victorは、2Dのベクトル関連計算のライブラリで、長さを求めたり、内積外積を計算したり、回転指せたりお手の物です。それにベクトルを「定数倍」する関数が無かったので、足した、気がします。

staticな関数もあるvector2dの決まり手的ライブラリってどれなんだろう…教えてエロイひと

ポイントだけ

side.js (辺、の意のつもり) line15 が、公差判定の関数です

Side.prototype.crossing = function(_start, _end)
{
  // http://marupeke296.com/COL_2D_No10_SegmentAndSegment.html

  var v = this.start.clone().subtract(_start);
  var v1 = _end.clone().subtract(_start);
  var v2 = this.end.clone().subtract(this.start);

  if(v1.cross(v2) == 0) return false;

  var t2 = v.cross(v1) / v1.cross(v2);
  var t1 = v.cross(v2) / v1.cross(v2);

  if( 0 <= t2 && t2 <= 1 && 0 <= t1 && t1 <= 1)
  {
    // crossing point
    var cp = _start.clone().add(v1.scalarMultiply(t1));
    this.color = '#f33';
    return {point: cp, distance: t1};
  }
  else
  {
    this.color = '#fff';
    return false;
  }
}

_start _end は、交差する候補の線分の始点終点です。

変数名は、元記事様の変数名と合わせてあります。

線分同士が交差していたら、その {交点と、始点から交点までの距離} を返します。交差していなかったらfalseを返します。

サンプルプログラム

サンプルでは、三つの線分と回転し長さを変えられる線分を用意し、回転する線分の始点から見て、線分との交点の中で最も近い点を検出する、ような物にしてみました。

複数物体や複雑形状への衝突判定に利用するイメージです。

自習室

こもります