Ex Nihilo

A Processing Sketch Blog

Ellipse Ribbons

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:


July 23rd, 2009 | 1 Comment »

OpenGL Quirks

I’ve started light by simply merging some of the sketches from last month’s workshop. That has mainly meant translating 2D demos to 3D space so far, and I’m already running into some interesting OpenGL quirks.

3D Radial Demo

This applet (requires Java Virtual Machine) for instance; there’s a clear dividing line between the left and right half; the lines are darker on the left, lighter on the right. This is true no matter whether I use the lights() function or not. No idea what’s causing it.

And 3D shapes appear to be slow as molasses. Admittedly I’m on a MacBook Pro with only a mid-range graphics card, but I’d expect better results than this. Here’s a basic 25 sphere “starfield”, it renders pretty smoothly:

But bump it up to 125 and look out:

Keep in mind the previous applet draws about 5000 2D lines per cycle, vs. the 125 spheres in the last video, so 2D shapes are clearly a lot less taxing than 3D shapes. But 125 shapes is barely scratching the surface of what I imagined Processing could accomplish, so I’m clearly missing something.

What do the pros do? I’m guessing the choice is to either ignore framerate and render to a sped up movie, or fake 3D with 2D objects. I’ll have to keep digging into this one. Update: aha, buffering.

(and actually, now that I’m looking at the movies again, I’m wrong — those aren’t even spheres, they’re just ellipses. No idea why this example’s so bad; I can normally get a few thousand ellipses moving pretty quickly, I guess this is just a crappy example. The point remains when applied to spheres though.)

July 22nd, 2009 | No Comments »

Processing Workshop Post-Mortem

About a month ago I filled a seat at Vancouver local Jer Thorp‘s monthly workshops. The topic of the day was Processing, the open source graphic and interaction programming language.

Coming from a web background, I’ve long been meaning dip my toes into more advanced coding + design environments, and Processing sounded like it perfectly fit that bill. Though it was also geared at non-programmers, Jer teaches his workshop at a comfortable pace for someone with my background too. I ended up spending less time than others fighting my way through the syntax and demos and more time going off on my own tangential experimentations.

Here are a few of the results from that day. At some point Jer mentioned the save() function that would spit out PNG images, so I made liberal use.

Structure Sketch

Probably the second example of the day, we built a fairly basic demo to get comfortable with the integral setup / draw functions. The loop drew a rectangle at the mouse coordinates; I took it a bit further and applied some alpha and size variation based on mouse position. Nothing terribly complicated; the image below is the result of manually “drawing” a bit during the loop.


Scribble Sketch

Again using the basic setup / draw functions, we worked through some of the basic stroke and fill properties as well as the random function by drawing more interesting line shapes on mouse press. I saved out a bunch, here are three of my favourites:


Again, this was mostly manual mouse drawing, with a bit of randomness thrown in.

Random Numbers

Things started getting interesting when we incorporated a bit of Perlin noise in our randomization. With the noise function and a bit of radian-based math at my disposal, I tried a few different variations on a theme.


The last jellyfish/loofah-like shape was one of my favourite outcomes of the day, so it’s the current masthead for this site.

Ants Sketch

After a Les Amis du Fromage-catered lunch we spent some time learning about basic objects and methods, something that admittedly isn’t a concept I’ve found easy to grasp in the past. Maybe not so much grasp, as figure out how to put into practical application. I’m dangerous with arrays, but classes and methods never really struck a chord with me.

The demo involved creating an Ant class and propagating the canvas with a few hundred ant instances. It doesn’t make for a very interesting visual result so I’m not posting a capture here, but I’m hoping that Processing is finally going to be what gets OOP to make sense to me, and that I’ll be able to use the principles in future work. We’ll see how that goes.

Images & Pixels, Simple 3D, and WFF Sketches

We finished the day with a bit of a breakneck tour of the “where you can go from here” concepts that were probably more inspirational than instructional. Using a photo (and then webcam input) we coded a basic eyedropper tool to select the colour value of a specific pixel; we played around in OpenGL and 3D space with a few spheres (I went a bit further and tied in some of the mouse interaction and animation routines we’d learned earlier in the day); and we ended with a brief overview of using data off a public API to do interesting things with the We Feel Fine project.


I left with a pretty good overview of what Processing can potentially do for me; the trick is to now take the basic principles we learned last month and start putting them into practice. The next few posts will likely be me working through some simple visual and interaction concepts as I get up to speed with the syntax. I’m already a bit daunted by the shift into 3D space, as I’ve spent the better part of ten years thinking in only the two dimensions the web allows. That will take some readjustment.

Hopefully, as the quote Jer used to start the day went, “this is going to be awesome!”

July 21st, 2009 | No Comments »

| Newer Entries »