I mentioned in my last post something about changing the behaviour of the gravity orb to be more tangible. Here is a quickie video to show what I am talking about. This piece had a lot of potential, I think, but it ended up being kinda repetitve so I cropped off all but the first minute. Expect a harsh ending. I didn’t bother fading out to black.

View the video (15 Megs)

Time to give Boards of Canada a chance to play. I set this one up to use 2000 particles. The last one uses 500, and a realtime version can run fullscreen with about 150 to 200. Needless to say, this was an overnight render.

I dont think it was as successful as the Trentemoller version. Something is missing. Maybe it was too dark, or perhaps more != better. So I did a little post work in iMovie (I need Final Cut Pro) and added the mirror effect to give it some extra something. The kaleidoscope look works well with the song, but I do think I cheated a bit by using a precanned iMovie filter on this piece. Whatever. At least I didn’t add the Earthquake effect or any star wipes.

There are a couple of physics-related mods for this version. Before, each gravity orb had a spongey springy surface. If a particle breaks through the outer barrier, the x, y, and z velocities reverse and it begins to to move back out of the barrier. I decided to change it to be more like a hard shell… even a sticky shell. If a particle hits the barrier, its velocities are set to zero. I will show a video of this effect shortly.

Also, I played with the ribbon trails a bit more to make them a little softer. Did this by changing over to a TRIANGLE_STRIP from a QUAD_STRIP (dont ask, I have no idea why it helped), and using some texture mapping.

Here are the video links. Large (98 Megs) or Small (33 Megs).

It runs Flash Lite 2.1, has a 320×240 pixels touchscreen, a speaker, a bend sensor, a light sensor, even an acccelerometer, it is permanently connected to the internet via wireless LAN and what’s most important: it’s all mine! - oh I’m damn sure that I will have some serious fun with my new Chumby:

I stuck Trentemøller in the same room as Magnetosphere and they made a beautiful 4 minute long movie. Links at the end of this post.

As you might have noticed, I have been getting acquainted to additive blending, courtesy of OpenGL. It really fills the space with light. I was a bit worried that I would get addicted to it like I did the Photoshop lens-flare back in the late 90s, but here is why this is different from that.

The first time I tried to render a bunch of semi-transparent objects in a 3D space, I ran into a problem that I had not considered. Rendering with OpenGL and transparency requires that you render the far stuff first and the near stuff last. If you just render the objects in the order you made them (which is often the case with me and my addiction to ArrayLists), you will end up with odd inconsistencies with the transparencies. And unless you want to get involved with the headache of z-axis sorting, you would do what I usually do. Give up.

The beauty of additive blending, or so is my understanding, and here I will extend this sentence into a horribly long run-on by saying I am no OpenGL master in any sense of the word… no… more I am a beginner who is getting a lot of use out of a few lines of code that I read a short tutorial about or saw in use, etc… so there might be an easier way to deal with the z-sorting issue but I choose to assume for now that this is the best way to go about it because just LOOK at the results!!! So, as I was saying, the beauty is that I no longer have to worry about z-sorting. The additive blending bit handles all the z-axis headaches and gets me additive blending as a bonus! Sweet light!

Another thing I am starting to implement here is something that came about as a side effect from the video about using the Lemur. I was filming my laptop monitor with a Canon powershot and I didnt have the laptop monitor tilted to an angle perpendicular to the camera’s line of sight. It was tilted away a bit and it ended up adding a nice subtle gradient to the background fill which seemed to help the overall look of the piece.

So, what I ended up doing was rendering to LARGE gradient orbs in the background centered offscreen but extending into the screen. Their position rotates in the opposite direction as the camera’s rotation in the space. It seems to add quite a bit of depth and atmosphere.

But enough chit chat. Here is the video. You have two choices. Large (92 Megs) or Small (31 Megs).

It didn’t dawn on me until today that linking to really really old source code is in bad form. The early studies for magnetosphere were done on a version of Processing from over a year ago, when it was still just barely an alpha release. Things have changed quite a bit with the API as well as with my skill set so I will start updating some of those old examples so people who choose to play with the code wont have to deal with a ton of errors right off the bat.

So here is the rework of the 2D magnetism piece that started this whole thing. Just click and drag. It was made with Processing 0124. Have at it.

If you ever want to stimulate the visual centers of your brain as you work with your graphics tools of choice, there’s endless inspiration from the visualist blogosphere.

In case you missed it in comments, our friend vade has done some terrific work using Max/MSP/Jitter and “glitchy” texture mapping. I just now noticed he was using audio input to do it, which can be a terrific way of modulating visuals for organic results. (Without knowing he had done that, I tried some similar experiments this weekend using the audio peak input in Quartz Composer.) The effect is simple but incredibly effective: play with texture coordinates so that the textures come alive. Don’t miss the first video.

This would be equally applicable to Processing, Quartz Composer, or anything else that does even basic texture mapping and audio input.

Texture Coordinate Munging [vade blog]
… and more good texture/3D Jittery loveliness

Meanwhile, in Processing Land, generative virtuoso Flight 404 (Robert Hodgin) has done amazing things with a particle system, magnets, and circles:

Magnetism + Spheres = Fun!! [Flight 404 blog]

Utterly stunning, and better yet, he’s included Processing code and walked through the whole process of building it. Check comments for more insight. But Robert didn’t stop there. He’s gone and bought himself a multi-touch Lemur controller, with still more cool videos:

Pretty lights! [Flight 404 blog]

I’ve been critical of some aspects of the Lemur in the past (see my Keyboard Magazine review), but it has been improving, in terms of the flexibility of the interface and how it assigns MIDI and OSC messages. One key advantage for visuals that can be less of an issue with music is stutter-free control of on-screen elements (which requires a higher resolution), and generally having an interface that lends itself to controlling 2D and 3D visual elements.

