translate coordinates relative to line segment

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:

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) {
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

• 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 Jan 17 '17 at 16:07
• 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 Jan 17 '17 at 16:11
• 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. – Olivier Jan 17 '17 at 16:23
• 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 Jan 17 '17 at 22:03
• 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 Jan 17 '17 at 23:51

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