Ex Nihilo

A Processing Sketch Blog

Posts Tagged ‘3D’

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 »

Reading a Google Docs Spreadsheet

Wednesday, August 12th, 2009

There doesn’t seem to be much on the web specifically about tying together Processing and Google Docs, but it’s fairly simple when you realize the latter has a ton of export options that work pretty easily with Processing. I’m starting with CSV, though the option to work with XML will likely come in handy down the line.

Starting with a spreadsheet filled with a few dozen values, I can get at the CSV with a simple export:

Picture 2

The loadStrings function pulls in a local file or a remote URL as a String array:

String[] inputFileLines;
inputFileLines = loadStrings(
  "http://spreadsheets.google.com/pub? ->

It’s fairly trivial to walk through the array and do something useful with the numbers:

inputFileIndex = 0;

while (inputFileIndex < inputFileLines.length) {
  String pieces = inputFileLines[inputFileIndex];
  if (pieces.length() > 0) {

    // do stuff with the 'pieces' string here,


The data exists as strings though, so it’s probably more useful to convert each value to float() or int() before using it. With the simple CSV file I linked up earlier as a source, I used the basic loop to assign the data points as the radii values for each of a set of spheres plotted randomly along the Y axis, or the height of a set of bars slightly tilted along the X axis:


If we were to say the linear-increasing X value is time, that makes for a couple of fun 3D graphs that even Tufte can be proud of. (Or not.)

Tags: , , ,
Posted in Google Docs | No 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 »

Bezier Blossoms

Thursday, July 23rd, 2009

Bezier curves are hard enough to get the hang of in a graphics program with visual handles, but plotting the handles in 3D space is a whole new ball of wax.

I played around a bit tonight with about 80,000 of them by rotating from the origin and randomizing both the endpoint and the end handle of each curve with Perlin noise. The results are neat:


By keeping track of the coordinates of each line I can manipulate the entire blossom in 3D space, though at 80,000 lines it’s a pretty slow refresh. I added an animation loop too, to get each line swaying a little; it works well with a few thousand, but not when the numbers get this high.

I’m also sticking with this photo-generated palette idea; it’s a great way to get a bunch of interesting colours in a hurry that don’t clash too badly. I’ve upped the photo pool to 10, and one is selected randomly each time the palette is generated. Each of the above examples only uses 5 colours, but I can change that number to whatever; the previous example used something like 25.

Tags: , , , ,
Posted in Uncategorized | 2 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 »

OpenGL Quirks

Wednesday, July 22nd, 2009

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.)

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