WSaunders - 11 months ago 57

Javascript Question

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

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

Answer Source

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.

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