EMPTYROOM
Components:Web VR Experiment, Google Cardboard compatibility, motion graphics, and team collaboration
To capture the unique conection an interactive art instillation has with visitors and recreate that feeling on the web doesn't seem like a "quick weekend project." Yet at the annual Lehigh Valley Hackathon, that's exactly what my team of four set out to accomplish. By the time the three day event came to a close and EmptyRoom was complete, we not only ended up with a working virtual space that surrounds the viewer with art that moves only when looked at, but also the first prize in the Hackathon.
Enter EmptyRoom
Case Study
EmptyRoom began just like any other project at a hackathon: a pitch to everyone in attendance on the basics of my idea in hopes of attracting enough interest to form a team. During my pitch, I spoke about my admiration for contemporary interactive installations (such as Rafael Lozano-Hemmer's Tape Recorders and Random International's Rain Room) and the connection each piece creates with visitors simply by responding to their movement and presence. These simple responses are a delight to witness and these installations are immensely popular. I couldn't help but wonder if it was possible to recreate that same connection using virtual reality technology on the web, so it might able to be experienced by anyone, anywhere. In a sense, I wanted to build my own interactive artwork: digital interactions "installed" within the internet.
My pitch attracted the support of two talented KU designers, Lindsay Trzaska and Logan Burke, as well as a young robotics developer. Together we planned to create a simple virtual room using 3D shapes, with each wall set into motion only when the viewer is looking at it. However none us had substantial experience coding and designing for VR. With only two full days to learn and build our project, now codenamed "EmptyRoom," we quickly got to work.
The developer and I worked together to create our virtual room using Google's VR experimental code as our foundation, we were able to build EmptyRoom in a completely web-based way. With walls and a ceiling created using a 3D javascript library, EmptyRoom could be just as accessible as any other website.
In the meantime, Lindsay and Logan designed and created their own custom animations, which we hacked onto the four walls of our virtual room. The frame rate of the gifs was rewired to coincide with the position of the viewer's camera to ensure that the individual gifs would only move when the camera was pointed at them. After lots of crashed browsers and stress testing, we finished our project just minutes before Hackathon came to a close!
After our team's final presentation, we were ecstatic to hear that we were honored with first prize at the Lehigh Valley Hackathon! The judges told us their decision was based on what we had accomplished in relation to what we had originally set out to build. After watching everyone playing and interacting with our project, I knew that our team had captured that connection perfectly.