Inconsistent Speed When Animating Along a Cubic Bezier Curve

Question

I'm using the following example http://jsfiddle.net/m1erickson/LumMX/ to animate an object along a set of Bezier curves. For some reason, the cubic Bezier curve (in blue) makes the animation speed up slightly. What I'm trying to accomplish is a smooth consistent animation across all curves at the same speed. Why does the animation along the blue curve speed up and how do I fix this?

The linked example uses this equation to calculate a point along a cubic Bezier curve at a specific time (percent). I suspect this is what I need to correct, but I'm not strong enough in math to do it:

// cubic bezier percent is 0-1
function getCubicBezierXYatPercent(startPt, controlPt1, controlPt2, endPt, percent) {
    var x = CubicN(percent, startPt.x, controlPt1.x, controlPt2.x, endPt.x);
    var y = CubicN(percent, startPt.y, controlPt1.y, controlPt2.y, endPt.y);
    return ({
        x: x,
        y: y
    });
}

// cubic helper formula at percent distance
function CubicN(pct, a, b, c, d) {
    var t2 = pct * pct;
    var t3 = t2 * pct;
    return a + (-a * 3 + pct * (3 * a - a * pct)) * pct + (3 * b + pct * (-6 * b + b * 3 * pct)) * pct + (c * 3 - c * 3 * pct) * t2 + d * t3;
}

Answer 1

Within the fixed time spent in redrawing the curve (and the rectangle) 100 times, the rectangle has to traverse from the curve's start to the end. Since the blue curve is longer, the rectangle will traverse a longer distance within the same time as it traverse the other shorter curves. Therefore, the rectangle appears to move faster on the blue curve than on other curves.

To make the rectangle move at a constant speed, you will have to redraw fewer times for shorter curves and more times for longer curves. This means in your codes, you can make the the absolute value of 'direction' smaller than 1.0 for longer curves and bigger for shorter curves.