CODEWITHSUNDEEP
javascriptcoordinate-systems
Alex
Alex

Reputation: 10216

How to check if coordinates are left or right of coordinates with given degrees in javascript?

The question title might be a little confusing, imagine this:

enter image description here

In this diagram, I know the postions of points a and b (their x and y values) - the origin though is in the top left corner, so yb for instance is somewhat at 137 and ya 81. Also, I know the degree value of the angle <) a which defines how much the lighter rectangle is rotated (I also know how much the other one is rotated, if that is of use).

So, I want to check if point a is left or right of an imaginary line (axis, the pink line) of point b. How would you do that? I know it's simply maths probably but I'm lost.

var isleft = function(xb,yb, xa, ya, degree) {
    if the point at xa, ya is left from the line starting at point xb, yb using d degrees return true;

};

I guess I would have to use a simple linear function to do this, but I dont know how to deal with the degrees, calculate the respective coordinates on that line for a given y value, so help is appreciated.

Upvotes: 0

Views: 1150

Answers (1)

RobG
RobG

Reputation: 147413

You can work out the bearing from point b to point a and if it's less than the angle a (the bearing along the side of the rectangle) then the point is "left", otherwise it's "right". The following function returns the bearing from b to a, but using coordinate order (x, y). The coordinate direction is per the screen, i.e. +x to the right and +y downward (a normal cartesian system would be +y up):

// Long version
function calcAngle(a, b) {
  var PI = Math.PI;
  var points
  var dx = b[0] - a[0];
  var dy = a[1] - b[1];
  var beta = Math.atan(dx / dy);

  // 1st quadrant
  if (dx >= 0 && dy >=0) return beta;

  // 2nd quadrant
  if (dx >= 0 && dy < 0) return PI + beta;

  // 3rd quadrant
  if (dx < 0 && dy < 0)  return PI + beta;

  // 4th quadrant
  if (dx < 0 && dy >= 0) return 2*PI + beta
}

In the above, a and b are coordinate pairs in (x, y) order, where a is point b in the diagram and b is point a in the diagram. Some tests:

// Convert radians to degrees
function rad2deg(rad) {return rad * 180 / Math.PI}

var pair, points = [
  // 1st quadrant
  [[10, 30], [12, 15]],  //   7.6 deg
  [[10, 30], [12, 30]],  //  90.0 deg
  // 2nd quadrant
  [[10, 30], [20, 31]],  //  95.7 deg
  [[10, 30], [10, 40]],  // 180.0 deg
  // 3rd quadrant
  [[10, 30], [ 1, 31]],  // 263.7 deg
  [[10, 30], [ 5, 30]],  // 270.0 deg
  // 4th quadrant
  [[10, 30], [ 5, 5]],   // 348.7 deg
  [[10, 30], [10, 5]]    //   0.0 deg
];

for (var i=0, iLen=points.length; i<iLen; i++) {
  pair = points[i];
  console.log(pair[0] + ',' + pair[1] + ' : ' + rad2deg(calcAngle(pair[0], pair[1])));
}

The function can be more concise:

function calcAngle(a, b) {
  var PI = Math.PI;
  var dx = b[0] - a[0];
  var dy = a[1] - b[1];
  var beta = Math.atan(dx / dy);
  if (dy < 0) return PI + beta;
  if (dx < 0 && dy >= 0) return 2*PI + beta
  return beta;
}

To work out left or right, use the calcAngle function to work out the second bearing and compare it to the first. If it's less, it's to the left. If it's greater, it's to the right. That sense is always clockwise, which may not suit.

e.g. if a is 5° and the calculated angle is 355°, is that 350° to the right or 10° to the left? You may decide that if the difference it more than 180° to reverse the side (e.g. 181° to the right is seen as 179° to the left).

Upvotes: 1

Related Questions