*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 `value`

to `newValue`

immediately. What we want is a way to gently and incrementally change `value`

to `newValue`

. To do that, the simplest smoothing equation is this:

`value = (newValue + value) / 2;`

This sets `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.