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;
}

Without knowing any math, it seems like the speed is calculated based on the line length. The blue line is longer, so the movement speeds up. Green is shortest and movement appears slower for that one. Can you make the blue curve shorter? — ggorlen

fang fang · Accepted Answer · 2020-07-04T07:00:50

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.

Inconsistent Speed When Animating Along a Cubic Bezier Curve

1 Answers