Trigonometry for Animation - HTML5 Animation with JavaScript - page 64

Important formulas in this chapter
Look at this. You have a brand-new shiny programming toolbox, and already you have more than a half-
dozen tools to put in it. The full set of tools also appears in Appendix A, but let's look at what you added so
far. I kept these formulas as simple and abstract as possible, so they don't include variable declarations.
It's up to you to work the formulas into your own scripts using the proper syntax required for the situation.
Calculate basic trigonometric functions
sine of angle = opposite / hypotenuse
cosine of angle = adjacent / hypotenuse
tangent of angle = opposite / adjacent
Convert radians to degrees and degrees to radians
radians = degrees * Math.PI / 180
degrees = radians * 180 / Math.PI
Rotate to the mouse (or any point)
//substitute mouse.x, mouse.y with the x, y point to rotate to
dx = mouse.x - object.x;
dy = mouse.y - object.y;
object.rotation = Math.atan2(dy, dx) * 180 / Math.PI;
Create waves
// assign value to x, y or other property of an object,
// use as drawing coordinates, etc.
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
value = center + Math.sin(angle) * range;
angle += speed;
}());
Create circles
//assign position to x and y of object or drawing coordinate
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
xposition = centerX + Math.cos(angle) * radius;
yposition = centerY + Math.sin(angle) * radius;
angle += speed;
}());
Create ovals
//assign position to x and y of object or drawing coordinate
(function drawFrame () {
window.requestAnimationFrame(drawFrame, canvas);
xposition = centerX + Math.cos(angle) * radiusX;