Inverse Trigonometric Functions
Last time we learned how to use the trigonometric ratios to solve for a side in a right triangle. Now what if we want to discover the measure of an angle from the length of two sides? I found myself in this exact situation when making the examples for the previous blog post. I declared an array containing the triangle vertices in a sort of mock clipspace like so:
While clipspace is normally a WebGL shader coordinate system, I have converted the canvas pixel space into an imitation so I can use a fluid width canvas. Regardless, I could determine the length of each side from the vertex locations, but how would I calculate the value of the acute angles once the user changed the length of a side? Inverse Trigonometric Functions to the rescue!
You can see in the example below, the steps for solving an angle are similar to solving for a side but simpler because we don't need to do rearrange the equation. We just divide one side by the other then run it through the chosen trig function:
- Determine which ratio we need to use. Because we know the lengths of the adjacent and hypotenuse, let's use arccos.
- Substitute the known values.
- Evaluate to determine ∠B.
Going back to our real world example, I had to get the measure of my acute angles in order to display them to the user when a side length was changed. My solution was to create a function which took the side lengths as an argument, then returned an object containing all the angle values. Since we have the value of ∠C baked into the rightTriangle constant, we can just return 90 all the time for it. For the values of ∠A and ∠B we use acos and asin on the side lengths:
So now we have the ability to solve all the sides and angles in a right triangle given only 2 values, be they angles or side lengths. This gives us an important building block we need to start rendering triangles in WebGL. There's a long way to go from calculating right triangles to rendering them in 3D but it's a good first step.