Canvas API - Moving Ball Demo

A crazy ball demo built with the 2d Canvas API, using Daniel O'Shea's code on github and then manipulated with. Have a look at the code below and try having a play around for yourself.

Canvas API Demo Code Snippet

1. HTML

<div id="canvas">
<canvas id="demo-canvas" width="600" height="400"></canvas>
</div>

2. JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
        var scene = {
    interval: null,
    time: 0
}
$(document).ready(function () {
    var canvas = document.getElementById("demo-canvas");
    var context = canvas.getContext("2d");

    scene.interval = setInterval(function () {
        animate(canvas, context)
    }, 30);

});
var sceneElements = {
    ball1: {
        xCoord: 50,
        yCoord: 50,
        xDest: 300,
        yDest: 200
    },
    ball2: {
        xCoord: 50,
        yCoord: 200,
        xDest: 300,
        yDest: 200
    },
    ball3: {
        xCoord: 150,
        yCoord: 350,
        xDest: 300,
        yDest: 200
    },
    ball4: {
        xCoord: 450,
        yCoord: 350,
        xDest: 300,
        yDest: 200
    },
    ball5: {
        xCoord: 550,
        yCoord: 200,
        xDest: 300,
        yDest: 200
    },
    ball6: {
        xCoord: 550,
        yCoord: 50,
        xDest: 300,
        yDest: 200
    }
}
function animate(canvas, context) {
    var duration = 25;

    context.clearRect(0, 0, canvas.width, canvas.height);
    context.save();
    context.strokeStyle = 'rgba(0,153,255,1)';
    context.fillStyle = "#FF3300";

    for (element_name in sceneElements) {
        if (element_name != undefined) {
            var element = sceneElements[element_name];
            var new_x = easing.quart.easeInOut(scene.time, element.xCoord, (element.xDest - element.xCoord), duration);
            var new_y = easing.quart.easeInOut(scene.time, element.yCoord, (element.yDest - element.yCoord), duration);

            drawCircle(context, new_x, new_y, 10);

            if (scene.time >= duration) {
                oldDest = element.xDest;
                element.xDest = element.xCoord;
                element.xCoord = oldDest;

                oldDest = element.yDest;
                element.yDest = element.yCoord;
                element.yCoord = oldDest;
            }
        }
    }
    context.restore();
    scene.time++;
    if (scene.time > duration) {
        scene.time = 0;
    }
}
function drawCircle(context, x, y, radius) {
    context.beginPath();
    context.arc(x, y, radius, 0, Math.PI * 2, false);
    context.closePath();
    context.fill();
    context.stroke();
}
var easing = {
    quart: {
        easeInOut: function (time, start, change, duration) {
            if ((time /= duration / 2) < 1) return change / 2 * time * time * time * time + start;
            return -change / 2 * ((time -= 2) * time * time * time - 2) + start;
        }
    }
};
</script>