Misty Window




An interactive installation that displays a movie hidden under a circular viewport controlled by a custom tracking code on the viewer with a webcam.

The idea behind my project was formed through a mixture of different concepts and inspirations. I knew from the beginning that I wanted to do an interactive installation, however the question was where do I start. I faced many difficulties upon deciding the direction I want to take for the project, so to proceed I decided to explore Processing and conduct simple experiments to understand the limitations of the program. I tried to test different forms of water from bubbles to dry ice, however due to the time constraint my options were limited. Following my tests, I tried to figure out a way to use water as a trigger, but since we are using Processing, I chose to project or use projection in an unconventional way. After a great deal of research for inspirations, I came upon various projects that utilize projection; one of the projects was a projection of a 3d rabbit on steam using three cameras.



The installation consists of a fog screen, webcam, and a projector. The fog screen intended to be used as a display for the movie. The idea behind the projected movie was inspired by the concept of this project. Since it is all about water, it was fitting to choose a video that explores the sea and the creatures it holds. The way the installation works is as the viewer approaches the installation, a movie will be projected on the fog. As they get closer, the webcam will detect their faces using FaceOSC app- Tool for prototyping face-based interaction- and they will be able to explore the video through a circular viewport. The viewport is scaled and positioned according to the movement of the head. As the viewers move towards the installation and get closer, the circle will increase in size and as they move further it will decrease allowing them to control the zoom level of the scene. Another part of the installation is a box with bright LED that only lights up when contacted with the steam. The viewers will be provided with transparent boxes that they will use to fill it with the steam coming from the screen. This represent




  • Processing
  • FaceOSC
  • Video Projection Tool (VPT)



  • 2 Humidifiers
  • 47 Straws
  • 2 hoses
  • Black board frame
  • 1 Projector
  • Macbook pro
  • Logitech webcam web cam





IMG_6299 copy     20120127_1200499




IMG_6319     20120127_120222










Screen Shot 2014-11-16 at 7.33.21 AM







The Drift table

Water Light Graffiti



Smile TV









Experiment 1

In this experiment I wanted to test the projector and to explore projection on different surfaces. For this experiment I used VPT -multipurpose projection software tool, and since it was my first time using it I tried to explore it by projecting onto different surfaces with various shapes. In this video, I tried to map a video that was already installed in the program onto a sweatshirt. I used three different layers of the same videos to cover the whole shirt. Due to my limited experience with the program, it took me a while to cover all of the edges, however after trying multiple times I was able to achieve the goal. This helped me to understand the tricks involved in mapping and how to apply this knowledge into my project. As I learned how to control each layer I discovered the capacity of the VPT to produce complex projects.




Experiment 2

The next step in projection was to choose the surface and the items involved. At the time of this experiment, I have already figured out the concept behind the project so I tried to play with the materials. My first choice was to project on steam, so I bought one humidifier and a couple of straws to produce steam that has the structure of a fog screen. I also took the hose out from my vacuum to connect the straws to the humidifier. The tricky part of this experiment was the uncertainty of how clear the projection would be. While testing I found out the best thing is to project things with less detail for the best resolution. The colors should be bright and have strong contrast between them.




Experiment 3

After the previous experiment, I had to figure out the position of the projector to the fog screen. Trying to do so, I encountered multiple problems. I had to create 3 prototypes to find out the optimal position, but sadly each one of them failed. One of the problems was with the straws because I had to tap each two straws together multiple times to ensure that the steam will not escape. However, the tape couldn’t seal the steam because I didn’t use waterproof tape. After solving this issue, I commenced testing the position of the fog screen. The first position I tested was based on my initial idea for this project where the fog screen will be viewed from the top. However since the steam coming from the side and the straws are horizontally laid, the steam was not strong enough and water kept piling up inside the straws. Another issue, the projector has to be placed within a certain distance and the best position for that is to have the straws position vertically.




Experiment 4:

In this experiment, I tested FaceOSC app for the first time. In order to figure out how does it actual work I had to look for examples. This is one of the codes I found belongs to Adam Bendror. I tried to mimic the same style to understand more about the tracking of each feature but I couldn’t because of the time limit. This illustration was made in DMesh. However, I tried to learn how exactly does tracking works in FaceOSC.






Experiment 5&6:

In this experiment I wanted to explore the visuals projected on the steam. I wanted to make the viewer explore the screen with something similar to looking through a peephole. At first I didn’t know how I could achieve that in Processing so I tried to draw a circle but of course it wasn’t successful and I couldn’t figure out how I would be able to make it. So I tried another option less direct but much simpler. I draw a black rectangle and subtracted a circle in the middle with photoshop. This rectangle will be following the head movements using FaceOSC so for that I had to make the shape really big so when the camera track the face we cannot the see the edge of the rectangle. After I achieved that I wanted to explore other options for what I can hide underneath the peephole so I uploaded a movie clip and the result was amazing. I loved the movement in the video and the soothing music. After that I tried to make another version with white rectangle instead of the black to see later in projection which one has more impact. The best thing in Projection on steam is to choose visuals with least details and with the strong colors and contrast to obtain the best resolution.





Experiment 7

The idea was to connect two applications that are working on a video together. I wanted to create visuals in processing and pipe them into VPT for live interactive Projection. I thought it was going to be hard and tricky since I’m using both FaceOSC and Processing and now I’m adding VPT to the mix. However, converting the file was indeed an easy solution. All of this was possible because Syphon server can work really well with audio and video. Syphon as explained in the official website (Syphon is an open source Mac OS X technology that allows applications to share frames – full frame rate video or stills – with one another in real time). It allows third party to access any video. To apply the syphon code, I had to download the library in Processing and then I had to write a couple of codes.





Experiment 8:

In this experiment, I tried to add another interactive part to the installation that highlights the water (mist). After coming up with the final concept of the installation, I started exploring ideas that can be done with Arduino.

After much research I decided to use a steam sensor to trigger a bright Light. In this case, the viewer will be offer a transparent box that they can fill it up with the magical mist (steam coming from the screen) and after couple of seconds the box will light up. After the mist solely vanish, the light will fade out as well. This experiment had a mesmerizing affect with the colorful LED surrounded with an aura of fog.




Processing is a very useful tool to achieve greatness but time is needed for that. In this project I encountered multiple problems all related to timing issues. As I was adjusting and mounting my installation things started to collapse. Some of the straws started to fill with water and that stopped the steam from coming out. It actually worked perfectly the week and the night before but an hour before the presentation everything seemed not to work. In the last minute I was able to save some of the straws but I couldn’t show the second part of the installation.



Thank you to Jenna and Glen for their tremendous help.