PixelWorm 2.1

An adjacent cell is colored each iteration, thus The Mighty PixelWorm leaves its trail of rainbow poo. Now supports multiple worms. 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);

/** 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 maxWorms = 10;

var index = [];
index[0] = iterations;

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

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

/** loop entry point*/
var timer = [];
timer[0] = setInterval(function () {
    draw(0);
}, interval / iterations);

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

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

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

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

    index[id] = 0;
}

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