For this homework, I paired up with Ridwan because we wanted to do it at home (we’re roommates). Initially we wanted to do a projection mapping on mannequin heads, but that would not fulfill the brief ("find an element from a space, room or wall and augment it"), so we pivoted and decided to do something else.
(This idea is scrapped)
Both Ridwan and I are from Singapore and we call our families and friends every now and then. However, it is often hard to maintain conversation with them because of the 12/13 hours time difference. When we call in the morning it is night for them, and when they call in the morning it is night for us.
So we thought of projecting a view of Singapore onto our living room wall, so that when we call to Singapore we can feel that we’re in the same time zone as our families & friends.
Very bad sketch of our living room
There’s an empty spot in between two windows in our living room, and we thought of projecting a third “magic window” that looks out to a view of Singapore.
Here’s how we did it:
Get a live feed of Singapore
Overlay a PNG of our window frame over feed
Stream Chrome into MadMapper
Adjust the projection output on MadMapper
1. Get a live feed of Singapore
I googled around and found this video on Youtube
It is a live feed of downtown Singapore (I think it’s Tanjong Pagar?) and for our projection this is perfect.
2. Overlay a PNG of window frame over feed
Ridwan took a picture of our window frame and made a PNG from it. The window panes are transparent, and the area outside the frame is black. I made a simple HTML page so that the PNG lay over the live feed.
3. Stream Chrome into MadMapper
This was the trickiest part. MadMapper and Syphon do not have the best documentation, so it took us a while to figure out how to stream Chrome to MadMapper – we only found tutorials of streaming Processing sketch into MadMapper.
We eventually found Syphoner which uses the Syphon protocol and could stream any open application as a Syphon Server.
I have to say that the streaming is not smooth and very choppy, though.
4. Adjust Projection Output
This part was pretty straightforward if not for the new interface. In the tutorial the input selector was on the left and in the new version it is on the right.
But we managed to do it and there was not many adjustment needed since we’re projecting a rectangle from a proper distance.
Here’s the final product:
If I had more time I would love to add some interactions to it, like changing the window scene to Jakarta (I’m Indonesian) via a voice command. Or, it would be interesting to test call my friends with this window as my background and see how it alters the experience.