# HTML5 Bugs

In the spirit of yesterday’s post about HTML5’s canvas, I’ve got another post. This time, it’s a little buggy. 😄

Basically, this is one of the first programs I ever wrote, around a decade and a half ago now. Back then, I wrote it in QBasic (that was a long time ago) but today we have it in Javascript.

The idea is basically to start with a set of particles (bugs). Each frame, alter the x and y coordinate by either -1, 0, or 1 for 9 possible options. Over time, each bug will wander around, leaving a nice line behind it. There’s a lot more you can do with something like this, but at the moment all I wanted was to reimplement the original program.

Here’s the code:

jQuery(function($) { var c =$("#canvas")[0].getContext('2d');
c.lineWidth = 1;
c.fillStyle = "black";

var width = $("#canvas").width(); var height =$("#canvas").height();

var dotCount = 10;
var dots = new Array();

function roll(n) {
return Math.floor(Math.random() * n);
}

function randomHex() {
return roll(256).toString(16);
}

function randomColor() {
return "#" + randomHex() + randomHex() + randomHex();
}

function resetBugs() {
for (var i = 0; i < dotCount; i++) {
dots[i] = new Array(
Math.floor(roll(width)),
Math.floor(roll(height)),
randomColor()
);
}
c.clearRect(0, 0, width, height);
}
$("#resetBugs").click(resetBugs); resetBugs(); function update() { for (var i = 0; i < dotCount; i++) { c.fillStyle = dots[i][2]; c.fillRect(dots[i][0], dots[i][1], 1, 1); dots[i][0] = (dots[i][0] + Math.floor(Math.random() * 3) - 1 + width) % width; dots[i][1] = (dots[i][1] + Math.floor(Math.random() * 3) - 1 + height) % height; } setTimeout(update, 10); } update(); function doSave() { window.open(jQuery("#canvas")[0].toDataURL()); }$("#saveBugs").click(doSave);
});