title: Inconsistent Speed When Animating Along a Cubic Bezier Curve
body: <p>I'm using the following example <a href="http://jsfiddle.net/m1erickson/LumMX/" rel="nofollow noreferrer">http://jsfiddle.net/m1erickson/LumMX/</a> 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?</p>
  <p><a href="https://i.stack.imgur.com/mWAWM.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mWAWM.jpg" alt="The blue curve animates faster than the other curves" /></a></p>
  <p>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:</p>
  <pre><code>// 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;
  }
  </code></pre>