Easing Functions

Below is a video of a sphere moving in a square path.

You probably don’t find it very convincing: the sphere is basically teleporting. If you were to encounter this in reality, you’d probably have an averse feeling: to your brain, this is new and unknown, and therefore worthy of suspicion. Who knows, maybe this teleporting sphere might want to eat you, so better be cautious.

If we draw the position of the sphere as a graph, we get

As you can see, there are sudden jumps at \(0.25\) and \(0.75\), also called discontinuities. This is what triggers your brain to become wary of the sphere. Let’s try to make a less disturbing sphere:

This is much better, but the sudden change in direction at the corners comes across as unrealistic. Again, this is due to the fact that the laws of physics (more or less) prohibit such behavior. If we make a graph of the sphere’s position, we get

If, however, we graph the sphere’s speed, we see we simply moved the discontinuity elsewhere:

Let’s replace the jumps by slopes. There are many ways to do this, one being

The corresponding X-position is

Rendering this yields

This is more pleasing to the eye than the previous movie.

On the one hand, we want to be able to simply say "move from position A to position B". But on the other hand, we want this movement to be smooth, which is more complicated to achieve. Easing functions are meant to offer the simplicity of the first combined with the pleasing aesthetics of the second.

For example, say you want a sphere to move from \((0, 0, 0)\) to \((1, 0, 0)\). The simplest way would be

We can make this movement smoother using the easing function known as quadratic in/out:

Note how it speeds up gently, then slows down again, arriving at a standstill at \(t=1\). The in/out part refers to the fact that the speed is zero both at the start and the end. We could instead start at high speed and slow down to a halt, or vice versa:

There are an infinitude of paths leading us from \(0\) to \(1\):