Interpolation using cubic Bezier curves

Question

I am trying to create an interpolate function for an animation library to achieve a tweening effect between frames.

I want this to work with Bezier curves. I have created a jsFiddle (here) of my progress so far.

I am trying to create a linear tween using this bezier definition:

{
    p0: new Vector(0,0), //Start point
    p1: new Vector(0,0), //Control point 1
    p2: new Vector(1,1), //Control point 2
    p3: new Vector(1,1)  //End point
}

I have implemented the interpolation function from this tutorial.

var u = 1 - t;
var tt = t*t;
var uu = u*u;
var uuu = uu * u;
var ttt = tt * t;

var p = p0.multiply(uuu);
p = p.add(p1.multiply(3 * uu * t));
p = p.add(p2.multiply(3 * u * tt));
p = p.add(p3.multiply(ttt));

The problem I am having is that when I run the function, the animation does not appear to be linear, but rather like 'ease-in-out'.

Ideally I would like the linear animation to work the same as this CSS transition.

Can anybody see why it is not animating in a linear fashion?

Answer 1

After playing with this function more. I realise that the bezier control points are acting similar to magnets.

If I spread the control points so that they are positioned along a straight line with equal distance between, then the animation works as expected

{
    p0: new Vector(0,0), //Start point
    p1: new Vector(.333,.333), //Control point 1
    p2: new Vector(.666,.666), //Control point 2
    p3: new Vector(1,1)  //End point
}

Answer 2

I usually solve this using Catmull-Rom splines. Instead of using control points, you simply specify the two points between which you'd like to interpolate, as well as a "previous" point and a "next" point. If the 4 points all lie on the same line and are evenly spaced, the interpolation will be linear.

In the image above, there are four points p0, p1, p2 and p3. The following line of C++ code will interpolate between p1 and p2, where t is in the range [0...1]:

return p1 + 0.5*t*(p2-p0 + t*(2*p0-5*p1+4*p2-p3 + t*(3*(p1-p2)+p3-p0)));

You can interpolate any kind of value type, as long as the type supports addition and multiplication by a scalar.

If the values do not lie on a line, or are not spaced evenly, the catmull-rom interpolation will generate a smooth curve. Interpolation will be non-linear:

If there is no "previous" or "next" point (e.g. at the start or end of a series of curve segments), use the following equations:

p0 = 2 * p1 - p2;
p3 = 2 * p2 - p1;

Answer 3

Bezier curves are inherently for making smooth curves. Linear interpolation is simpler. To linearly interpolate two points, you can simply apply the following formula for time t in [0,1]:

interpolatedPoint = startPoint * (1 - t) + endPoint * t

When t=0, the interpolatedPoint is exactly equal to the startPoint. Similarly, when t=1, the interpolatedPoint is exactly equal to the endPoint. When t is in between 0 and 1, it is somewhere on the line between the two points.

I forked and modified your jsfiddle to clarify: http://jsfiddle.net/kevinAlbs/3em6br3b/1/

Answer 4

Why are you using bezier curves to do a linear interpolation? You could just use a linear interpolation to do linear interpolation and not use curves at all.

If the reason is that you want to have a more general purpose curve based interpolation system and you are trying to get it to do a linear interpolation for a specific usage case, there is a way.

Basically, the control points need to be points on a line. For instance the control points 0, 0.333, 0.666, 1.0 would give you a linear interpolation between 0 and 1, when using a cubic bezier curve to do it.

Again though, if you want linear interpolation, there is no reason to use a curve.