Processing.org‘s fabulous exhibition has been updated with Grass, an installation by The Barbarian Group for Saturn (the car) shown at the recent Wired Nextfest here in New York. As usual, something that looks quite simple has a lot of elements:

Being from Kentucky, I suddenly want to take off my shoes.
  1. Installation: Barbarian Group relied on veteran Obscura Digital for the installation; auto exhibition exhibits are an ancient, time-tested trade, and calibrating projectors perfectly is a b****. (I’ve been doing a lot of it this month. I’m terrible at it. I hate it. Straight lines and I don’t get along.) Four back-projected DLPs do the dirty work.
  2. Camera tracking: This part is comparatively simple: the camera looks for dark spots against the projection (presumably in the visible light spectrum, since shadows is what you want) and compares frame-to-frame motion for the movement.
  3. Grass: The grass is a series of segments, bent along a gradual decay. (Scroll down in the example above; they explain it fully.)
  4. Perlin Noise wind: Hooray for Perlin Noise! This random generator works very well for this kind of organic material. (You can also generate Perlin Noise in Flash 8 and later.) Google it; it’s one of the greatest things ever.

The results are lovely, with interspersed text floating in. Of course, Saturn’s needs were comparatively modest; they just wanted a nice, pretty background for pushing their hybrids — it’d be nice to see these concepts taken further.

OpenGL in a Browser

Equally, interesting, though, is that the creators present a simplified version of their Processing file rendered in OpenGL rather than P3D, which is what you’d normally use for 3D in a browser with Processing. Yes, that’s an actual OpenGL rendering inside my Firefox window below. Your mileage may vary; Jaymis reports he can’t make it work in Opera.

OpenGL + Processing in Firefox!

If you’re interested in doing this yourself, java.net has an example using the JOGL Applet Launcher:

jogl-demos: JOGL Applet Test

I haven’t yet tried to hack Processing myself to make Processing files work, but both your Processing sketches and other Java JOGL projects should work. Note that you’ll want to look at the video, too, as they had to compromise a bit to make it work well in a browser. Viva Java — can’t do that with Flash, for sure. (Of course, I may have spoken too soon, as Firefox 2 RC3 promptly crashed after looking at the JOGL player.)

I’m guessing that a lot of the polish of the finished work has to do with using creative filtering and anti-aliasing in JOGL, as well.

flickr Feathers

While we’re on the subject of lovely, organic designs, blprnt has created a beautiful sketch that reads image color values from flickr using Flash 8 and later:

Plumage: FineFlickrFeathers (via Processing Blogs)

Flash, not Processing in this case, though you could do something similar with Processing. (And the above project could be adapted for things Flash does well — depends on how 3D you want to go, in part).

But let’s put the technology aside a moment: the real lesson here is that great work is created by working:

I’ve been somewhat disappointed with my creative output as of late. So, with a day off of client work, I set out this morning to make something interesting before the end of the day.

Yep, we’ve been there. Doing a one-day opus is a great idea. As for getting that day off? That I can’t help you with.

  • http://www.hardcorepawn.com/ JohnG

    You don't actually need to hack Processing at all to get OpenGL in a browser, it's all built in, so you can just load your OpenGL sketch, hit the Export button, and it should Just Work™

  • http://www.jaymis.com Jaymis

    Grass Applet works fine for me in FF, there seem to be occasional Processing programs which won't run in Opera, not really an issue as any reasonable Opera user will have FF installed as well :)

    The Grass app is ok, the aliasing is rather scary, but I'm sure the installation would have looked much prettier. I really like the Plumage project though, that's lovely.