PixelWorm

An adjacent cell is colored each iteration, thus The Mighty PixelWorm leaves its trail of rainbow poo.

by Dean Panayotov

HTML

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

CSS

body {
    background-color: #999999;
}
#canvas {
    margin: 10px;
    padding: 0px;
}

JavaScript

var canvas = document.getElementById('canvas');
var c = canvas.getContext("2d");
c.fillStyle = "#999999";
c.fillRect(0, 0, canvas.width, canvas.height);

var interval = 100;
var columnSize = 40;
var cellSize = canvas.width / columnSize;
var iterations = 10;

var index = iterations;
var r = [];
var g = [];
var b = [];

var x = Math.round(Math.random() * columnSize);
var y = Math.round(Math.random() * columnSize);

var timer1 = setInterval(clear, 60 * 1000);
var timer2 = setInterval(draw, interval / iterations);

function saturate() {
    updateCell();
    var pix = c.getImageData(x, y, 1, 1).data;

    var oldR = pix[0];
    var oldG = pix[1];
    var oldB = pix[2];

    var newR = Math.round(Math.random() * 255);
    var newG = Math.round(Math.random() * 255);
    var newB = Math.round(Math.random() * 255);

    var stepR = (newR - oldR) / iterations;
    var stepG = (newG - oldG) / iterations;
    var stepB = (newB - oldB) / iterations;

    var i;
    for (i = 0; i < iterations; i++) {
        r[i] = oldR + stepR * i;
        g[i] = oldG + stepG * i;
        b[i] = oldB + stepB * i;
    }

    index = 0;
}

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) {
            y = columnSize - 2;
            return;
        }
        if (Math.round(Math.random()) == 1) y++;
        else y--;
    }
}

function draw() {
    if (index == iterations) {
        saturate();
        index = 0;
    }
    c.fillStyle = "rgb(" + Math.round(r[index]) + ", " + Math.round(g[index]) + ", " + Math.round(b[index]) + ")";
    c.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
    index++;
}

function clear() {
 ...