Ex Nihilo

A Processing Sketch Blog

Archive for July, 2009

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.

branches-587175
branches-545161

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:

dots-00a
dots-35885
dots-49275
dots-384305
dots-400151
dots-425154
dots-429151
dots-442116

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:

bezier-6355
bezier-13756
bezier-17310
bezier-19163
bezier-22872
bezier-23779
bezier-35770
bezier-62461

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:

3

And here are a few of the results:

radial-200157
radial-202163
radial-267179
radial-453305

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:

radial-48141
radial-182140
radial-323160
radial-469179
radial-477196
radial-585143
radial-599144
radial-726143

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 »

Processing Workshop Post-Mortem

Tuesday, July 21st, 2009

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.

boxes

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:

scribble-293
scribble-261
scribble-261

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.

randomnumbers-697
randomnumbers-705
randomnumbers-0

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.

Takeaway

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!”

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