# The ratio of the sides of a triangle gives us the angle of a line?

I'm really trying to understand trigonometry and I am having problem understanding some basic things.

We have $$\sin(1) = 0.8414709848078965$$

This is basically telling me a ratio. The ratio is of the side that is opposite an angle of 57 degrees (1 radian) to its longest side, the hypotenuse (opp/hyp) so if you convert this into a fraction. I rounded to $0.838$ and I got $\frac{419}{500}$.. So the opposite sides length is $419$ and the terminal side is $500$. $419$ is a prime number, and can't be reduced (I think). I'm having problems figuring out how since we have those lengths we can make the lines of any size we want in canvas.

Maybe I'm not sure I know how ratios works. back to the triangle I know that the adjacent side is $652$. Does that come in to play?

Is the way that we get the proper sized lines at a specific angle done through the unit circle. Is that the only way to do it?

I actually just set out to make a line with an angle of about $57$ degrees and a length of $200$ for an example. While doing it I remembered from trig tutorials to use the cosine for the $x$ value of the unit circle and the sine for the $y$ value. I just accepted that.

The part in the code

context.lineTo(100 + length * fiftySevenX, 100 + length * fiftySevenY);

How do we know to do $\frac{419}{500} * (\text{the length that we want})$ will give us the line that we want? This has to do with the fact that the radius is $1$ in the unit circle and we're scaling it up by $200$ but how are we scaling $\frac{419}{500}$ down ?

  window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var length = 200;

var fiftySevenY = Math.sin(1); // 0.8414709848078965
var fiftySevenX = Math.cos(1) // 0.5403023058681398

context.beginPath()
context.arc(100,100,4,0, 2*Math.PI, false)
context.fill()
context.moveTo(100,100), // start canvas point
context.lineTo(100 + length * fiftySevenX, 100 + length * fiftySevenY);
context.stroke()
context.closePath();
}

<canvas id="canvas" width="400" height="400"></canvas>


The length coordinates can be written as $(r\cos\theta,r\sin\theta)$. Also in your example adjacent side cant be $652$ it is greater than $500$ which is hypotenuse an it isnt possible to construct such a triangle. Also if you the equation of a line you can use rotation matrix to get a line with angle$\alpha$ between two lines hope i have interpreted your question correctly.
• Thanks for your answer I see I made a mistake with the 652 but It's bothering me that I get 419/ 500. Because those represent the lengths of the triangle and those are very specific. so for now on should i ignore these lengths and just multiply the length of the line by the decimal value. I do that all ready but I don't know how that makes sense. why should I ignore the real lengths that the decimal gives? – user2537537 Dec 26 '15 at 5:58
• See now its a matter of significant figures . Its upto you wheyher you want $2 or3$ places after decimal or round it of or use floor function or greatest integer function – Archis Welankar Dec 26 '15 at 6:08
• I'm not sure what you mean. I'm not good at math, but here is what I thought after reading your comment. I can change the 419/500 to 4 /5. I'm just explaining my confusing thought process now. how does the opposite (4) over the hypotenuse(5) create angle of 57. well I guess we supplied the angle when we did sin(1) . well if you input sin(1) you get 4/5 but in javascript you get 0.8414709848078965 and this good for us if we want to draw a line pixel by pixel and we accept that fact that gives us the change in the y coordinates. Is that because of the unit circle? I tried to make sense. – user2537537 Dec 26 '15 at 7:20
• Man im saying after dividing. not removing $19$ from $400$ . We.get $419/500=0.838$ so now its upto you keep accuracy of the value either take it as $0.9,0.83,0.8,0.838$ and you get approx values same as $\approx 56.97$ hope now its clear. – Archis Welankar Dec 26 '15 at 7:29