HTML and CSS Reference
In-Depth Information
Figure 3-21.
A right-angle triangle
If you happen to know all three measurements, the Pythagorean Theorem is nothing more than an
interesting relationship. But if you only know two of the measurements, it becomes a powerful tool to
quickly find the third. When programming, the most common situation is where you know the lengths of the
two legs and you want to know the hypotenuse. Specifically, you want to find the distance between two
points.
Distance between two points
Say you have two objects on the canvas element and you want to find out how far apart they are. This is
the most common use of the Pythagorean Theorem when programming animation.
What do you have to work with? You have the x and y positions of each object. Let's call the position of
one x1, y1, and the other x2, y2. This is a situation like the one illustrated in Figure 3-22.
x2, y2
dist
?
x1, y1
Figure 3-22.
What is the distance between the two objects?
If you have been following this chapter closely, you see a right-angle triangle forming in the diagram in
Figure 3-22, with the distance line as the hypotenuse. In Figure 3-23, we finish and add some actual
numbers.
