Some useful math curves

I‘m kind of obsessed with fluidity, when it comes to movements and changes thereof. That’s why I really like the optimization process : it gives more resources to the eye-candy smoothness.

As part of the teaching experience, I sometimes try to show my students that maths are not always the Enemy. Knowing a few formulas and curves can help you get some really nice visual effects.

Let’s start with the basics:

Linear functions
They take the form y = a.x + b and represent a linear movement, always at the same speed. I won’t even bother you with them.

exp(x) / exp(-x)
These are the forever accelerating and forever decelerating functions. Movement wise, if you try to move something faster and faster out of the way, that’s the way to do it. Likewise if you want something to gradually slow down to halt (halt being an arbitrary floor level, since exp(-x) never reaches 0). One good thing about exp is that exp(0) = 1. Therefore, if you set your initial speed to, say, 500 pixels a second, and want a decreasing speed, you just use 500.exp(-x) where x is the elapsed time. If you want to reach the floor faster, you use a multiplying coefficient on x ( o.exp(a.x) ), and if you want it to take more time, you divide ( o.exp(x/a) ).

These functions and their derivatives are often used for transition effects, or game dynamics.


sin(x) / cos(x)
These are the perpetual motion functions. Whenever you feel like making something oscillate, that’s your culprit. They both oscillate between -1 and 1, so the coefficient thing still works. Careful though, the period of the oscillation (time between two exact same patterns) is 2π, which computers don’t like that much. However, since graphics is all about pixels, and pixels can’t be split on-screen, then you can have reliable results, provided you choose your coefficients well.


Now the fun begins. You can use these functions as means to reproduce some eye-savvy movements by combining these simple functions. Let’s say you want something like a pendulum : it keeps the same period, but gradually looses amplitude. Amplitude is the a in a.sin(x) that means we can constrain the oscillation by gradually diminishing the amplitude. Something like sin(x)/x works pretty well, even though you have to be careful for 0 : 1/x tends to be high at that point.


Next, let’s play with the period. Imagine something that spins faster and faster, while keeping the same amplitude. Maybe something just before a cartoonesque explosion? Well, playing with the period is playing with the b in sin(b.x). You can be linear or exponential about it, and I like exponential better.


Multiplying is a good way to combine two curves in one. Adding however means deciding about scopes. Let’s say you have an object that comes in fast, slows down, and then zooms out faster and faster. For the deceleration, exp(-x) sounds good. For the acceleration, exp(x) sounds good, too. if you add them both, you get a zoom-in, inflexion point, zoom-out. I wanted to center it on time = 2. Before, the deceleration is the “stronger” of the curves, and afterwards, the acceleration takes precedence.


That’s all for today. These simple curves can get you a more “eye candy” animation scheme, as long as you tune the parameters right. Have fun!



Leave a Reply