Search code examples
javascripttrigonometryangle

Need to find a (x,y) coordinate based on an angle

So I'm stumped. I didn't know trigonometry before this, and I've been learning but nothing seems to be working.

enter image description here

So a few things to note: In html, cartesian origin(0,0) is the top left corner of the screen. DIVS natural rotation is 0deg or ---->this way.

I need to find the x,y point noted by the ? mark in the problem.

$('#wrapper').on('click', function(e){
    mouseX = e.pageX;
    mouseY= e.pageY;

    var angle  = getAngle(mouseX,Rocket.centerX,mouseY,Rocket.centerY);
    var angleDistance = Math.sqrt((Math.pow((mouseX - (Rocket.left+Rocket.halfX)),2)) + (Math.pow((mouseY-(Rocket.top+Rocket.halfY)),2)));
    var cp2Angle = -90 +(angle*2);
    var invCP2Angle = 90+ angle;
    var cp2Distance = angleDistance*.5;
    //Red Line
    $(this).append('<div class="line" style="transform-origin:left center;width:'+(Math.round(angleDistance))+'px;top:'+(Rocket.top+Rocket.halfY)+'px;left:'+(Rocket.left+Rocket.halfX)+'px;transform:rotate('+(Math.round(angle))+'deg);"></div>');
     //Blue Line
     $(this).append('<div class="line" style="background:#0000FF;transform-origin:left center;width:'+Math.round(cp2Distance)+'px;top:'+(mouseY)+'px;left:'+(mouseX)+'px;transform:rotate('+(Math.round(cp2Angle))+'deg);"></div>');
}
function getAngle(x2,x1,y2,y1){
    var angle = Math.degrees(Math.atan2(y2-y1,x2-x1));
    return angle;
}
Math.degrees = function(radians) {
  return (radians * 180) / Math.PI;
};

So this might be confusing. Basically when I click on the page, i calculate the angle between my custom origin and the mouse points using Math.atan2(); I also calculate the distance using Math.sqrt((Math.pow((x2 - x1),2)) + (Math.pow((y2-y1),2)));

The blue line length is half the length of the red line, but the angle changes, based on the angle of the red line.

When the red line angle = 0deg(a flat line), the blue line angle will be -90(or straight up, at red line -45 deg, the blue line will be -180(or flat), and at Red Line -90, the blue line will be -270 deg(or straight down). The formula is -90 +(angle*2)

I need to know the other end point of the blue line. The lines only exist to debug, but the point is needed because I have an animation where I animate a rocket on a bezier curve, and I need to change the control point based on the angle of the mouse click, if there's abetter way to calculate that without trigonometry, then let me know.

I read that the angle is the same as the slope of the line and to find it by using Math.tan(angle in radians). Sometimes the triangle will be a right triangle for instance if the first angle is 0 deg, sometimes it won't be a triangle at all, but a straight line down, for instance if they click -90.

I've also tried polar coordinates thought I wasn't sure which angle to use:

var polarX = mouseX-(cp2Distance * Math.cos(Math.radians(invCP2Angle)));
var polarY = mouseY- (cp2Distance * Math.sin(Math.radians(invCP2Angle)));
Solution

  • I do not know javascript well, so instead of giving you code, I'll just give you the formulae. On the figure below, I give you the conventions used.

    enter image description here

    x3 = x2 + cos(brownAngle + greenAngle) * d2
y3 = y2 + sin(brownAngle + greenAngle) * d2

    If I understand you correctly, you have already d2 = 0.5 * d1, d1, (x2, y2) as well as the angles. This should then just be a matter of plugging these values into the above formulae.