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

<pre><code>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);
}
</code></pre>

CC BY-SA 3.0
2017-01-19T12:50:29.113Z
2017-01-19T12:50:29.113Z
2017-05-23T12:39:19.850Z
Sigfried
<p>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:</p>

<p><a href="https://i.sstatic.net/TESQW.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/TESQW.png" alt="enter image description here"></a></p>

<pre><code>function perpendicular_coords(x1,y1, x2,y2, xp,yp)
</code></pre>

<p>returns <code>[xp',yp']</code> 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.</p>

<p>What I've tried so far:</p>

<pre><code>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));
</code></pre>

<p>I don't really understand the function; got it from <a href="https://stackoverflow.com/a/17411276/1368860">https://stackoverflow.com/a/17411276/1368860</a></p>

CC BY-SA 3.0
2017-01-17T16:07:17.027Z
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?
trichoplax is on Codidact now
CC BY-SA 3.0
2017-01-17T16:11:06.143Z
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.
Sigfried
CC BY-SA 3.0
2017-01-17T16:23:03.913Z
What you're after is [vector projection](https://en.wikipedia.org/wiki/Vector_projection). Do you understand basic vector math? If not, I'm sure someone can break it down to the the basic operations.
Olivier
CC BY-SA 3.0
2017-01-17T22:03:15.633Z
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.
Sigfried
CC BY-SA 3.0
2017-01-17T23:51:20.963Z
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.
Alan Wolfe
CC BY-SA 3.0
2017-01-18T01:37:35.317Z
Math.atan2 takes (y,x) as arguments: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2/. Is that what you mean?
Sigfried
<transformations>
translate coordinates relative to line segment
Sigfried
# translate coordinates relative to line segment

(Asked by: username_0 on 2017-01-17)

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](https://i.sstatic.net/TESQW.png)](https://i.sstatic.net/TESQW.png)

```
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>

**Tags:** transformations

> **Comments:**
> **username_1**: 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?  
> **username_0**: 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.  
> **username_2**: What you're after is [vector projection](https://en.wikipedia.org/wiki/Vector_projection). Do you understand basic vector math? If not, I'm sure someone can break it down to the the basic operations.  
> **username_0**: 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.  
> **username_3**: 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.  
> **username_0**: Math.atan2 takes (y,x) as arguments: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2/. Is that what you mean?  

---

## 1 answers

### Answer by username_0 on 2017-01-19. Score: 0 | Accepted answer

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);
}

```


---

