HTML5 Bugs

2012-09-27

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);
});

Or you can download it here: html5-bugs source