Brighton projections with Processing


Yet another reason you want to live in Brighton πŸ™‚ Every year we have a very special festival the night the clocks go back : White Night. Twinned with Nuite Blanche in Amiens France, events happen all night long: workshops, collaborative art, and performances.


This year I was especially lucky to be part of a projection event at 200 year old Marlborough House. It was organised by BANG, the Brighton animators group and there were over 30 contributed animations mapped onto the building’s facade and windows. Kate Genevieve (who you may have seen at the FOTB elevator pitch) also coordinated a gorgeousΒ 2 edition comic in newspaper form with a full back story about how the building had been used by a crazy scientist to capture dreams.

The animations were just beautiful and so varied. From full architectural 3D mapping, to hand drawn character animation, through to charming stop-frame animations from children. More photos at the Flickr group.

My small part of it was to fill the 30 minute gaps between showings; we wanted something interactive, so I used it as an excuse to get more familiar with Processing, which I’ll be teaching at Sussex Downs College over the next few weeks.

We invited people to text and tweet us their dreams, and we projected them around the edge of the building. I also made a couple of Victorian looking timers that were mapped onto architectural curves, and counted down the minutes until the next showing.


The growing ink splodge in the middle was inspired by a page in the newspaper.

During development, I very quickly ran into Processing performance problems, but that’s not surprising : the canvas was 2048 x 768! Moving to OpenGL helped a lot but it is quite complex and difficult to find documentation. As well as the performance, I also needed the blend modes. I’ve got the hang of it now, thanks to Mach Kobayashi, and this MSDN blog post.

Processing Keystone library amended for multiple projectors

I also used the excellent Keystone Processing library by David Bouchard to register the projectors. I expanded the library to work with two projectors, so that the image could be split into multiple adjustable images. In hindsight, I would definitely do more work on the keystone system. It’s almost impossible to adjust the image using handles that are being projected off the edge of the building!


There was also a last minute panic as projectors were repositioned just before the show, forcing me to reprogram the keystoning, and some stressful vector maths to reposition and size the text path. And poor Tom of BrightonArt dropped his MacBookPro onto the corner of a flight case. But on the plus side, it made some beautiful glitch art πŸ™‚

Broken screen as glitch artwork

I love working with large scale projectors and I’m looking forward to getting involved with more events like this next year. I’m also enjoying Processing – there’s a lot to love about it. I’ll be sure to keep you informed of my progress πŸ™‚

Bang Dream Machine : Directed by Abbie Stanton // Kate Genevieve // Sarah Bird

First steps in Processing

My first steps in Processing

Robert Hodgin and Jeremy Thorp both told me I should give Processing a go last time I saw them. And last week I had the perfect excuse – Jamie Matthews presented a great session last week at FlashBrighton on how to get started.

My first steps in Processing

Jamie did a great job of explaining some of the philosophy behind Processing – and I love the fact that it’s a programming language especially for artists. It’s quite different from Flash – things don’t really stick around and move – if you make a circle, it’s not like a movie clip you can move around, it’s just a circle that’s drawn on the screen.

So if you want to move the circle, you have to first clear the screen, and then redraw it in its new position. It really is like a canvas!

It kinda reminded me of the early experiments I used to do when I was a kid on my BBC micro πŸ™‚

Anyway, I made some 3D cubes flying through space using the OpenGL library, which I found kinda buggy. My cubes didn’t seem to clear every frame like they were meant to. But if I put a slight alpha on the cube material it seemed to work.

And I had to use translate() and rotateX() rotateY() to move this kind of cursor thing before I drew my 3D object. I’d then have to reset it to start again and draw the next cube. And the best way to do that was by pushing a new matrix on to the stack, using that to draw the cube and then pop it off the stack when I’m done with it, which is a kind of strange concept to me.

So here’s the code, just for the record πŸ™‚

import processing.opengl.*;
int numCubes = 500;
Cube[] cubes = new Cube[numCubes];
float cameraZ = 0;
void setup()
  size (500, 500, OPENGL);
  for(int i=0; i<numCubes; i++)
      cubes[i] = new Cube(random(500),random(500),random(-1000,500));
void draw()
  //set up some different colored lights
  pointLight(51, 102, 255, 65, 60, 100);
  for(int i=0; i<numCubes; i++)
class Cube
  float x,y,z,xRotation, yRotation, xSpin, ySpin;
  Cube(float xpos, float ypos, float zpos)
    x = xpos;
    y = ypos;
    z = zpos;
    xRotation = 0;
    yRotation = 0;
    xSpin = random(0.1);
    ySpin = random(0.1);
  void render(float zoffset)
    xRotation += xSpin;
    yRotation += ySpin;
    float newz = ((z+zoffset) %1500)-1000;