A little while back I had an idea to use Cellular Automata rules to generate random groupings of xy coordinates. This worked well as a way to generate a rock pattern for my canvas drawing. I even developed a little tool to help me refine the parameters to use that produced the pattern I wanted.

I wanted to expand on that approach to make something more abstract and vizzy. And animation seemed like the next step. So I built another tool that allowed me to play around with animating generated CA sets of cells from one state to the next.

It lets you embed js into the callbacks for the driving parameters and even saves your settings into the hash tag so you can bookmark settings that you like and link to them.

So I’m publishing them both here for you to play with.

The second drawing was inspired by a recent campout in Death Valley. The contrast of the blue sky, desert floor, and red coleman tent leave a strong imprint on me every time.

The end result should resemble the picture on the right. The page load time is a few seconds on my MBP and it looks quite a lot better in Chrome. The canvas size is determined at load so if you have the horses, full-screen your browser.

I say resemble because the drawing is generated using canvas and cellular automata, and derived from a random data set every time it is rendered.

One of the difficulties of drawing a picture of landscape is the seemingly random variations found in it. Not totally random because each element interacts and affects the others. The stone pattern on the drawing was the first thing I set out to solve.

Initially I was hoping to hit on some semi-random scatter pattern using PHI and a lot of trial and error. This produced a fairly uniform random scatter of stones. What I wanted to draw resembled clumps more than anything.

While scatter patterning away I happened to over hear a gentlemen at the coffee shop mentioning cellular automata and emergent systems as they explain the state of the universe. It’s kindof a hippie coffee shop but this guy is clearly in a league of his own. At first I dismissed it and then the idea grew on me that I could generate these clumps with CA. I had used CA for Conway’s game of life and a few other toy systems to experiment in the past and it was always fun.

So I generated a map of pixels that were randomly turned on. I weighted the initial data set to be very switched on (baby!). My reasoning was that I wanted grouping to occur within a few mutations and a seriously overcrowded starting set should do just that. The size of the canvas element was prohibitively large so I added a resolution factor. It causes striations in the starting set view but it doesn’t affect the CA mutations.

// set up psuedo random cell set
for (var i=0; i < total; i++) {
  if (Math.random() > .2) {
    cells[i] = 1;
  }
}

with resolution factor:

Let’s grind this set down with Conway’s game of life rules and see what comes out:

// mutate m number of times
while (m--) {
  var next = {};
  for (p in cells) { next[p] = 1; }

  for (var i=0; i < total; i++) {
    var above = i-w < 0 ? i-w+total : i-w,  // wrap
      below = i+w > total ? i+w-total : i+w, // wrap
      neighbors = [above-1,above,above+1,i-1,i+1,below-1,below,below+1],
      active = 0,
      j = neighbors.length-1;

    while (j--) {
      active += (typeof cells[neighbors[j]] === 'number' && cells[neighbors[j]] === 1)|0;
    }
    // rule check
    // Any dead cell with exactly three live neighbours becomes a live cell.
    if (active === 3 && typeof cells[i] === 'undefined') {
      next[i] = 1;
    }
    // Any live cell with two or three live neighbours lives on to the next generation.
    // Any live cell with fewer than two live neighbours dies, as if caused by underpopulation.
    // Any live cell with more than three live neighbours dies, as if by overcrowding.
    else if (active < 2 || active > 3) {
      delete next[i];
    }
  }
  var cells = {};
  for (p in next) { cells[p] = 1; }
}

As you can see the first pass cleared out a bunch of em. The resolution factor has spaced the pixels apart but you can see the basics of game of life players emerging. By pass 3 it’s in a much more spare state but still larger groups than I want. By pass 8 the groups have moved away from each other a bit more and formed a decent pattern. Since this pattern is generated fresh from a random data set every time, we just need something that’s right most of the time.

What I like about this approach is that it gives some credence to the hippie coffee shop guy’s words. I don’t think the world runs on CA rules, but iterative, interactive rules seem to give rise to interesting “random” patterns.

The dataset produced from these mutations can now be used to render a rock pattern with a little magic for the coloring/size.

for (var i in cells) {
  c.beginPath();
  var x = (i*r)%w,
    y = (i*r)/w|0;
  c.strokeStyle = (['rgba(116,116,108,.7);','rgba(87,93,55,.9);'])[i%15===0|0];
  c.lineWidth = Math.max(30,50*(y/h));
  c.arc(x,y,3,0,360,false);
  c.stroke();
}

