PixelWorm 2.2

An adjacent cell is colored each iteration, thus The Mighty PixelWorm leaves its trail of rainbow poo. Moved from arrays to objects. click on canvas - add worm; double click on canvas - clear;

by Dean Panayotov

HTML

<body>
    <canvas id="canvas" width="300" height="300">lel</canvas>
     <h2 unselectable="on">Single click spawns a new worm.<br>Double click clears the screen.</h2>

</body>

CSS

body {
    background-color: #000000;
    text-align:center;
    vertical-align: middle;
}
#canvas {
    margin: 10px;
    padding: 0px;
}
h2 {
    font: 16px Tahoma, Helvetica, Arial, Sans-Serif;
    text-align: center;
    color: #EEEEEE;
    text-shadow: 0px 2px 3px #555;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

JavaScript

var canvas = document.getElementById('canvas');
var c = canvas.getContext("2d");

c.fillStyle = "#000000";
c.fillRect(0, 0, canvas.width, canvas.height);

canvas.addEventListener('click', startWorm, false);
canvas.addEventListener('dblclick', clear, false);

///// CONTROLS ///////////////////////////////////////////////
/**                                                         //
 /** total time for a full cell color transition            */
var interval = 100;                                         //
/** number of columns/rows                                  */
var gridSize = 30;                                          //
/** side of a cell in pixels                                */
var cellSize = canvas.width / gridSize;                     //
/** number of iterations for a full cell color transition   */
var iterations = 10;                                        //
/** 0-255; ~90 and below keeps the adjacent colors relative */
var colorRange = 80;                                        //
/** max number of active worms                              */
var maxWorms = 10;                                          //

var worms = [];
pushWorm([0, 0, 0], getRandomInt(gridSize), getRandomInt(gridSize));

/** worm object */
function Worm(pixel, x, y) {
    this.index = iterations;
    this.pixel = [];
    this.pixel[0] = pixel[0];
    this.pixel[1] = pixel[1];
    this.pixel[2] = pixel[2];
    this.pixelStep = [0, 0, 0];
    this.x = x;
    this.y = y;

    this.start = function () {
        //TODO: there must be a more civilized way to achieve this...
        this.timer = setInterval(redirect, (interval / iterations), this);

        function redirect(w) {
            w.draw();
        }
    };

    this.stop = function () {
        clearInterval(this.timer);
    };

    /** paint next iteration of color to the current cell */
    this.draw = function () {
        if (this.index == iterations) {
            this.colorize();
            this.index = 0;
       ...