Easing equations have been around for a long time. In fact pretty much any site with any animation on it is probably using them. They were made by Robert Penner for use in Flash, but since they’re open source you’ll find them everywhere. Anyway I decided it’d be interesting to get them running in a WebGL vertex shader and to see what I could get away with.
Ease-ily Does It
If you’ve never come across easing equations, here’s a short breakdown of what they do. Each equation takes a start value, and end value, a duration and a time. As you increase the time value the equation will return a number between the start to the end values, and the way it gets from one to the other gives you different feels. The simplest one just runs linearly from start to end, more complex ones provide elasticity and bouncing.
Getting in a Mesh
Three.js supports the loading of 3D models in JSON format, and there’s an exporter for Blender which will do just that. I started with the helix, which is a cylinder that I subdivided down its length so that I actually had vertices to mess around with.
Then for a bit of a laugh I tried exporting and using the monkey mesh from Blender. It ended up being mildly creepy but oddly entertaining to watch it ease back and forth from a mesh to a mess.
From Bug To Feature
If you tick the ‘extra crazy’ option in the experiment you see an additional effect, which is something I stumbled upon. I was busy integrating the monkey mesh so you could switch between the two and totally screwed something up and ended up with that effect. Once I resolved the bug that was causing it I decided to bring it back as an option. One of the many reasons I love to experiment is that you end up with cool stuff happening when you least expect it.