tl dr;

Using Cellular Automata rules to mutate random datasets can produce interesting and unique landscape patterns. This approach was super useful for me in drawing an impressionist picture of my favorite camping spot.

I wrote a simple tool to experiment with different factors for generating these patterns.

And here’s the picture that is generated from random CA patterns.

All this canvas exposure and seeing how @darkgoyle does his maths got me in a mood to experiment! So I played around with implementing variations on a Fibonacci graph and many other different oddities involving timestamps and Phi. The one I liked the most was pretty simple. It is a rotation at 160 degrees with a 10px increment on the line length at each iteration. Here’s what it produces:

I think it’s rad in a simple Trony sortof way. Here’s the code to generate it:

// get the canvas
var canvas = document.getElementsByTagName('canvas')[0],
  c = canvas.getContext('2d'),
  center = { x: canvas.width/2, y: canvas.height/2 };

// setup starting state
c.translate(center.x,center.y);

// base styles
c.lineCap = 'round';
c.lineWidth = 2;
c.strokeStyle = 'rgba(0,0,255,.7)';

var f = 1;
while (f < 500) {
  c.beginPath();
  c.moveTo(0,0);
  c.rotate(160*(Math.PI/180)); // convert degrees to radians
  c.lineTo(f,f);
  c.translate(f,f);
  c.stroke();
  f += 10;
}

What followed was a journey through two different types of oauth implementations, several nodejs modules and many greps through codebases to figure out how and why this worked or didn’t. Since much of this will be useful to some other poor sap building with the same tools, I’ll outline here what I did and how it all works together.

Javascript, front to back

Animation
Building the game itself took some time but was pretty straight-forward. jQuery is extremely useful for binding events and such, but I tried to use bare js inside the loops for efficiency. Since I’m not using canvas here, just manipulating positions of dom objects, it’s fairly processor intensive. With that said Chrome and Safari handle it with ease. Firefox will make your processor fan spin up.

The core of the animation stuff is variations on this simple recursive timeout:

block = $('#block');
move_timeout = null;
(function send_it_down() {
  move_timeout = setTimeout(function() {
    block.css('top',block.css('top')+1);
    send_it_down();
  },30);
})();
// to stop animation
// clearTimeout(move_timeout);

jQuery has some nice animation functionality but it’s all based on a fixed time of execution in which each step’s timeout is based on the amount of steps to execute and the total time for the animation to run. Rolling my own animation code allowed me to control an infinitely executing constant speed animation.

The jQuery api docs and w3schools js ref got me through anything tricky and Wolframs Mathworld was the key to the color game (intially it was a spirograph pattern, then a simpler nephroid, finally a circle).

OAuth
First thing’s first. What is OAuth and how do I use it? In order to make sharing your score easy I had to write an app that interfaced with both Twitter and Facebook’s apis. I heard Twitter was simpler and their docs were better so I started there. A link in the twitter docs to this Oauth Guide made for an easy introduction. Twitter is currently using an OAuth 1.0 implementation that is pretty true to what you would expect after reading the guide. The only difference was that Twitter seems to store your callback url for you on your request token call so you don’t need to supply it on your auth token call. Facebook has an OAuth 2.0 implementation that requires ssl and has fewer steps. The only catch on Facebook is they’re sticklers for your callback url. It must be present in both your authorize call as well as your auth token call and it must match exactly.

Now that I know what OAuth is and have a basic understanding of how to interface with Twitter and Facebook’s apis, I searched out an OAuth module for nodejs.

Nodejs
I found some buzz around Ciaranj’s node-oauth and found it to a pretty good wrapper for the functionality I would need. It’s lacking a way to make POST requrests in the OAuth2 code, but writing my own wasn’t too tough. I had my eye on Expressjs as a framework for building http handlers for this app. It’s a sweet little implementation with a very simple premise and good docs. For my datastore I decided to take another crack at MongoDB. I’ve built PHP apps that interfaced with Mongo but nothing with nodejs yet.

So far Nodejs has been a great tool for ad hoc api clients and prototypes. This is the first server app I’ve written with nodejs. A few things I noticed that were unexpected. One, nesting callbacks can become tedious. This was especially true with the MongoDB module. I don’t see any way to get around it, but it’s ugly. The other thing was that error handling with callbacks is much different than exception handling within a single thread of execution. Wrap anything with a callback in a try/catch and you’ll see it’s useless. So becoming expectant on an onError() method for all of the connections is the norm.

