Smoothing is a quick trick I use all the time when I want to make an interactive element move more naturally, or if I want to even out some erratic numbers (sensor data, I’m looking at you).
The most basic way to change a number is this:
value = newValue;
But that will only set
newValue immediately. What we want is a way to gently and incrementally change
newValue. To do that, the simplest smoothing equation is this:
value = (newValue + value) / 2;
value to the average of itself and
newValue with every update. Let’s say
value is 100 and
newValue is 200. Run the above equation a few times and you’ll get this:
100 150 175 187.5 193.75 196.875 198.4375
…and so on until it becomes almost exactly 200. This is fine, but we have no control over the rate with which this smoothing changes. So I bring you another magic smoothing equation:
value += (newValue - value) / rate;
If we ran this bit of code with
value as 100,
newValue as 200, and
rate as 2, we would get exactly the same results as above. But! Now we can change the
rate variable to any number we like, greater than 1. Let’s try 5:
100 120 136 148.8 159.04 167.232 173.7856
…and so on until it eventually becomes exactly 200, but this time at a slower rate. Let’s try that again with
rate as 1.1:
100 190.91 199.174 199.925 199.9932
…and we’re almost at 200 already!
These two equations are a cheap and simple way to smooth a variable. It’s mostly useful for smoothing a variable which is always changing, such as the position of an object in a game or an interface. If you’re making one-off animations however (such as, the user presses a button and an animation occurs), you’ll probably want to use more sophisticated easing equations.
Check out this interactive demo of the rate-based smoothing equation.
Move your mouse around and watch as the pink dot chases to catch up. Then try adjusting the rate to see the difference in smoothing behaviour.