Trigonometry for Browser Animation
Art from the Metropolitan Museum of Art's collection - Pythagoras shown with Arithmetic imagined as a woman.
People are generally put off by trigonometry because it brings back bad memories of high school. I actually love it because it allows me to do really fun things when I'm programming! Animation can be a really good way to teach trigonometry and show how its concepts are really useful outside of the classroom.
Let's start with a simple idea for an interactive animation. Say you want to have an arrow that always points at the cursor on the screen. Sounds like a job for trig! Hopefully you remember
dy if you want to use the fancy calculus terms.
See the Pen Trig - base SVG by Simone Seagle (@stseagle) on CodePen.
mousemove events because the origin of the animation element is not the same as the origin of the page.
Now we have our triangle ready to go, so we can rotate the pointer. We remembered our
SOHCAHTOA, so we can get the tangent of the angle with our
Math.atan2 function to calculate the angle. If you use Math.atan, it will lead to much heartache. Just try it.
See the Pen Trig - Arctangent by Simone Seagle (@stseagle) on CodePen.
That gives us the angle and we converted it to degrees, so we're done, right? WRONG. If you look carefully at the value for the angle in that Codepen, when we're right above the pointer it's telling us the angle is -90 degrees. You would expect that in that location, the pointer shouldn't be rotated at all. There's two different ways we could fix this. One, we could redraw our pointer so it usually points to the right. Or two, we could offset the angle. Let's do option two because adjusting angles is something that comes up a lot depending on the assets you make or receive from a designer. This is pretty easy to fix by adding a constant 90 degrees to whatever the computed angle is. Then we us CSS to rotate our triangle, and we're done!
See the Pen Trig - Rotating the arrow by Simone Seagle (@stseagle) on CodePen.
TADA! Perfect. This concept comes in handy for simulating two objects bouncing off one another, and my favorite - creepy moving eyes.
Also published on DEV.to.