Other challenges with nodejs included: since my nodejs app is listening on a different port than my html pages are being served from, I had to do some extra redirection at the end of my OAuth process so that my final landing page of my popup would be able to call back to the main window and trigger a success event. And any exception that I didn’t catch takes down my app completely.

With that aside I was able to craft a sweet little app in less than a couple hundred lines that is fast and easy. I can manage the sharing process with a couple ajax calls and a bind to my custom success event.

nDistro
Installing nodejs modules can be done a few different ways. Initially I was using npm. It worked ok but since it installs to a central npm repository, and nodejs and it’s modules version so quickly, it made more sense to use nDistro. It allows you to manage your nodejs versions as well as your module versions from a simple config file. This is super useful since I can literally break my app with the wrong version.

I found one oddity using nDistro to install MongoDB’s node module. If you compile the C version of the BSON parser and intend to use it with your code, it will not be available. The reason for this is that nDistro symlinks each module to a common lib/node directory. There is a relative path that is broken in one of mongodb’s require statements for including the compiled BSON parser. I was able to fix this by setting up a symlink in the lib directory. Another issue with the MongoDB module is that in order to compile the native BSON parser you need to have a full nodejs install with the node-waf binary in an available path. The node binary installed by nDistro is not sufficient. After all of this I had errors compiling BSON on my vps that were not on my mac.. The js parser will work fine given the size of my records.

MongoDB
MongoDB showed up on my radar over a year ago and since then it’s gotten easier to use and more reliable. The 10gen developers have put a lot of effort into building good libraries in many languages to interface with MongoDB. With the postmortem after FourSquare’s recent outage, I got a little window into the scale that mongo seems to be handling well. FTA the outage was due to overactivity in one of the shards that was running too close to memory capacity. Given that FourSquare is running multiple 66GB RAM EC2 mongodbs and they just hit their 200 millionth checkin I am confident that my 2 dozen friend’s tweet/post counts will be handled with grace and speed.

Installing MongoDB is pretty much a matter of unzipping a tgz and running mongod from the command line.

Putting it all together

This post has been short on code snippets cus I’m hosting the entire codebase at the Github. This is my first run at a nodejs app with mongo running live and I am curious to see how stable everything is. My new linode server is purring like a kitten with anything I throw at it. Hopefully the tunr app continues the trend.

Oh and you can play tunr here.

I’ve been on a recent tear through javascript, browser and server side (node.js is just fun).  So I set out to build a little game of life with js and html.  jQuery aided with some of the lifting too.  :)

After a couple afternoons Geoff was born.  He’s a simple lad.  Just gives you the basics, but still fun to play with non-the-less.  I have only tested him on Chrome, FF, and Safari.  Interestingly this is a great way to see how fast your js engine is.  Chrome handles it the best on my laptop.  FF the worst.

A little bit about the code:

jQuery’s live() event handling is perfect for this situation.  Since I opted to turn a crap-ton of b tags into large pixels of my game grid, I needed to bind some mouseover/mouseout and click events to each item.  There is no need to do this to each of the ~2k tags.  Instead, using live(), jQuery will bind to the document and as events bubble up, check to see if they’re relevant to my event handlers.  This cuts memory usage as well as bind time.

Recursion with setTimeout().  Initially when I built this I was using setInterval() to fire my life function and advance Geoff another step.  On Chrome it was fast enough that I didn’t notice any problems.  But when I tested in Safari and FF, I found that I was “dropping frames” when I cranked up the speed.  This had weird effects.  So I used a recursive function that pauses at the end of it’s execution.  This will ensure that I don’t lose an iteration, while giving reasonable control over the speed of execution.

Pseudo-casting as integer.  This is a hack that I picked up from James Padolsey’s blog.  For my purposes it’s a nice way to take a boolean expression and convert it into a 0 or 1.

// sum up the active neighbors
active += ~~(typeof current[neighbors[j]] === 'number' && current[neighbors[j]] === 1);

Best practices.  I’ve violated them .. a bit.  :)

Well I hope you have fun playing.  I tried drawing moo and it lived a healthy and rich life.  ;)

Enjoy Geoff!