I need to write a function (in Javascript) that accepts the endpoints of a line segment and an additional point and returns coordinates for the point relative to the start point. So, based on this picture:

enter image description here

function perpendicular_coords(x1,y1, x2,y2, xp,yp)

returns [xp',yp'] where xp' is the distance from (xp,yp) along a line perpendicular to the line segment, and yp' is the distance from (x1,y1) to the point where that perpendicular line intersects the line segment.

What I've tried so far:

function rotateRad(cx, cy, x, y, radians) {
    var cos = Math.cos(radians),
        sin = Math.sin(radians),
        nx = (cos * (x - cx)) + (sin * (y - cy)) + cx,
        ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;
    return [nx, ny];

[xp', yp'] = rotateRad(x1,y1, xp, yp, Math.atan2(y2-y1,x2-x1));

I don't really understand the function; got it from https://stackoverflow.com/a/17411276/1368860

  • $\begingroup$ What have you tried so far? If you describe what you already know how to do we'll have more chance of giving a relevant answer. For example, are you more stuck on how to solve this mathematically, or how to express it in JavaScript? $\endgroup$ – trichoplax Jan 17 '17 at 16:07
  • 1
    $\begingroup$ Oh, thanks. I'm a competent JavaScript programmer. It's the math. I'll put what I've tried in the question so it's easier to read. $\endgroup$ – Sigfried Jan 17 '17 at 16:11
  • 2
    $\begingroup$ What you're after is vector projection. Do you understand basic vector math? If not, I'm sure someone can break it down to the the basic operations. $\endgroup$ – Olivier Jan 17 '17 at 16:23
  • $\begingroup$ I don't understand vector math, but it looks like the code I'm using actually works. I think the problem I'm having is elsewhere. $\endgroup$ – Sigfried Jan 17 '17 at 22:03
  • $\begingroup$ Your $y_p$ and $x_p$ look reversed from what I would expect. Is that intentional? If not, that might be the source of whatever problems you are having. $\endgroup$ – Alan Wolfe Jan 17 '17 at 23:51

I got a good answer on StackOverflow: https://stackoverflow.com/questions/41701713/translate-coordinates-relative-to-line-segment/41702475#41702475 from https://stackoverflow.com/users/1579780/giladd:

function perpendicular_coords(x1, y1, x2, y2, xp, yp) {
  var dx = x2 - x1,
      dy = y2 - y1;

  //find intersection point    
  var k = (dy * (xp-x1) - dx * (yp-y1)) / (dy*dy + dx*dx);
  var x4 = xp - k * dy;
  var y4 = yp + k * dx;

  var ypt = Math.sqrt((y4-y1)*(y4-y1)+(x4-x1)*(x4-x1));
  var xpt = distance(x1, y1, x2, y2, xp, yp);
  return [xpt, ypt];

// Distance of point from line
function distance(x1, y1, x2, y2, xp, yp) {
  var dx = x2 - x1;
  var dy = y2 - y1;

  return Math.abs(dy*xp - dx*yp + x2*y1 - y2*x1) / Math.sqrt(dy*dy + dx*dx);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.