Tag Archive for 'easing'

I’ve recently spent a great deal of time working on a 2D renderer/game engine as a hobby when I came across the need to add interpolation for my animation system. Studying other animation solutions like greensock (for flash) and tweener I was inspired by the relative ease of use. Hash tables to modify attributes of the interpolated object and specification of tweening effect as a parameter made tweening a quick and painless process.

Of course, such a solution is not possible to completely replicate in C++ due to its limited support for reflection. But before I begin discussing a viable solution for the C++ language, here’s a basic explanation on what interpolation is! According to wikipedia: interpolation is a method of constructing new data points within the range of a discrete set of known data points, but as far as multimedia/real-time programming is concern, interpolation is mainly used to generate the in-betweens of 2 points for animation subsystems (or anything that requires some kind of movement really). Extrapolation is an extensition of interpolation where points are calculated beyond the range of values, this is often used for pridictive movement algorithms in online games and, unfortunately, is beyond the scope of this article.

Now, the most basic interpolation formula goes as such:

Position = Initial Position + (Final Position - InitialPosition) * Interpolation Range
where Interpolation Range is a value from 0 – 1.

The rate at which Interpolation Range changes controls what “type” of interpolation it is. For example if Interpolation Range increases steadily (constant increase) the type of interpolation would be described as linear. Interpolation Range usually uses time to drive its value, hence producing the effect of animation (movement over time).

Here are some visualizations of interpolation range:

Linear Interpolation (y = x)

Quadratic Interpolation (y = x * x)

Sine Interpolation (y = sin(x) * PI/2)

With that explanation out of the way, lets get into the real implementation details! The system relies heavily on the use of function pointers to specify the interpolation type. This method produces:

clean and simple looking code

a unified interface for interpolation

easily extensible framework for user animations

Firstly, the function pointer declaration:

typedef float (*AnimationType)(float);

We will implement different types of animation using the AnimationType declaraction as a base for the function. The parameter represents the unmodified time value (0-1). The function returns the modified time value (interpolation value). The function provides a quick prototype for defining functions that calculate interpolation based on time.

The next step in implementing the system, is to come up with some basic interpoolation functions (using the AnimationType prototype).