This isn’t what you might call an experiment in the usual sense. The code does not explore any cutting edge web technology. What it does do is demonstrate rock solid object oriented javascript.

Electronic Life is a javascript exercise from the incredible book Eloquent JavaScript by Marijn Haverbeke. I recently decided to get back to first principles with javascript. This is a book that I come back to time after time. It has always taught me something new, even after gaining a lot of experience writing javascript.

Here is a short sample of some code from the exercise.

//// Critter Class
var directions = {
  "n":  new Vector( 0, -1),
  "ne": new Vector( 1, -1),
  "e":  new Vector( 1,  0),
  "se": new Vector( 1,  1),
  "s":  new Vector( 0,  1),
  "sw": new Vector(-1,  1),
  "w":  new Vector(-1,  0),
  "nw": new Vector(-1, -1)

var directionNames = "n ne e se s sw w nw".split(" ");

function BouncingCritter() {
  this.direction = randomElement(directionNames);

BouncingCritter.prototype.act = function(view) {
  if (view.look(this.direction) != " ") {
    this.direction = view.find(" ") || "s";
  return { type: "move", direction: this.direction };

There is quite a bit missing from this snippet but hopefully you can get a feel for the style of the code. Responsibilities are organized into “classes” (which are simply javascript functions with capitalized names). When an object is needed it is invoked with the new keyword, as in new Vector(0, -1).

The BouncingCritter class is defined and given one property: direction. To add behaviour a function is attached to the prototype. For a much better explanation of why things are done this way check out the exercise in full.

The silly bouncing critters simply look for a random empty space nearby using view.find(). If they can’t find one they head south. They aren’t terribly smart.

I highly recommend the book and this exercise for anyone trying to get their heads around object oriented javascript.

This exercise sparked my interest in exploring natural simulations in the browser. It turns out I’m not the only one interested in this. I found an incredibly fun looking library that provides tools for doing this easily. It’s called FloraJS. If Electronic Life seems fun, just wait until you see what FloraJS can do!

Further Reading

View Live View On Github