html5 canvas - animating an object following a path

Question

I\'m a bit new to canvas and such so forgive if it\'s a trivial question.

I\'d like to be able to animate an object following a path (defined as bezier path) but I\'m no

Answer 1

So, here is the verbose version:

t being any number between 0 and 1 representing time; the p0, p1, p2, p3 objects are the start point, the 1st control point, the 2nd control point an the end point respectively:

var at = 1 - t;
var green1x = p0.x * t + p1.x * at;
var green1y = p0.y * t + p1.y * at;
var green2x = p1.x * t + p2.x * at;
var green2y = p1.y * t + p2.y * at;
var green3x = p2.x * t + p3.x * at;
var green3y = p2.y * t + p3.y * at;
var blue1x = green1x * t + green2x * at;
var blue1y = green1y * t + green2y * at;
var blue2x = green2x * t + green3x * at;
var blue2y = green2y * t + green3y * at;
var finalx = blue1x * t + blue2x * at;
var finaly = blue1y * t + blue2y * at;

Here is a ball using following a path in JSfiddle

The names of the variables come from this gif wich is the best explication for bezier curves: http://en.wikipedia.org/wiki/File:Bezier_3_big.gif

A short version of the code, inside a function ready to copy/paste:

var calcBezierPoint = function (t, p0, p1, p2, p3) {
    var data = [p0, p1, p2, p3];
    var at = 1 - t;
    for (var i = 1; i < data.length; i++) {
        for (var k = 0; k < data.length - i; k++) {
            data[k] = {
                x: data[k].x * at + data[k + 1].x * t,
                y: data[k].y * at + data[k + 1].y * t
            };
        }
    }
    return data[0];
};

---

Related stuff:

• http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html
• http://13thparallel.com/archive/bezier-curves/
• http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js
• http://www.youtube.com/watch?v=hUCT4b4wa-8