3
$\begingroup$

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.

enter image description here

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

$\endgroup$
4
  • $\begingroup$ So, what you have is two triangle which share a right angle but have different base lengths and different height? And you want a formula to find the intersection of the hypotenuses? Does it matter to you what coordinate the right angle is at? i.e. for simplicity, can we just assume the common right angle is at the point $(0, 0)$? $\endgroup$
    – TravisJ
    Jun 27, 2015 at 0:51
  • $\begingroup$ You need to be more specific about what YOU know - measurements of various edges and angels, and what ever is available to you.. Geogabra is a great means on practicing geometry solutions with Algebra. $\endgroup$
    – Moti
    Jun 27, 2015 at 0:57
  • $\begingroup$ I have updated my question to be more accurate $\endgroup$
    – Valour
    Jun 27, 2015 at 1:07
  • $\begingroup$ I also know the angles for hypotenuses so I added them. $\endgroup$
    – Valour
    Jun 27, 2015 at 1:18

1 Answer 1

3
$\begingroup$

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}.$$

$\endgroup$
4
  • $\begingroup$ since it's a web development problem, the coordinate(0, 0) is the top left of the image. Does this equations work on this coordinate system? $\endgroup$
    – Valour
    Jun 27, 2015 at 1:10
  • $\begingroup$ @GokhanOzturk, the actual values would be different, the methodology would be the same. Does the top of the tall triangle have $y=0$ and does $y$ get bigger as you go down? And is the left (bottom) corner of the flatter triangle have $x=0$ (with $x$ getting larger as you move to the right)? $\endgroup$
    – TravisJ
    Jun 27, 2015 at 2:49
  • $\begingroup$ Yes that is correct. $\endgroup$
    – Valour
    Jun 27, 2015 at 6:26
  • $\begingroup$ @GokhanOzturk, then what you want to do is just find two points that you know are on each hypotenuse... corners of the triangles are usually easiest. Find the slopes and y-intercepts and solve. The cut-off portions of the triangle make it a little harder... but one can just imagine there being different triangles there (not shifted into the lower-right corner). $\endgroup$
    – TravisJ
    Jun 27, 2015 at 22:07

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .