-1

In a 2D game, i need to find if an object is above or under a diagonale line.

Anyone knows how to do this ?

(i use createJS framework)

Simon Guichard
  • 162
  • 1
  • 9
  • @simon guichard compare coordinates.can you show a example point and line – Madhawa Priyashantha Jun 10 '16 at 15:07
  • [fiddle](http://jsfiddle.net/PerroAZUL/zdaY8/1/) from [How to determine a point in a 2D triangle?](http://stackoverflow.com/questions/2049582/how-to-determine-a-point-in-a-2d-triangle) – pishpish Jun 10 '16 at 15:26

3 Answers3

2

Use the cross product of the point and the line.

You need to move the whole coord system to the start of the line and then get the cross product of the line and the point. If the result is negative then the point is left of the line, if positive then the point is right of the line, if zero then the point is on the line.

// the point
var px = 100;
var py = 100;

// the line
var lx1 = 20;
var ly1 = 20;
var lx2 = 320;
var ly2 = 120;

// move line end and point so that line start is at 0,0
lx2 -= lx1;
ly2 -= ly1;
px -= lx1;
py -= ly1;

// get cross product
var cross = lx2 * py - ly2 * px;
if(cross < 0){ // point is to the left (anticlockwise)
}else if(cross > 0){ // point is to the right (clockwise)
}else{  // cross must be zero then point is on the line    
}
Blindman67
  • 51,134
  • 11
  • 73
  • 136
1

Build a triangle using the upper coordinates to create a shape. For example, if your line look like:

line

You can create a shape of if using x2 and y1:

triangle

Now simply add the triangle to the path and do a isPointInPath(x, y), if true it's above, if false it's below.

If you need to check below reverse the process.

result

(wowa! a lot of arrows there... but you'll get the idea :) )

Edge cases (pun intended): if point is very close to one of the ends -> just extend the line, or make polygon extending (x1,y1) up to edge of the area.

Actually, thinking about it: triangles may not be so suitable, rather, use the upper edge of the canvas as a segment of polygon, then the next segment would be vertical line down to the end of the diagonal line, the the final segment from the beginning of the diagonal line to the upper left side of the canvas. I'm just too lazy to redo the graphics but you get the idea..

1

OK, scrap my previous answer and use line intersection instead. Shoot a line from the point to test straight up. If there is an intersection the point is below, if none, the point is either above or to the side of the line.

To avoid side cases (no pun), extend the original line using interpolation.

Here is a function to do line intersection. To do linear interpolation of the original line simply use some extreme values:

var tx1 = x1 + (x2-x1) * -51000;
var ty1 = y1 + (y2-y1) * -51000;

var tx2 = x1 + (x2-x1) * 53200;
var ty2 = y1 + (y2-y1) * 53200;

Update I was a bit in a hurry this morning so here's a small update. As blindman67 points out, you can use just the d in the linked intersection function and check s/t if they are in the normalized range (or just use cross product - see his answer it that is a better fit).

Community
  • 1
  • 1
  • Works like a charm :) Thanks – Simon Guichard Jun 10 '16 at 15:59
  • You just need to check the value of d in the line intersection function. It will be neg if to the left of the line (better solution is just do the cross product of line and point) . Also you dont need to add the extreme values if you remove the two bounds check in the line intercept function `if(s >= 0 && s <= 1)` and the other one for `t` as that will give the intercept for the line not the line segment. – Blindman67 Jun 10 '16 at 16:22