HTML and CSS Reference
In-Depth Information
yposition = centerY + Math.sin(angle) * radiusY;
angle += speed;
}());
Get the distance between two points
//points are x1, y1 and x2, y2
//can be object positions, mouse coordinates, etc.
dx = x2 - x1;
dy = y2 - y1;
dist = Math.sqrt(dx * dx + dy * dy);
Of course, this topic is not just a list of formulas. So look these over and make sure you fully understand
how each one works. If you have any questions, go back to the point in the chapter where it was
introduced, experiment with it, and research it more if you need to, until you can really think with the
concept.
Summary
This chapter covered nearly all the trigonometry you need for animating with the canvas element using
JavaScript. There is one principle, called The Law of Cosines, that we left out for now, because it is a lot
more complex and deals with triangles that are not right-angle triangles (they have no angle measuring 90
degrees). If you are now addicted to trigonometry and just can't get enough, you can jump ahead to
Chapter 14, which covers inverse kinematics, where trigonometry really comes in handy.
But, for now, you know about sine, cosine, and tangent, and their opposites: arcsine, arccosine, and
arctangent, as well as the JavaScript functions to calculate each one.
Best of all, you got some hands-on experience using most of them with the canvas element, with some of
the most common real-life uses of them. As you move through the topic, you see many more ways in
which these techniques become useful. But you now have a solid footing with the concepts, and when you
come across those examples, you should have no problem understanding them or how they work.
The next chapter covers some of the more common rendering techniques for putting graphics on the
screen, including the all-important canvas drawing API. As you go through that chapter, see whether you
can find ways to use the rendering methods to visualize some of the trigonometry functions you learned
here. You should have no trouble creating so
