design – code – interaction

Encouraged by previous results I decided to try to play more. This time in 3D. By 3D I mean projecting on the object in such a way that it looks like you are actually projecting from different sides of it.

2D in 3D – Lets say we want to project a rectangle on one of the sides of a cube. It’s easy when the projector is exactly in front of the target side.

If not then we will quickly observe a keystone effect. Simply speaking the image will be distorted.

How to overcome that? We just have to project image that looks like the projector ’sees’ it.

Ok. So now we know the theory let’s talk about how to apply it in practice. All I need is some way to distort an image so it looks like a ‘viewed from the side’. There is a Processing library for that, vvvv patch, or even specialized app called VPT (video projection tools) . Non of them allowed me to program my own visuals on arbitrary number of surfaces (and vvvv is Windows only..). So I made my own Processing sketch which for defined number of rectangles displays handles in each corner that can be dragged around to match target geometry.

Corner – As a first victim or my new projection I have chosen a corner in our studio.

Cube – After some time I noticed an empty box lying on a desk… guess what I did..

3D in 3D – is projecting 3D graphics on a 3D object. While it can be done it’s quite limited. The problem is that it looks good from only one point of view. As you can see on the image below in case ‘a’ when we are standing in front of the projected surface everything looks good. We can get the feeling of depth and so on. But immediately once we start moving more to the left or right and viewing angle increases the image becomes more and more flat – case ‘b’. The last case ‘c’ shows what would we expect

I had one attempt to display something 3D but it wasn’t very successful to I decided to spend my time tweaking my 2D code.

More examples? Look here or here.

Projection mapping is making projections in a way that they match the surface they are projected on. This way we can use projector for something much more interesting than flat powerpoint presentation like VJ projections. As I was invited for vivisesja this year I decided to play a bit with Processing and see what I can do during two weekends.

2D in 2D – This is how I call projecting 2D graphics on flat (or almost flat) surface. We have some cool pipes going across room and wall in our studio so I chose them as my projection target.

Equalizer – first test was simple. I have audio reactive bars and I want to project them so they match the pipes. How to do that? I made a sketch that displays 4 rectangles. I was doing it by hand in code so I spend some time to make them match the pipes perfectly. This gave me a mask that I could use for limiting projection only to the pipes. Having positions of the rectangles I programmed animated bars so they matched this positions. Results were super good, as expected

The only trick here is to adjust projector brightness so the black is invisible on the wall.

Sunset – it’s time for some magic. What would happen if we invert the mask so we project everywhere beside the pipes?

People usually say that’s the best one of my first tests. It’s somehow counter intuitive and surprising when watched for the first time.

The only issue with this one is that when observed from a side you get shadows from the pipes so it doesn’t look so good anymore.

Sunset – this time I wanted to play with some more complex mask and couch next to the pipes looked like a perfect target. I took a photo of the couch, draw an outline of it, filled the shape with white and projected it back on the couch.

Of course my shape wasn’t perfect so I had to retouch it a bit to remove all the gaps. I made a Processing sketch that was constantly reloading the image for projection so every time I pressed Cmd+S I was able to see the changes almost realtime.

Want more (especially large scale) projection mapping examples? Look at this, this, this and this.