Category Archives: Processing

Fiat Showroom Installation

So, some of you may have heard about the project I’m just finishing off today.

Moving Brands hired me to work on implementing a permanent interactive installation for the new Fiat Flagship Showroom in London. I’ve been working with their team for the past two months, and I think we’ve managed to create something very special.

It’s a 9 screen interactive video wall which lives in the showroom. It lets you browse images from Fiat’s history and present, create your own statement by arranging movable word blocks, and create an abstract masterpiece by painting with light and gestures.

It’s a massive high res display, comprising of a massive 4080 x 2304 pixels in total, driven by five dual xeon PCs, all running the custom application we created in processing, and synching via a UDP network client written by Toxi.

It has been a massive technical accomplishment to get the thing working, and I think it’s probably the most interesting project I’ve ever worked on.

Here are some photos…

iphone 174iphone 172iphone 161iphone 137iphone 128iphone 124iphone 122iphone 110iphone 103iphone 084iphone 083iphone 077iphone 074Cablingiphone 045iphone 039iphone 012

Test curves

So, here we go – Alias makes good on the bezier typograpy threats. This is a 2.5d typographic experiment, and I hope it’ll work OK with your hardware setup.

Having said that, it will probably look best viewed in IE on a machine which supports OpenGL in hardware… sorry about that. (I am such a hardware accelleration sellout)

Anyway, check it out… for those of you without shiny graphics cards, there’s a video…

click here for the applet…

As a footnote,for the past ten years, I have been trying, with little success, to impress my father with my various computer graphic efforts. This is the first thng which has actually impressed him. This has to stand for something.

For the video, look below…

Text curves from Alias on Vimeo.

Motion on bezier paths

So I was able to easily hook some animation into the bezier random walk, and added a tail for each particle. I’m quite happy with the motion.

Not sure about the clustering at the edges – I think that the edge detection algorithm could do with some more work.

The motion is nice though :)

Next, I’m going to plug in some typography…

Click to view the applet

Bezier random walk

So I’ve been porting some of my flash code over to processing. One of the things which I’m interested in specifically is bezier interpolation. It’s not a lot of work to port stuff over, and I’ll probably work on porting over some more stuff soon.

This is a random walk with bezier curves. This does all the bezier stuff seperately to the processing core – the advantage being that I can get any point on a bezier by providing it with a parameter t, which is very useful for animation purposes. In order to test out this code, I’ve created these stills of bezier random walks.

I’ve left on the control points, and drawn boxes along the curve. The curve itself is randomly generated by a random walk.

Bubble particles

So, this is my aforementioned first stab at a simple particle system in processing. Simple bubble particles, rising and re-spawning when they go offscreen. All very simple stuff, but pretty all the same.

Funnily enough, processing seems to run slightly faster in IE… :(

This is also true in the flash world – I believe it’s to do with the outdated netscape plugin API being a bit lame… hopefully that will change soon though.

I’m actually quite dumbfounded by the sheer power that processing has at its disposal. This simulation was able to take over 5,000 particles before it started to chug. This one here only has 600, as it started to look a bit cluttered, and I don’t want to induce premature browser-death.

Check it out! (click the image)


OpenGL in a browser!

So, I got the processing OpenGL export working – seems like it’s been ironed out in version 0.135.

Basically this is a stress test – it’s a fibonnacci spiral made of 2500 squares.

2500 squares! I’d like to see flash handle that!

It runs quite nicely on my machine, although I’m not sure about the performance in the browser. Quite pretty. Code is here.

It’s processing, so you’ll need java installed. Your mileage may vary, depending on your hardware.

Processing sketch – spiral gallery

So, this year, I’ve decided I that I want to do a lot more processing work. As I’m back to the world of freelancing in 2008, I’ll be making a big effort to post a lot of my processing sketches online as I do them. They will probably not be hugely exciting, but I’ve realised that documentation of work is really important – I have insane amounts of experimental work lying around and it hardly ever sees the light of day. Anyway, I haven’t quite gotten the hang of processing in the browser yet – there’s a few technical constraints I have to get to grips with. However, there’s no problem making youtube videos… so here we go – processing sketch video #1: spiral gallery, “autumn”. This sketch loads the first 25 images returned by the keyword search “autumn” on Then in animates them using a fibbonacci derived space packing algorithm, which was developed by observing the growth of seeds in flower heads. I like how it seems quite chaotic but is actually very rigidly defined and ordered.

Processing Sketch – Spiral gallery, autumn from Alias on Vimeo.

Note that this works fine in real time – it’s just that Processing isn’t very happy in a browser at the moment. I’m working on that, and I’ll try to post the actual applet and code soon. Processing is so much fun – it’s a refreshing change to have hardware accelleration! Go OpenGL!