如何测试一条线是否与特定点相撞

Question

So, I have an HTML canvas, and I can draw stuff on it.

What I want to do is make a javascript function to tell me if a line is colliding with a certain point.

I have seen algorithms to test if a line collides with another line, like this one:

 var IsIntersecting = function(Point a, Point b, Point c, Point d) { var denominator = ((bX - aX) * (dY - cY)) - ((bY - aY) * (dX - cX)); var numerator1 = ((aY - cY) * (dX - cX)) - ((aX - cX) * (dY - cY)); var numerator2 = ((aY - cY) * (bX - aX)) - ((aX - cX) * (bY - aY)); if (denominator == 0) { return numerator1 == 0 && numerator2 == 0;} var r = numerator1 / denominator; var s = numerator2 / denominator; return (r >= 0 && r <= 1) && (s >= 0 && s <= 1); } 

But I want to see if it collides with a specific point. I have not found a good algorithm to do this yet. Can you help me?

Answer 1

Usage

a and b are endpoints of the line that point p should fall between.

Hypothetically, this should work:

function pointOnLine(a, b, p) {
  var lx = b.x - a.x
  var ly = b.y - a.y
  var dx = p.x - a.x
  var dy = p.y - a.y
  var l = Math.sqrt(lx * lx, ly * ly)
  var d = Math.sqrt(dx * dx, dy * dy)
  var q = d / l

  return d <= l && q * lx === dx && q * ly === dy
}

However, due to floating point error, and considering you're probably working with pixel coordinates, I think this would suffice with a default error of .5 :

function pointOnLine(a, b, p) {
  var e = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : .5;
  var lx = b.x - a.x
  var ly = b.y - a.y
  var dx = p.x - a.x
  var dy = p.y - a.y
  var l = Math.sqrt(lx * lx, ly * ly)
  var d = Math.sqrt(dx * dx, dy * dy)
  var q = d / l

  return d <= l && Math.abs(q * lx - dx) < e && Math.abs(q * ly - dy) < e
}

ES6 improvement

Here's a similar method that solves an edge-case issue when Math.sqrt() returns Infinity for components that have an absolute value greater than Math.sqrt(Number.MAX_VALUE) . It uses a new method called Math.hypot() :

function pointOnLine({ x: ax, y: ay }, { x: bx, y: by }, { x: px, y: py }, e = .5) {
  const lx = bx - ax
  const ly = by - ay
  const dx = px - ax
  const dy = py - ay
  const l = Math.hypot(lx, ly)
  const d = Math.hypot(dx, dy)
  const q = d / l

  return d <= l && Math.abs(q * lx - dx) < e && Math.abs(q * ly - dy) < e
}

How it works

This method gets the component differences between the endpoints of the line lx , ly , and then calculates the length of the line l .

It then gets the component differences between the test point p and point a of the line dx , dy , and calculates the distance between those points d .

After that, it calculates the quotient q of d / l , and the test first checks if distance d is less than length l to ensure that it's possible for the point to fall between the endpoints of the line. Lastly, it checks to see if the component differences between the line endpoints multiplied by the quotient q are equal to the component differences between the points p and a .

If so, then the point p is determined to be on the line between the endpoints a and b .

Answer 2

A more performant solution.

Here is another way to find if a point is near a line.

Finding if a point is on a line can not be done with any reliability as floating point numbers have a limited precision and the error this introduces means that the ideal result calcs === 0 will fail many times with even the smallest of errors 1e-15 (smaller than an atom) so we call the function isPointNearLine not isPointOnLine

function isPointNearLine(a,b,p){
    const v1 = { x : b.x - a.x, y : b.y - a.y };
    const l2 = v1.x * v1.x + v1.y * v1.y;
    if(l2=== 0){ return false } // line has no length so can't be near anything
    const v2 = { x : p.x - a.x, y : p.y - a.y };
    const u = (v1.x * v2.x + v1.y * v2.y) / l2;
    return u >= 0 && u <= 1 && Math.abs((v1.x * v2.y - v1.y * v2.x) / Math.sqrt(l2)) < 1;
}    

Performance

As a games programmer performance is always the most important part of any algorithm. The above function is a generic good performance solution. Flat out on Firefox the function can compute 28Million solutions a second. When you compare that to Patrick Roberts answer it is significantly quicker. Patrick Robert's ES6 solution gets only 0.98Million solutions a second.

But to be fair his solution is not written with performance in mind. With a quick rewrite

// don't use destructuring as it is presently very very slow
function pointOnLine(a, b, p) {
  const lx = b.x - a.x
  const ly = b.y - a.y
  const dx = p.x - a.x
  const dy = p.y - a.y
  const l = Math.sqrt(lx * lx + ly * ly) // don't use hypot as it is 5 times slower 
  const d = Math.sqrt(dx * dx + dy * dy) // than using sqrt and the 2 multiplications and one addition
  const q = d / l
  return d <= l && Math.abs(q * lx - dx) < 0.5 && Math.abs(q * ly - dy) < 0.5
}

and you get a > 2400% performance increase at 24Million solutions a second.

Though now his function has an advantage as he uses Numbers rather than Objects to store the intermediate results and his code is ignoring the zero length line (I always consider that line length is a higher level functionality and should never be a problem at low level functions) So a rewrite of my code

function isPointNearLine(a,b,p){
    const lx =  b.x - a.x;
    const ly =  b.y - a.y;
    const l2 = lx * lx + ly * ly;
    const dx = p.x - a.x;
    const dy = p.y - a.y;
    const u = (lx * dx + ly * dy) / l2;
    return u >= 0 && u <= 1 && Math.abs((lx * dy - ly * dx) / Math.sqrt(l2)) < 1;
}  

Now at 35.7Million solutions a second.

The main reason that my function is so much quicker than his is that he has 2 extra function calls in his code. His function requires at least 2 calls to Math.sqrt and at max 2 sqrt and 2 abs calls. My function can find a solution without any function calls and at worst a abs and sqrt

Though my function may look like it is doing more avoiding the function calls is worth the extra operations.

Benchmarks use 3 random points

A.x = Math.random() * 1000 - 500;
A.y = Math.random() * 1000 - 500;
B.x = Math.random() * 1000 - 500;
B.y = Math.random() * 1000 - 500;
P.x = Math.random() * 1000 - 500;
P.y = Math.random() * 1000 - 500; 

Only the function is timed

// time start
isPointNearLine(A,B,P);
// time end

Run on a

• OS Win10 32Bit,
• Browser Firefox 55.0b9 (32-bit),
• Hardware i7 Q720 @1.6Ghz laptop.