Trigonometry is a tool for animation and of great general utility. With it, you can make a character glow, rotate an image, find the distance between objects and determine whether two objects have collided. It took me a long time to wrap my head around trigonometry. It really isn’t that difficult and once you understand what you can do with it, it becomes a tool in your toolbox you will constantly use.
See the Pen Animating Attributes Using Trigonometry by bitbrainresearch (@jcaldw11) on CodePen.0
One of the things you can do with trigonometry is animate an aspect of something. Color, size (height, width or both), speed etc. Above is an example of what happens when you use sine to animate the color and the size of a circle. You get a very smooth movement through a range this way.
While there are other ways of doing an orbit around an object, here is an example using trigonometry:
The dark circle is really just moving point by point around a circle where the center is the center of the other circle and the radius is whatever we want. As long as you know the position of the object you want to rotate around, you can move another object around it. Also, we can easily go forward, then back, then forward etc if we wanted to because we’re feeding the function a number of degrees and it figures out the new position. If we started at 360 and counted down, we could make our object appear to go backward.
Often, in games, we want to know the distance between two points. One reason we might want this is for collision detection. If I know how big each object is (a radius from it’s center point) and I know the distance between those two centers, I can calculate the distance between the outer edge of the two objects and whether they are colliding.
Here you can see the red line represents the distance from the middle circle to the other circle. If you look in the code you’ll find a function that calculates the distance using the Pythagorean theorem which says that if you take the distance between the two objects on the x-axis and the distance between the two objects on the y-axis you can square them and add them together to get the squared length of the line directly between the two points. If you take the square root of that length you have the distance between the points.
Finally, there are times you want to know what the angle is from one object to another. Math.atan2 to the rescue! Check out the code.
So, now you see what you can do with trigonometry. The world of math is all like this. Every piece of it is another tool in the toolbox of a programmer, particularly when it comes to graphics. If this post helped you please let me know in the comments or give me a link to your creations, I’d love to see them!