The Other Side: A Choice-based Interactive Projection System
Overview
The Other Side created an interactive projection system for the Askwith Kenner Global Languages and Cultures Room on Carnegie Mellon University campus.
It is a polling platform that is directly integrated onto the glass wall. Our team aimed at building an interactive experience that gives an identity to this multipurpose room. This experience will allow students and professors on the CMU campus to contribute to its content and share their opinions on topics related to language and culture.
Demo
Video trailer of our final deliverables and design concepts
Interaction prototype on the glass wall before pivoting into VR simulation
My Roles
Unity Programmer & Interaction Designer
Platform
Frontend: Unity (C#) + Projection + Phidgets
Backend: Python + Desktop
Team
Ruchi Sanjay Hendre
Annie Huang
Hanhui Lu
Ningshan Ouyang
Contributions
As the lead programmer:
-
Designed the whole system workflow and architecture
-
Implemented the display application in Unity with a selection menu and three template scenes
-
Simulated the interactions and physical environment in VR and distributed both 2D desktop and VR builds (Oculus Rift + Quest) for playtesting
-
Wrote technical documentation for future developers
As the interaction designer:
-
Defined and designed the flow of interactions on the glass
-
Finalized the use case of three templates and UX details with the UX designer
-
Wrote design doc for future designers
Architecture/System Design
Since we did not want only to build the interaction alone and leave it static, we build the system with both frontend interaction and backend editor. Here's the architecture diagram that I drew before the implementation and iterated with project requirement:
Here present two main components of this system: Display Application and Backend Editor. The Backend Editor (Python) reads and writes instance data to files in the local files. The Display Application (Unity) reads saved instance data, gets input from Phidgets sensors and writes user voting results back to the Result Data folder. The Display Application with the settings file is located in the folder on the local desktop.
Flow Chart
Interaction Design and Implementation
The Display Application comes with three templates; each of them is loaded as a Unity scene and can be switched in real-time in the menu.
The application supports two displays: the laptop/desktop screen inside the room is displayed with a template selection menu and projection settings; the projector is connected with the laptop/desktop and projects the content on the glass wall to the public.
For each template, the user interaction is divided into four states as described in the following finite state machine: (example below for text template)
If the user switches the content in the menu or closes the application, the current voting result will be saved on the local desktop as JSON files as the format below:
