Marching cubes tunnel

At the beginning I was playing with using marching cubes algorithm to generate landscapes.

At some point I asked myself. What if instead of making mountains we start to drill holes inside the iso-surface? Hmmm. Just make it longer and narrower and you get… Guess what? A tunnel!

All that left is to add fancy colors and the sky. What’s nice is that you can play with resolution of the marching cubes grid. Low res looks kind of cool as well.

Star field

Doing particle star fields is easy. It’s just a bunch of quads front facing the camera.

But what I always wanted to do is kind of warp speed stretched stars. Like in Start Trek. I started by playing with accumulating frames over time but it was far from perfect. Finally I found a great tutorial on billboarding at Lighthouse3d. That made me think. Basically what you have to do is to place particles around the center of the screen facing Z axis. Then add a little bit of stretching… and bum! Done

Shattered DMA logo

This one was inspired by experiments of my mate Patrik from shiftcontrol. The idea is to use mask to gradually hide part of the shape and replace it with particles. This can be used to create effects like solid block appearing from dust or in my case shape breaking into small pieces once touching the ground.

The trick is to distribute particles in such a way that we can calculate normals at their positions to compute the lighting and to know when to hide / show them. I use Vertex shaders for that.

Updated:

Here is desktop version of the same effect with slightly bigger number of particles:

Final note on the iPhone emulator

Very often, especially when working with alpha blending I got annoying diagonal line across the screen and some texture errors. It works fine on the iPhone though. Strange…

Delta is an iPhone 3GS demo written in C++ and OpenGL ES 2.0. I use a bit of Objective C but mainly for creating window and managing resources like images or music. I started doing some experiments two months ago. But the real work started when Ninja (Mikołaj Kuik) came to Copenhagen with finished music 3 days before the party. We worked like crazy (I didn’t sleep for 3 days) and in the end we managed just before the deadline.

We took part in Wild / Console demo compo, ending up at 10th place out of 20. Here is screen capture of the demo:

Source code

As with the previous iPhone demo I decided to release all the source code so people can download it an compile for their iPhones (Apple SDK is required though). So if you are interested what other people think about Delta or just want to download source code of the whole project please visit Pouet.

Other demos

The winner of this year demo compo was Agenda Circling Forth by Fairlight. Being able to watch this production at Full HD massive projection screen was an amazing experience. Second place wast taken by fr-043: rove by farbrausch also a great demo but not so original as the first one. Last one prod that I would like to mention is Dramatic Pixels by PwP for Commodore-64. Very simple but very enjoyable to watch. Make sure you don’t miss other productions here.

Click on the image to see the full res version.

On request from several people I decided to finally release source code of my projection mapping projects. I wanted to make a Processing library from it anyway at some point but I delayed it so many times that it might never happen. Meet “Projected quads”:

Features

• - unlimited number of quads
• - support for static images and dynamic generative animations
• - loading and saving configuration to a text file

Download

ProjectedQuadsTest.zip [7kb]

How to use it?

Let’s say we want to display an image with perspective correction. First declare variables for our image and quad that will display it.

PImage    img;
ProjectedQuads projectedQuads;

Then in setup() function load the image, create projectedQuads object, set number of quads and assign textures to them.

void setup() {
    img = loadImage("checker.png");
    projectedQuads = new ProjectedQuads();
    projectedQuads->setNumQuads(1);
    projectedQuads.getQuad(0).setTexture(img);
}

All we have to do in draw() function is just call projectedQuads.draw();

void draw() {
    projectedQuads.draw();
}

Run the sketch and adjust corners of the quad using mouse or keyboard. Attached example source code explains how to use more quads and display dynamic graphic generated in processing.

Some other projects that I use this code for:

3xI

Reactive projection mapping during Vivisesja festival.

Shiftcontrol’s end of they

During Christmass meeting I did small projections to add some life to the globetrotters pub where it took place.

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.

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.

“Realtime, every time” that’s the motto of shiftcontrol studios – a small design studio based in Copenhagen that I joined in the middle of September. We did some projects together in the past and when I graduated from CIID they asked me to join them. I couldn’t resist

In addition to three other guys I’m bringing in my specialty in graphics programming, user interfaces and recently acquired experience in the interaction design. All that is a perfect match with their profile:

With a background in interaction design, focused on algorithm controlled animation, sensor driven interactive installations, web applications, broadcast applications and digital design, shiftcontrol applies a united process of design and development to its clients and users.

It’s gonna be a lot of fun.

Data Gestures is a title of my final CIID project. It’s a very busy period for me so I’m publishing only a small info now.

Description:

This mobile application is a result of exploration of mobile gestural interfaces for personal data mining. By providing means both for
collecting and visualizing data on the go this software tries to assist it’s user in deep understanding of patterns emerging in his everyday life.

Full info:

Every day is a stream of small actions and decisions that we make, from getting out of the bed in the morning to choosing what to buy for the dinner. Separately they might seem irrelevant but gathered together and put into right context might give a whole new insight into our life. This project is trying to answer how to design a mobile application that would assist us in collecting and visualizing this data. Proposed application is focused mainly on money spending of the user. We can add items that we buy and assign them to several categories. That data if carefully tracked it can provide us with information about things like eating habits or when put together with data from other sources it can give impression of overall quality of his life. Interface of the application allows us also to filter the data or search for specific information. Taking small screen size and gestural interface as a challenge Data Gestures project is moving away from data visualization paradigms known from desktop computing. Because of using multitouch input personal data mining becomes playful and useful at the same time. Buy being able to perform all this operation on the go and having dedicated interface tracking becomes easier. Data visualization available all the time with us (as long as we have mobile phone) is another incentive for gathering even more data hopefully influencing future decisions for a better balanced life.

Recently I had a discussion about my final project with Niels Clausen-Stuck (my advisor) from Designit and Jan-Christoph Zoels from Experientia. I still have to digitalize all the feedback that I got from them but for now here is my presentation. It’s style is something that I developed earlier this year – mixing post-it notes with photos. It’s seems to be working because people love it

At the end of July we (students @ CIID) were participating at Reebot #11. We did a small workshop where people interesting in brainstorming about their concepts could ask us for help. Here is small video made by Adam Little: