Adiós Australia y Hola Mexico

Delicious card by Indigo Hanlee.

Subdivision and Subtraction

Subdivision and subtraction algorithms.

Spider Webs


Some rough work on some water simulation, supposed to be evocative of water not true to life.

More self portraits

Still trying to loosen up a bit.

Super Future You

Some gifs from a work we did at Science Works Think Ahead. Giant insect legs are obviously a common dream.

Kinect gifs

Had some fun playing around with the Kinect, I wanted to add some movement to my landing page and gifs are sweet. I made a few and pick one at random on page load, hovering activates the animation.

The code is quite simple. I generate a mesh of some resolution, for each vertices x,y position, I get the depth data from kinect and extude the mesh a bit.

I thought this one was pretty funny.


ZSH/Prezto git dirty prompt info

Zsh is fun, Prezto makes it even more fun. You should check it out if you haven't.

My prompt includes some git information when relevant. Things like how long since the last commit, the current branch, whether I've added or modified files. I also like to have two symbols, a green tick and a red lightning bolt visible as a general "you should commit your work" flag.


Setting up Wifi on a Raspberry Pi

I recently got a few Rasbperry Pis and some "Ourlink" 802.11b/g/n USB Wifi dongles. They come in a low profile option but I got the larger one with hopes for improved reception. I think both use the same Realtek based chipset (RTL8188CUS).

Setting up wifi is pretty easy with the newer Rasbian releases (this guide was written for 2013-05-25-wheezy-raspbian).


Experiments in speed

AngularJS HTML5 mode and Rails routes

AngularJS is a super cool JS app framework. I'm not going to write much about AngularJS but you should check it out if you haven't used it.

Most of my AngularJS apps are backed by a Rails API app. This is a pretty good fit since you get all the power of Rails ecosystem and with some minor tweaks you can slip Angular into the asset pipeline.

Normally AngularJS will use URL fragments to track its in-app routing, shown as /#/my/route in your addressbar. You can enable HTML5 on the $location service which would convert the above URL into /my/route which you might find more aesthetically preferable.

// configure our location provider to be in HTML5 mode
angular.module('sweetapp').config(['$locationProvider', function($locationProvider){

Asynchronous texture loading on iOS + GCD

Here's what we're going to cover:

  1. I will briefly describe GLKit and how you can use it to load textures.
  2. We will then cover how to asynchronously load textures.
  3. I'll explain a minor caveat regarding memory.
  4. I will demonstrate how to use dispatch groups for completion notification.

Cowboys can skip to the complete code listing.


Using Leaflet.js with non-geographic imagery

Hey! This was written for Leaflet.js 0.5.1, sorry, it might not work anymore but hopefully it's still helpful. The tileup gem should still be useful. I plan to update the guide when I have time.

Leaflet.js is a free & open source javascript mapping library, akin to Google Maps. The tutorials show how easy it is to wire up something like open street maps and start mapping, but it's not so obvious how you can use Leaflet to explore non-geographical imagery (with non lat-lng coordinates).

The steps roughly required are:

  1. Split large image into smaller tiles.
  2. Rename tiles to fit naming conventions.
  3. Insert JS to convert between pixel coordinates and set the max bounds of the map.

For this example we'll assume our image is 1024x6144.

Lets get started.


Search with underscore and jQuery

Super simple array filtering with _.js and jQuery.

// up to you to get this from somewhere = [
  "Apples growing guide",
  "Orange growing",
  "Apple repair guide",
  "ruby on rails setup guide",
  "ruby vps install",
  "rails to sinatra"

$("input.omnibar").on('keyup', function(e){
  // clear our results list
  var $ul = $("ul.omnibar_results").html("");
  if($(this).val() == ""){
    // dont show anything if the query is empty
  // get our query, remove excess white space, down case 
  // and split on white space
  var query = $(this).val().trim().toLowerCase().split(/[^\w]/);
  var results =, function(d){
    return _.all(query, function(q){
      return d.toLowerCase().match(q);
  }), function(r){
  }, $ul);

FGTL ES on the iPad

The default combination of OpenFrameworks + retina iOS + ofTrueTypeFont looks pretty bad with real inconsistent glyph weights. You can use FTGLES to improve things. My branch has fixes that are not yet merged upstream. Bounding boxes that actually work etc.