Calculate coordinates based on distance and direction

Question

Here's my handy scheme:

Given:

• This is 2D, no third axis to worry about
• Segment AB, A and B both having x and y coordinates
• Side width, distance to each corner: width / 2
• direction in degrees (0 is up, 90 right, 180 down, etc)

How to calculate x and y coordinates for corners 1-4?

---

const A = {x: 0, y: 0};
const B = {x: 10, y: 0};
const direction = 90;
const width = 10;
const halfWidth = width / 2;

// tried the following one that I found but
// no lock, I assume somethings off with angles
function getCorner(point, angle, length) {
  return {
    x: point.x + Math.cos(angle) * length,
    y: point.y + Math.sin(angle) * length
  };
}

// EXPECTED
// bottom left: {x: 0, y: 5}
// bottom right: {x: 0, y: -5}
// top left: {x: 10, y: 5}
// top right: {x: 10, y: -5}

console.log(
  "bottom left:", 
  getCorner(A, direction - 90, halfWidth)
);
console.log(
  "bottom right:", 
  getCorner(A, direction + 90, halfWidth)
);

console.log("---");

console.log(
  "top left:", 
  getCorner(B, direction - 90, halfWidth)
);
console.log(
  "top right:", 
  getCorner(B, direction + 90, halfWidth)
);

Answer 1

With indicating that Y axis is upward, it could be simply solved as following:

We see that each corner point is located at angle +/- 90 deg around the AB segment. consider the following figure, dx and dy values (to reach from A or B to each corner point) are easily calculated:

dx = (W/2).sin(alpha)
dy = (W/2).cos(alpha)

Where alpha is equal to 90 - direction. So, we can write the js code as following snippet:

const A = {x: 0, y: 0};
const B = {x: 10, y: 0};
const direction = 90;
const width = 10;

var length = width / 2;
var angle = (90 - direction) * (Math.PI / 180);

var dx = Math.sin(angle) * length;
var dy = Math.cos(angle) * length;

console.log( "bottom left:", {x: A.x - dx, y: A.y + dy} );
console.log( "bottom right:",  {x: A.x + dx, y: A.y - dy} );
console.log("---");
console.log( "top left:",  {x: B.x - dx, y: B.y + dy} );
console.log( "top right:",  {x: B.x + dx, y: B.y - dy} );

Answer 2

Finally figured it out, so many different ways online and none worked. Trial and error won the day.

---

const A = {x: 0, y: 0};
const B = {x: 10, y: 0};
const direction = 90;
const width = 10;
const halfWidth = width / 2;

// changed only this function
function getCorner(point, angle, length) {
  angle = angle * (Math.PI / 180);

  return {
    x: point.x + Math.sin(angle) * length,
    y: point.y + Math.cos(angle) * length
  };
}

// EXPECTED
// bottom left: {x: 0, y: 5}
// bottom right: {x: 0, y: -5}
// top left: {x: 10, y: 5}
// top right: {x: 10, y: -5}

console.log(
  "bottom left:", 
  getCorner(A, direction - 90, halfWidth)
);

// here's an error with JS or something, because
// "x: 6.123233995736766e-16" which is
// "0.0000000000000006123233995736766"
console.log(
  "bottom right:", 
  getCorner(A, direction + 90, halfWidth)
);

console.log("---");

console.log(
  "top left:", 
  getCorner(B, direction - 90, halfWidth)
);
console.log(
  "top right:", 
  getCorner(B, direction + 90, halfWidth)
);