Ex Nihilo

A Processing Sketch Blog

Archive for September, 2009

Manual Geodata

Friday, September 18th, 2009

So if you’ve recently gotten into a visual programming language, and you also recently bought a bike, what’s the logical next step? Merge the two pursuits of course.

There’s an app called RunKeeper for the iPhone 3G/3GS that uses the phone’s GPS to track your route / elevation / time as you’re out being active. If you upload your routes to the web site, you can get the data back out in a couple of XML formats. (Google’s KML kind of sucks, it turns out; I’ve been finding GPX files easier to use. RunKeeper’s web app exports both.)

I’ve started hacking up an app to plot the data in 3D space. Very early stages, but it’s working quite well so far. Here’s a quick video:

Make sure to wait for the shift in plotting modes through the movie; I’ve built three so far: lines, points, and colour-coded points that indicate elevation (blue in the low areas, red in the high areas)

You’re seeing 7 routes I’ve ridden over the past couple of days. I’m already seeing outlines of Vancouver’s city features forming: the distinctive duck’s head outline of Stanley Park, the south downtown seawall, the massive hill heading out to UBC, etc.

What’s obvious is that some of the elevation data, particularly around Stanley Park, is seriously whacked. I think the cliffs obscure the GPS signal or something, because it should be more or less sea level all the way around. (In line view this is most obvious: it’s a series of jagged peaks and valleys, which strikes me as physically impossible). Hard to say whether it’s the app or the phone’s GPS to blame here, but my guess is the latter.

Next step: adding speed indicators, once I figure out how to work with ISO time stamps in Processing. (And going out and biking more paths this weekend to start fleshing out the terrain a bit more. Nice way to stay motivated.)

Posted in 3D | 9 Comments »

Generated Palettes from Photos

Monday, September 14th, 2009

I’ve had a few requests now to share my code for grabbing generative palettes from photos. So as basic as it is, here’s my trick.

First I throw a set of photos into the sketch’s data folder, sequentially named 1.jpg through x.jpg (though I’ve since discovered Daniel Shiffman’s excellent directory listing functions that wouldn’t require me to touch the photo filenames). I choose a random image from this folder and load it into an off-screen buffer, then choose random pixels and load their colour values into a palette array.

// create buffer and setup palette variables
PGraphics buffer;
PImage paletteSource;
color[] palette;
int palettePhotos = 9;
int paletteCount = 24;

void setup() {

void loadPalette(int paletteCount) {

  // load in an image
  paletteSource = loadImage(int(random(1, palettePhotos)) + ".jpg");

  palette = new color[paletteCount];

  // load the image into the buffer
  buffer.image(paletteSource, 0, 0);

  for (int i = 0; i < paletteCount; i++) {
    int colorX = int(random(0, 300));
    int colorY = int(random(0, 300));
    color pick = buffer.get(colorX, colorY);
    palette[i] = pick;


That's it. Stupidly simple, but all the interesting colour combos I've posted on here in the past have been a direct result of this. Not every palette looks great, but if you're using interesting photos as the source, 7 or 8 times out of ten you get something workable.

A bit of code documentation: since I use both portrait and landscape photos, I decided to constrain the area I grab pixels from to a top left square of 300x300 pixels. You can adjust those values to suit, if needed.

You can control the number of colours you load in with the paletteCount variable, and the values ultimately end up in an array called palette[], which you can use sequentially:


or randomly:

 int paletteValue = int(random(1, paletteCount));
 obj.R = red(palette[paletteValue]);

Posted in Palettes | No Comments »