I am a web developer who is bad with mathematics. I have never needed some math/geometry formulas before. But now I realize it is needed for more advanced design tecniques. I decided to learn math but I need some urgent formulas for some project that I am working on right now.
So here is the problem: I am drawing some shape with canvas in HTML. I need to calculate point that shown on the image. The bottom side shape and right side shape are looks like triangle. so the hypoenuse degrees are static but I need to find intersection point on different screen sizes.
I am drawing this shape exactly as it is on a screen. I want to keep angle these hypotenuses' angles on every screen resolutions.
Edge A: always 112pixels
Edge D: always 77pixels
Edge B: changes according to screen resolution (Height)
Edge C: changes according to screen resolution (Width)
Angle A-Hypotenuse: 22.7deg
Angle D-Hypotenuse: 9.16deg
Coordinate(0, 0): top, left of the image.
Here is how I draw this edges:
- MoveTo (maxWidth - 112, 0)
- DrawLine(maxWidth, 0) // Drawing A edge
- DrawLine(maxWidth, maxHeight) // Drawing B edge
- DrawLine(0, maxHeight) // Drawing C edge
- DrawLine(0, maxHeight - 77) // Drawing D edge
- DrawLine(?, ?) // the point that showed with arrow remaining loyal to the given angles.
PS: I know it should be very easy for you but It's hard for me since I forgot everything that I got from school
The first step is to choose a coordinate system and come up with two equations. Let's say the base length of the two triangles is $\ell_{1}$ (for the flatter triangle) and $\ell_{2}$ for the other triangle. Since the first triangle is flatter, we have that $\ell_{1}>\ell_{2}$ (longer base length). Similarly, let $h_{1}$ be the height of the flatter triangle, and $h_{2}$ be the height of the taller triangle... so $h_{1}<h_{2}$.
Now, write down some equations that describe the line made by the two hypotenuses. I assume the common right angle point is the coordinate $(0,0)$ and positive coordinates go to the right and up.
The first triangle (flatter) goes through two points: $(-\ell_{1}, 0)$ and $(0, h_{1})$. The slope of this line is $m_{1}=\frac{h_{1}}{\ell_{1}}$ and since we already have the $y$-intercept, we have that the line describing the first hypotenuse is:
$$ y = \frac{h_{1}}{\ell_{1}}x + h_{1}.$$
By a similar argument, we find that the line describing the second hypotenuse is:
$$ y = \frac{h_{2}}{\ell_{2}}x + h_{2}.$$
Now, to find where those two lines intersect, we solve the system of equations involving those two lines. Since they are already both solved for $y$, this is easy.
\begin{align*} \frac{h_{1}}{\ell_{1}}x + h_{1} &= \frac{h_{2}}{\ell_{2}}x + h_{2} \\ \left(\frac{h_{1}}{\ell_{1}}-\frac{h_{2}}{\ell_{2}}\right)x &= h_{2}-h_{1} \\ x &= \frac{h_{2}-h_{1}}{\frac{h_1}{\ell_1}-\frac{h_2}{\ell_2}} \end{align*}
You can play around with simplifying that if you like... although it probably isn't necessary (since it is easily computed using any programming language).
Now that you have your $x$ value, you just plug it into either of the previous equations to get the $y$ value.
$$y = \frac{h_1}{\ell_1}\left(\frac{h_{2}-h_{1}}{\frac{h_1}{\ell_1}-\frac{h_2}{\ell_2}}\right) + h_{1}.$$