Archive for the 'Happy Accidents' Category


Tuesday, May 20th, 2008

run the sketch(P3D) (OpenGL)—view the code (OpenGL)—download (OpenGL)

How do you use it?
Follow the on-screen instructions.

What is it?
This is based on the Rudolph helix series from Nov 2007. I’ve been tinkering with it off-and-on for a while so I decided it was time to show off the latest version. This one has an optional GUI layer built into it. This time I’m using the OpenGL renderer instead of P3D (both are posted for comparison). The weird thing is, with OpenGL the transparent pixels in the image are only transparent in one direction. With P3D, the transparency works both ways, but it doesn’t handle z-translations entirely right…

In the P3D version you’ll notice the small “farther away in space” images remain at a reduced size even when they are rotated to the front. I understand why this happens* but I’m not sure how to correct for it. Perhaps I should rotate the camera instead of rotating the coordinate space. Any thoughts?

*P3D is reducing the size of the images that are positioned on the negative z-axis. Similarly, an image with a positive z-coordinate is made bigger. This is done absolutely, without regard for the POV of the viewer; negative z = smaller, positive z = bigger. When you move the mouse left or right, you are spinning the entire coordinate matrix about the y-axis, This eventually brings the negative z-axis to the front and with it come the scaled-down images.

pictureTube trials

Friday, March 14th, 2008

pictureTube_0 _pictureTube_a _pictureTube_b _pictureTube_c
_pictureTube_d1 pictureTube_d2 pictureTube_d3 pictureTube_d4
(click each image to run the sketch that generated it)
How do you use them?
Move the mouse around to change the orientation of the structures.

What are they?
Attempts at constructing a cylinder out of a JPG. They are presented chronologically, left to right, top to bottom.

Why are they cool?
I don’t remember where the idea came from, but I thought it would be pretty quick and easy to turn an image into a cylinder. Just grab a pixel’s color from the image array, translate out, draw a square, translate back in, rotate and repeat. Well… it took a few more attempts than I expected. But along the way—as frustrating as it was—the program generated some pretty interesting results. I decided to save the “failures” because they A) look pretty cool, and B) reveal a lot about the program’s flow through loops and moving about in 3D space.

This is the source image:
pictureTube image

digiLog Clock // ver B

Wednesday, March 12th, 2008

run the sketch—view the code—watch the video

How do you use it?
Move the mouse left and right to switch between digital and analog.
The “d” toggles a superimposed digital time display. (I built this in for debugging but decided to leave it.)

What is it?
It’s a whole new way to see time. There are advantages and disadvantages to both analog and digital timepieces. Here you have them both at your fingertips.

Why is it cool?
I’ll admit my bias. I think there are only disadvantages to clocks with digital time displays. They stress the moment rather than the continuum of time. If it’s 8:45 and I need to be somewhere at 9:00, looking at the numbers in this hh:mm format doesn’t really say anything to me. Digits may be useful inline with text—like this sentence—but on a clock they’re just numbers. On a digital clock, fifteen minutes is an abstract concept that has little impact on my actions. However, analog clocks allow you to visually quantify time. As the hands sweep around the face of the clock, they define physical areas. This turns time into something visible; something my senses can directly and immediately perceive without doing any math or other cognitive interpretation (read “distraction”). On an analog clock face, you can see that fifteen minutes is one-quarter of the circle. And as the minute hand progresses around the circle, you can watch this slice of the pie becoming physically smaller. I find this to be a much more useful way of representing time.

Imagine that the three-dimensional space of the room you are sitting in represents two hours of time. In a digital clock world, sixty minutes from now your room will instantly be reduced to half of its current volume. The ceiling and walls will suddenly rush in on you, shoving everything together. You’ll watch your new laptop get smashed against the wall, your framed Ride the Lightning LP autographed by Cliff Burton will crash to the floor, and you’ll spill coffee all over the thumbnails you’ve been drawing for the past two days.

Now consider an analog clock world where the room gradually becomes smaller. As those same sixty minutes pass, the walls slowly and continually move in around you. You will notice the objects in the room being pushed together and you will have a chance to adapt to these changes as they happen. You will be able to move the bookshelf closer to the desk, you will have a chance to take that framed LP off the wall, and when you notice that extra chair start pressing against your arm, you will get to set your coffee down and move the chair out of the room. In this analog clock world you have the opportunity to work with the passage time instead of being suddenly informed that it is already gone.

digiLog Clock // ver A

Monday, March 10th, 2008

_20080310_digiLog_clock_a <-- _20080308_typeWheel_C
run the sketch—view the code

How do you use it?
Move your mouse left and right to spin the clock.
(I know it’s not quite working correctly, but the concept is here.)

What is it?
As I was working on the typeWheel with the axes turned on, it struck me that they looked a bit like the hands of a clock. I suddenly flashed-back to the Processing workshop I took at MCAD (with Ben Fry and Casey Reas themselves!) where we were given the assignment to create a sketch that visually represented the passage of time. Only one person in the class was smart(ass) enough to create an actual clock. For most of my art career I have been obsessed with visualizing—or in other ways making palpable—that invisible 4th dimension.

Why is it cool?
I can’t put it into words yet…

Corkscrew 2

Wednesday, March 5th, 2008

run the sketch—view the code

How do you use it?
Move the mouse around. Click to reposition.
“s” toggles scatter.
“a” and “d” spin it about the Y-axis.
“w” and “x” spin it about the X-axis.

What is it?
Riffing off of yesterday’s sketch.


Tuesday, March 4th, 2008

run the sketch—view the code

How do you use it?
Move the mouse up and down to compress or stretch the helix.
“w” and “x” rotate about the X-axis.
“a” and “d” rotate about the Y-axis.
“s” toggles between cylidrical and conic helix.

What is it?
I was really fascinated by the corkscrew line that I used to initialize the arrays in the 3deeLine project, so I decided to isolate it and play with it some more.

3deeLine // ver “Oops”

Sunday, March 2nd, 2008

run the sketch—view the code

How do you use it?
Click-and-drag to draw a path. Once you release the button, mouse movements will rotate the form in space. Zoom in and out with the “z” and “x” keys. I recommend zooming out 20-30 times after you’ve completed your drawing.

What is it?
This is an early attempt at bringing yesterday’s sketch into 3-D space. The X and Y rotations aren’t right yet, but…

Why is it cool?
It’s a happy accident. I put the rotate functions in the wrong place (at least “wrong” for what I was intending) but it made an interesting visual so I ran with it for a while.