Get the slope from one point and an angle in degrees

Question

In javascript, I am trying to draw a line that is at an angle that is user defined.

Basically, I have a point (x,y) and an angle to create the next point at. The length of the line need to be 10px.

Let's say that the point to start with is (180, 200)... if I give it angle "A" and the (I guess)hypotenuse is 10, what would my equation(s) be to get the X and Y for a slope?

Thanks for your help!

Answer 1

Assuming H = Hypotenuse (10 in your example), this is the formula for your slope:

Y2 = H(Sin(A)) + Y1
   = 10(Sin(A)) + 200

X2 = Sqrt((H^2)-(Y2^2)) + X1
   = Sqrt(100 - (Y2^2)) + 180

So now you've got

(180, 200) -> (X2, Y2)

Where X2, Y2 will vary depending on the values of A and H

To check our calculation - A (as entered by the user) can be calculated using the slope equation replacing the X1, X2, Y1 and Y2 values with the original input and resulting output.

A = InvTan((Y2 - Y1) / (X2 - X1))
  = InvTan((Y2 - 200) / (X2 - 180))

Answer 2

well, from basic trigonometry...

sin A° = Y/10

cos A° = X/10

10^2 = Y^2 + X^2

Answer 3

As Mr Doyle snarkily implied, the math isn't that hard, but :

1) Make sure you are clear about what the angle is referenced to, and what directions your coordinates go; most simple trig stuff assumes you are dealing with traditional cartesian coordinates with x increasing to the right, and y increasing up the page, whereas most drawing api have y increasing down the page and x increasing to the right.

2) make sure you understand whether the math functions need degrees or radians and supply them with the appropriate arguments.

Answer 4

Maybe a better way to look at the problem is using vectors:

_{(source: equationsheet.com)}

You can also write the vector this way:

_{(source: equationsheet.com)}

where

_{(source: equationsheet.com)}

Setting the first equal to the second lets us solve for the end point given the starting point, the angle, and the distance:

_{(source: equationsheet.com)}

_{(source: equationsheet.com)}