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.

I decided to use DropBox and TrueCrypt to setup a secure password file that was synchronized across all of my environments. The setup for both is dirt simple. I created a 10mb encrypted file called SAFEFILE in my Dropbox, then add a passwords.txt to it.

Then I evolved some code a friend threw my way for generating passwords. Creating a password and storing it directly in my passwords.txt file, and retrieving it is now a snap. The functions copy the password directly to the clipboard for easy pastin.

Adding my ~/.ssh, /etc/hosts, ~/.profile and a few other dotfiles to my Dropbox and symlinking them to my home directory keeps me standard across any environment I use.

Generate a random string 30 chars long for test.account:

jmooberry@local ~ : genpass 30 test.account
password added to passwords.txt as test.account
password copied to clipboard.
//  ole2iUmIGwDxtC9xVqPZiEr34ZJVwD

Grab the password for test.account:

jmooberry@local ~ : getpass test
password for (test.account) copied to clipboard.
// ole2iUmIGwDxtC9xVqPZiEr34ZJVwD

.profile helpers functions:

# password generator
# Usage: genpass 30 test.account.name
function genpass() {
  if [ $# == 0 ]; then
      length=30
  else
      length=$1
  fi
  pass=$(< /dev/random strings | perl -pe 's/\W//g;' | head -c$length)
  echo -n $pass | pbcopy
  if [ $# == 2 ]; then
    echo -en "\n$2\t$pass" >> /Volumes/SAFEFILE/passwords.txt
    echo "password added to passwords.txt as $2"
  fi
  echo "password copied to clipboard."
}

# password grabber
# Usage: getpass test.account.name
function getpass() {
  pass=$(grep $1 /Volumes/SAFEFILE/passwords.txt | perl -pe 's/.+?(\w+)$/$1/;')
  name=$(grep $1 /Volumes/SAFEFILE/passwords.txt | perl -pe 's/(.+?)\s+\w+$/$1/;')
  echo -n $pass | pbcopy
  echo "password for ($name) copied to clipboard."
}

# it's important.
if [ ! -d "/Volumes/SAFEFILE" ]; then
  echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
  echo "TRUECRYPT DIRECTORY NOT MOUNTED!!!"
  echo "!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"
fi

I recommend setting up public key authentication for ease of use.

# warm feet
function socks() {
  networksetup -setsocksfirewallproxy AirPort localhost 9999
  ssh -ND 9999 -C username@domain
  networksetup -setsocksfirewallproxystate AirPort off
}

(One caveat: If you happen to close the window of your terminal without hitting <CTRL>-C first, it will not disable the socks proxy.)

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.

A friend was online at the time. I remembered he had a very gentle way of dealing with other programmers. He happens to be very smart and, as such, was in a position to review/teach most of the people at the company we worked at together. I asked him how to do it:

me:

hey i have a question. how do you refactor someone else’s code without being “that jerk who’s refactoring my code”? is it possible?

him:

That is very hard. When I approach that issue I always remember a quotation even though I forgot who said it: “To successfully critique something you must first learn to love it.”

Also I’m probably rewriting the quote somehow

If you approach someone about refactoring their code and show them that you’ve taken the time to understand why their code was written the way it was, or, if it’s super crappy, why they were in a compressed time schedule while writing it, or why it would help them to work with you to learn it better, etc. etc…. basically if you approach them with respect and compassion, and they get all pissy, at that point it’s their fault

But the best thing is to communicate period, often times I’ve seen people shrink away from communicating because they don’t want to confront the other person, and they end up rewriting the code without consulting with the original coder, or, worse, not dealing with the issue and leaving the bad code to rot. Confrontation, even if it pisses the person off, is always better than doing nothing or doing something around the person

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

A few noteworthy changes.

1. PDO now throws exceptions by default. The standard default in PDO is to fail silently. This was unintended and thanks to @jimplush for reporting it. Be sure to try/catch your code appropriately.
2. Db::execute() method added. All of the Db methods are publicly accessible and this method is for executing sql that doesn’t require a fetch (inserts, updates, deletes, etc). The requirement for this method became clear after turning on exceptions in PDO.
3. Better docs. The docs in the README have been updated and reformatted.

DumbledORM received a lot of great feedback and attention after it’s release. Thank you for all the positive response to this little ORM. I hope it continues to grow in use and remains small in size.

Download DumbledORM and get started here:
https://github.com/jasonmoo/DumbledORM

MacPorts. If you’re not already familiar with it, I recommend reading up before proceeding.

Since I already have MySQL set up and configured I won’t bother covering it here. It’s pretty well documented around the webs. The main focus here is going to be getting nginx installed and setting up PHP as a service to it with an emphasis on local development. No need to tweak this for production on my Macbook Pro.

PHP 5.3.3 introduced PHP-FPM (FastCGI Process Manager) to the codebase. Building it requires a few extra config flags and generates a php-fpm binary. The binary will manage spawning cgi processes and handling the FastCGI passthru from nginx. Currently MacPorts does not have an option to build PHP with PHP-FPM. After some hacking on the current Portfile I arrived at a working solution. It includes the correct flags, a dependency on libevent, and a startup item.

First things first.

sudo port selfupdate

# recommended but probably not a requirement
sudo port upgrade outdated
sudo port uninstall inactive

(If you’ve already got the php5 package installed, uninstall it and it’s cohorts to ensure a clean install process going forward.)

This is a bit of a hack and there’s probably a better way, like submitting a proper patch to MacPorts, but this will get the job done for today.

# replace this file with the Portfile from the gist below
/opt/local/var/macports/sources/rsync.macports.org/release/ports/lang/php5/Portfile

https://gist.github.com/724449

Then run the regular port install.

sudo port install nginx php5 +fastcgi php5-apc php5-mysql +mysqlnd

Next we’ll need to set up the configs. There’s two basic configs that require attention. First is the nginx config. Since this is just for a local development env we can be pretty lean on what we need.

# /opt/local/etc/nginx/nginx.conf

worker_processes  1;

error_log  /var/log/nginx/error.log;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile           on;
    keepalive_timeout  65;

    server {
      listen 80;
      server_name   ~^local\.(?.+?)\.com$;
      root  /Users/jason/Sites/$site/web;
      index  index.php index.html;

      location = /favicon.ico {
        log_not_found off;
      }

      location ~ \.php$ {
         fastcgi_pass   unix:/tmp/php-fpm.sock;
         fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
         include        fastcgi_params;
      }
    }
}

This is the config that I’m currently using as my generic site config. It has a few nice features. First the server name is matched against a regular expression. So any site that matches local.xxxx.com will be parsed and use the xxxx as a sub-directory in my Sites folder. This is nice. So I only need to create a new directory and add my local.xxxx.com domain to /etc/hosts pointed at 127.0.0.1 and I can immediately begin developing. Gone are the days of creating a new v-hosts file, enabling it, and restarting apache every time I want to play with a new site’s code. The other nicety here is we’re using a unix socket for the fastcgi passthru. This is unnoticeably faster on my Mac, but again frees up the need to be concerned with another open port on my system.

It’s worth noting that any fastcgi_param that you define in this config is available within PHP as a $_SERVER variable.

The second config is the FPM config. Copy /opt/local/etc/php-fpm.conf.default to /opt/local/etc/php-fpm.conf and open it up. Here are the important ones to modify:

pid = /opt/local/var/run/php-fpm.pid
error_log = /opt/local/var/log/php-fpm.log
listen = /tmp/php-fpm.sock
listen.owner = _www
listen.group = _www
pm.max_children = 1
pm.start_servers = 1
pm.min_spare_servers = 1
pm.max_spare_servers = 1
pm.max_requests = 500
slowlog = /opt/local/var/log/php-fpm.log.slow

It’s pretty straight-forward. Lean cus we can. Save and continue.

At this point we’ve got all the pieces in place. We just need a way to start/stop/restart nginx and FPM. I looked for a cleaner way to accomplish this but in the end it came down to a handful of aliases. Add these to your ~/.profile.

# nginx
alias nginx_start='sudo launchctl load /Library/LaunchDaemons/org.macports.nginx.plist'
alias nginx_stop='sudo launchctl unload /Library/LaunchDaemons/org.macports.nginx.plist'
alias nginx_restart='nginx_stop; nginx_start;' 

# php-fpm
alias fpm_start='sudo launchctl load /Library/LaunchDaemons/org.macports.php-fpm.plist'
alias fpm_stop='sudo launchctl unload /Library/LaunchDaemons/org.macports.php-fpm.plist'
alias fpm_restart='fpm_stop; fpm_start'

Reopen the Terminal window to enable the new aliases. Start or restart nginx and FPM as the case may be.

At this point you should be able to create a site directory, add a domain to /etc/hosts and drop in an index.php with phpinfo(); to verify that PHP is working.

Hopefully this will be of some use to other aspiring MEMP devs out there. I found it intensely fun.

If you’re able to finish it, you can share your score through the Facebook and Twitter buttons.

I sincerely hope you enjoy my simple little tunr.

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.