点と線の距離

distance-line-point.png

クリックしたところに点が置かれ、線までの距離を計算してくれます。

直線と点の距離は内積で求められる

(1)
\begin{align} d = n \cdot p - n \cdot b \end{align}
  • b…線上に位置するbaseの点です。
  • n…線の法線
  • p…線との距離を測りたい点

この式では法線の長さは1に正規化してあるものとみなします。

距離といってますが、この内積で求められるdは負の値もありえます。
(上のグラフをクリックすると、左下に置いた点は負の値になり、右上に置いた点は正の値になるはずです)
なので、この結果が負か正かどうかで点が線のどちら側にあるのかわかります。
これはさまざまな図形の衝突判定するときの基本としてよく使います

垂線の引き方

//内積を計算する関数
function dot(a,b){
   return a.x*b.x + a.y*b.y;
}
  //直線への垂線を引く
  var vertical = new PIXI.Graphics();
  vertical .lineStyle(2,skyblue);
  vertical.moveTo(pos.x,pos.y);
  var distance = dot(normal,pos)-dot(normal,begin);//beginは線の始点
  vertical.lineTo(pos.x - normal.x*distance,pos.y - normal.y*distance);

ax+by+c=0形式の時の、点と直線の距離

(2)
\begin{align} d = \frac{ax_0+by_0+c}{\sqrt{a^2+b^2}} \end{align}

$x_0,y_0$は線との距離を測りたい点です。
法線n=(a,b)なので、正規化したら$\sqrt{a^2+b^2}=1$です。

Bibliography

convex-hull distance dotproduct line point segment-segment-collision

サポートサイト Wikidot.com convex-hulldistancedotproductlinepointsegment-segment-collision