Ex Nihilo

A Processing Sketch Blog

Archive for the ‘Experimentation’ Category

« Older Entries


Monday, August 2nd, 2010

Seems like I’m more inclined to post screenshots of work-in-progress on Dribbble these days, so you can see a few of my current experiments over there. My latest project is remixing older sketches to layer different objects and apply blur and noise filter effects.

Blur is relatively simple, Processing has a built-in blur() function that gets the job done. It’s slow, and applying multiple blurs per frame really slows down rendering, but it’s way easier to work with than the GLGraphics library. I’ll probably need to dive into the latter eventually, but for now, I’m happy to let Processing do the heavy lifting here.

Noise was simple too, although it took a few attempts to crack. I initially thought I could just use set to drop an array of black pixels on top of the scene, using a random alpha value for the opacity. Except set doesn’t appear to like alpha values, as the render would start correctly but then layer up to full black over a few frames. Which is odd because the loop would only run once, but there would be multiple frames of noise being applied. I don’t quite understand that one, but it was enough to convince me to try it another way.

Instead what I’m doing is grabbing the current colour value and using lerpColor to select a random point between it and full black. The amount variable controls how far from the original colour it will deviate, values between 0 and 0.1 tend to look best.

// amount value is amount of noise, between 0 and 1
void createNoise(float amount) {
  color c;
  for (int i = 0; i < width; i++) {
    for (int j = 0; j < height; j++) {
      color current = pixels[j * width + i];
      c = lerpColor(current, color(0, 0, 0), random(0, amount));
      pixels[j * width + i] = c;

Posted in Filters | No Comments »

Pure Visuals

Monday, June 21st, 2010

After putting ioLib out there a month or so back, I wanted to get back into the early experimental days of my Processing discovery for a while and create some purely visual sketches that were just simple generated visuals. With ioLib added to the mix of course, so I could manipulate and save out variations as I saw fit.

There are two I’ve been playing with in particular. All images below are saved at wallpaper-friendly 2500×2500, in case you have a mad urge to use them for anything. (I’ve been considering creating a new Flickr account to dump the high-res output of various sketches to make sharing this stuff easier, but I’m still not convinced I need to pay another $25 for another pro account to make that happen.)

The first, ShapeDistortion, takes a basic grid of primitive polygons and adds distortion, roundedness via curveVertex, and combines them with my typical generated palette secret sauce. As a bonus I built in some high-res texture support, though I only got as far as applying it to the background of the scene rather than on a shape-by-shape basis.

The second one, PaletteRays, shows the benefit of having controllable variables within a sketch. Using Perlin Noise and rotating around a central axis, the sketch plots thousands of semi-transparent circles that fade from one colour to the next, creating a fairly uniform blob effect. These are all from a single starting point and the different views are simply tweaked conditions while the sketch is running. It shows amazing amount of variety within the same basic framework; the focal blur effect is particularly surprising.

Now these pieces are in place, I suspect the next step will be tying in some external data sources and do something a little more interesting than straight up visual effects.

Posted in Experimentation, Projects | 3 Comments »

New Project: Elevation

Monday, October 12th, 2009

As hinted in the comments in my last post, I’ve cleaned up my 3D elevation code and released it as a project, source and all. Go check out Elevation to grab Mac and Windows executables, or hit up GitHub to grab the source.


This project was a too-perfect alignment of things relevant to my interests. I got a chance to really stretch my legs with Processing, had an excuse to tinker with GitHub finally, spent some serious design time in Photoshop thinking through the site and app UI visuals, designed a high-res app icon, got to play with mapping and GPS software, and it all gave me the motivation to go out and pedal around this beautiful city to create my route data in the first place. Spending a month coding while racking up over 400km on the bike seems like a fairly healthy work/play balance.

And happily there’s plenty of fodder in here for future posts, from parsing differing XML formats to building a functional GUI. More on those soon.

Thanks for the link love to: CreativeApplications, blprnt, Rubbishcorp

Tags: , , , ,
Posted in 3D, Projects | No Comments »

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 »

Recursive Trees

Friday, July 31st, 2009

I spent the better part of this past week trying my hand at creating a decent-looking recursive tree, in between all the sweating this heat wave is causing.


Maybe it’s the heat but I think I’m ready to throw in the towel. I got the recursion working reasonably well, but the branch curves look terrible, and most of the logical adjustments I wanted to make ended up in division by zero for some reason I couldn’t track down.

Like, a for loop starting from zero and incrementing i on each iteration; I get that for the first iteration i = 0 so you’d think this equation should work, right?

    variation = multiplier / (i + 1);

But no such luck. “Division by zero” error. My actual code is more complicated of course, but that’s the essence of it; the loop is just not behaving as I’d have expected.

So I think for now it’s time to put this sketch to bed and move on to something else. Shame, I had some interesting things I wanted to do with the trees eventually.

Tags: , ,
Posted in Bezier, Recursion | 4 Comments »

Dot Cube

Friday, July 24th, 2009

I’m back to dots again. This time I’m stacking them in an orderly cube, and with the random palette some of them look pretty darn good.

I can’t get this one exported into anything usable in a browser for some reason; the applet that Processing creates just doesn’t want to run. I suspected the photos I’m using to generate the palette are to blame, but after hitting up the troubleshooting guide I appear to be doing everything right. The main symptom (aside from not running) is that the exported applet is only sized to 100×100 in the browser, which is a) wrong and b) strange.

Anyway, in lieu of something you can play with, here are some screen caps:


If for some reason you really really trust me, you can download the native applications Processing generates (Mac OS X, Windows, both around 2.5MB) and play with them on your own system. No guarantees they won’t hose your computer, but, they shouldn’t.

(Use the mouse to rotate the cube, press a or z to zoom in and out — or the mousewheel, but that’s buggy — and you can kind of drag it up and down to reposition, though that doesn’t work well either. Hit the spacebar for a fresh palette. Oh, and s will save out a PNG of the current frame if you’re so inclined.)

Tags: , , ,
Posted in 3D | No Comments »

Bezier Stalks

Friday, July 24th, 2009

So after yesterday’s Bezier celebration I thought I’d try a more structured approach and see if I couldn’t capture some interesting movement. Reducing the number of objects down to 3600 and plotting them along a grid as a start, I got the end points and curves moving along Perlin-assisted paths in kind of a wind-blown look.

Still all in 3D space of course, so I saved out a quick capture with some viewpoint shifts and generated palettes. (With the latter you can pretty clearly see that not everything that’s generated is usable since I have to cycle through a few different palettes before I get something decent).

Tags: , , ,
Posted in Bezier | No Comments »

Generated Palette

Thursday, July 23rd, 2009

Okay, the generated palette idea was easier than I thought. Importing the photo into an off-screen buffer and grabbing some random pixel values makes for a fairly quick and easy way of generating an interesting palette. Here’s the photo:


And here are a few of the results:


Tags: , , , , ,
Posted in Palettes | 1 Comment »

Ellipse Ribbons

Thursday, July 23rd, 2009

I’ve been playing around with a variation of the radial sketch from my last post that plots a few thousand ellipses along a Perlin-randomized trajectory. I first spent a bit of time converting the ugly coordinate arrays to a cleaner object array, added a custom palette, and then added a bit more control over the view in the form of mouse-enabled 3D rotation and mousewheel zoom.

I’m not done with this sketch yet, I’m going to try generating a random palette from a photograph if I can get that working. For now here’s a dump of some of the more interesting stills:


Tags: , , , ,
Posted in 3D | 1 Comment »

« Older Entries