PixelWorm 2.0

An adjacent cell is colored each iteration, thus The Mighty PixelWorm leaves its trail of rainbow poo. Now has more of a watercolor look (next color isn't completely random). double click on canvas - clear;

by Dean Panayotov

HTML

<body>
    <canvas id="canvas" width="300" height="300">lel</canvas>
</body>

CSS

body {
    background-color: #000000;
    text-align:center;
    vertical-align: middle;
}
#canvas {
    margin: 10px;
    padding: 0px;
}

JavaScript

var canvas = document.getElementById('canvas');
var c = canvas.getContext("2d");
c.fillStyle = "#000000";
c.fillRect(0, 0, canvas.width, canvas.height);
canvas.addEventListener('dblclick', clear, false);
/** total time for a full cell color transition */
var interval = 100;
/** number of columns/rows */
var columnSize = 30;
/** side of a cell in pixels */
var cellSize = canvas.width / columnSize;
/** 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;

var index = iterations;

/** cell color at beginning of coloring */
var pixel = [0, 0, 0];
var pixelStep = [0, 0, 0];

/** coordinates of current cell */
var x = getRandomInt(columnSize);
var y = getRandomInt(columnSize);

/** loop entry point*/
var timer = setInterval(draw, interval / iterations);

/** pick a new cell and pick a new color */
function colorize() {

    updateCell();
    var oldPixel = [];
    oldPixel[0] = pixel[0] + pixelStep[0] * (iterations - 1);
    oldPixel[1] = pixel[1] + pixelStep[1] * (iterations - 1);
    oldPixel[2] = pixel[2] + pixelStep[2] * (iterations - 1);

    pixel = c.getImageData(x * cellSize, y * cellSize, 1, 1).data;

    pixelStep[0] = (nextColor255(oldPixel[0], colorRange) - pixel[0]) / iterations;
    pixelStep[1] = (nextColor255(oldPixel[1], colorRange) - pixel[1]) / iterations;
    pixelStep[2] = (nextColor255(oldPixel[2], colorRange) - pixel[2]) / iterations;

    index = 0;
}

/** randomly select an adjacent cell (with border checks) */
function updateCell() {
    if (Math.round(Math.random()) == 1) {
        if (x === 0) {
            x = 1;
            return;
        }
        if (x == columnSize - 1) {
            x = columnSize - 2;
            return;
        }
        if (Math.round(Math.random()) == 1) x++;
        else x--;

    } else {
        if (y === 0) {
            y = 1;
            return;
        }
        if (y == columnSize - 1) {
           ...