particles using sprite sheet

by Nick Hulea

HTML

<script src="http://rectangleworld.com/demos/Modernizr/modernizr-2.0.6.js"></script>
<canvas id="canvasOne" width="480" height="480">
Your browser does not support HTML5 canvas.
</canvas>

JavaScript

/*
Dan Gries, www.rectangleworld.com.
*/

//window.addEventListener("load", windowLoadHandler, false);

//function windowLoadHandler() {
    canvasApp();
//}

function canvasSupport() {
    return Modernizr.canvas;
}

function canvasApp() {
    if (!canvasSupport()) {
        return;
    }

    var theCanvas = document.getElementById("canvasOne");
    var context = theCanvas.getContext("2d");

    var displayWidth;
    var displayHeight;
    var spriteSheetCanvas;
    var spriteSheetContext;
    var numStages;
    var numDots;
    var dotDiam;
    var dotRad;
    var firstDot;

    init();

    function init() {
        numStages = 60; //number of animation stages (frames) used for the evolving dots
        dotDiam = 60;
        numDots = 800;

        dotRad = Math.floor(dotDiam / 2);
        displayWidth = theCanvas.width;
        displayHeight = theCanvas.height;

        makeSpriteSheet();

        setDots();

        setInterval(update, 1000 / 24);
    }

    function setDots() {
        var lastDot;
        var sign;

        //we create a linked list of abstract objects which record positions, current stage, and change rates for each dot.

        for (var i = 0; i < numDots; i++) {

            if (Math.random() < 0.5) {
                sign = 1;
            } else {
                sign = -1;
            }

            var thisDot = {
                x: Math.floor(Math.random() * displayWidth),
                y: Math.floor(Math.random() * displayHeight),
                stage: Math.floor(Math.random() * numStages),
                increment: sign * (0.25 + 0.5 * Math.random())
            };
            if (i == 0) {
                firstDot = thisDot;
            } else {
                lastDot.next = thisDot; //linked list: using 'next' attribute to point to next dot in the list.
            }
            lastDot = thisDot;
        }

    }

    function makeSpriteSheet() {
        var colorAmt;
        var centerX;
        var centerY;
        var...