And, of course, in Robert’s hands it does some wonderful things.

Why am I putting these in the same post, other than sheer laziness? What strikes me about the effectiveness of each of these examples is that the quality of motion animates them in a way that is organic and alive. In each, the core technique and visual elements themselves are relatively simple, but the rhythm of the gesture of the visuals motion makes them more engaging. That, and just focusing on these two ideas, there are countless possibilities in whatever environment you prefer (Jitter, Processing, or something else). 3D, inspiration, java, Jitter, particles, processing.org, programming, textures, visualist

My apologies for not thinking this through. It didn’t dawn on me to try a clickable poster frame for the quicktime movies until I realized there is 90 megs of automatic downloads currently on the homepage of this blog. Problem solved. As you were.

At the excellent weblog Lost Garden I found an article considering handcrafted game elements vs. procedural game design. The topic is about the re-use of content to minimize redundant work and to maximize the meaning of the game elements and therefore the gamers experience. One basic thought is that you have too keep the re-use of game elements as high as possible to reduce unnecessary development steps and to keep the whole process agile. My latest experience of intensive re-use of game elements like maps was the game Metroid: Zero Mission on the Game Boy Advanced. It’s absolutely a good illustration of the re-use of elements, in this case the game maps.

“The more handcrafted, throwaway content that you have, the less agile your development process will be. This dramatically increases the chance that you will fail to converge upon enjoyable gameplay. It also dramatically increases the chance that you’ll fall back on conservative game mechanics because the act of trying something new is too bloody expensive.”

Please have a read of the whole article. It’s is definately worth the time. It also delivers links to literature and tipps to ask yourself if your content creation is at a meaningful level.

Just a quick low-quality render to illustrate the 3D structure of the finished 2D still shown here: http://www.flickr.com/photos/davebollinger/401071413/

Author: davebollinger

Keywords: processing.org 3d

Added: February 25, 2007

LEMUR!!! I broke down and bought one. I probably shouldnt have but hey, I am a sucker for nice things. Especially if they light up. Oh and triple especially if they happen to also be multi-touch user interfaces.

I am still getting the hang of it. It is highly customizable. Much more so than I thought it would be. But it is certainly not 100% customizable and there are definitely a couple things I would have wanted from it (considering the price), but overall, I am satisfied with the purchase and look forward to putting it to good use.

It was fairly easy to get it working with Processing. I ended up using the oscP5 library which allows Processing to send and receive OpenSound Control messages, which is one of the two ways the Lemur can communicate (the other being MIDI).

I am going to spend some time figuring out a good system that I can use with all my sketches. I know I will need a good camera controller. I will probably research arcballs and implement one because the Lemur has a nice ‘ring’ module that would be perfect for arcball control.

There will also be a set of triggers for controlling the major transitions. Ideally, these triggers would control in-Lemur effects instead of me having to code them into the Processing sketch. For example, I could make a trigger that spins the camera to a random position and velocity. Since the ‘ring’ module will control the camera, I am going to see if I can make the trigger simple send the ring dragger to a random position within the ring and by default, the camera in processing would self adjust. If I cannot make this happen, no biggie. I will just make a custom class template that will handle the everyday tasks I would want of all the AV sketches I make.

Quick test (audio by Alpha).

Mostly just getting acquainted with my layout. The Lemur does fine picking up the soft fleshy pads of the finger, but I am having better responsiveness by using my fingernails. I have the camera controller in the upper right. I have a set of pads below the camera controller which are the makings of a drum pad for the custom triggers. The upper left sliders control the gravity orbs. The ones just to the right control the particles.

In the lower left, you will see the only example of bidirectional communication with the Lemur in this layout. Processing is picking up input from the Lemur, but it also sends back a 40 band frequency spectrum which I render to the Lemur’s screen using the multi-slider module.

The multiball in the lower right does nothing for now, but I threw it in there so every now and then I can scream “MULTIBALL!!!” and frighten my boyfriend. I also took the time to code in the cartesian coordinates for all the Platonic Solids. For those who don’t know what Platonic solids are, picture the standard set of D&D dice, excluding the 10 sided one. Those things.

Apart from twiddling my thumbs and catching up with Heroes (bloody good show it is too), I’ve returned to an old project. I was going to contribute a game to the Telic exhibit for their 5 joystick show but lost interest when I started building my Flash interface and when I found out there would be no fire buttons. More confident with Flash now though I’ve brought the idea into Flash and the engine seems solid enough for me to finish it off. Test the demo engine here.

For those of you who haven’t checked out flight404’s music responsive doodad yet go check it out. It’s a very attractive piece and there’s a lot we can learn from it.

What does Marsellus Wallace look like?
Hiding messages in plain sight
Graffitti lab are at it again
The story of the Amen Break(beat)
Mario World game (in JavaScript!?!?)
A projector for $500 and replacement bulbs for $30
Best fight scene ever (first to touch the floor loses)
Strange Maps Blog
Kazemoto Game looks like it’s been all drawn in biro
Left hand only piece by Chopin
Thursday Assface!!
Monty Python .wavs and .mp3s

Font support survey
True Flash fullscreen hack
Playing Flash below DHTML
Add music to your iPod from any computer hack
Flash keyboard focus on launch in browser
Guide to .htaccess
Emily Chang’s eHub (a resource portal)
Shared Objects (Flash MX cookies)
3D with Javascript
Screenweaver (for building applications with a Flash interface)
Daniel Shiffman’s OOP primer (a favourite page to refer n00bs to)