/PROJECTS / MIRRAGE
CONTENTS
Speculative Design
Computational Graphics
User Experience
Yuri and I began with a simple question, "What does it mean to interface?" Interfaces exist to manipulate information². The limits of the point and click hardware, however, acts counter-productively to a creator's capability.
Examples of an interface sourced from Are.na
The pioneering creative tools in history have been text editors³ and CAD software⁴. Although, the industry now has mostly stagnated to process-level improvements than hardware-level innovation⁵.
After a series of grounding prompts⁶, what converged was a problem statement — "How might we reimagine collaborative workspaces for organic collaboration and seamless output?"
Prompts for highlighting the state of creativity, collaboration and creative output
A bunch of "What if?"⁷ scenarios helped us envision our ideal world. We ideated products and then ponder secondary consequences of such experiences existing in the future.
Guide for future building exercise
Diving into the Details
We avoided early validation⁸, and moved to concrete sketches. Our primary idea was a table-top device that projects an interface to draw on. We aspired a seamless participation without the constraints of screens and keyboards.
Ideating interactions on the desk with sketching
We were introduced to the idea of video sketches⁹ as a method to quickly materialize ideas, and to gather early feedback.
Yuri and I both dreamt of collaborative workspaces with an open canvas that encourages organic interactions.
VIdeo sketch for Mirrage, showcasing early ideas
We sketched, preconceived the form, and the emerging artifact was a compact rectangular device that sat on the middle of a table.
To secure the anatomy, we made paper prototypes, then iterate to higher fidelities. We kept a modular approach and respected object's functional and ergonomic facets.
Explorations on the form, interaction model and physical prototyping
The highest fidelity was best communicated as a series of renders. The face of the modules were turned to glass screens for each joining member.
We kept the mapping relatively simple with a power button at the center, since industrial detailing wasn't the primary focus of the project.
Final device renders featuring four touch modules
With the "Wizard of Oz"¹⁰ technique, we used rapid prototyping¹¹ as a way to communicate faster and gather feedback. We sourced the gear and started brainstorming the necessary code.
Setting up the mini projector, a webcam and aligning the setup
Coding the Interface
Owing to critique sessions, a recurring suggestion was to focus on the "eye of the duck" interaction. We reduced the interactions¹² to the drawing aspect of the concept.
We used a color detection ML algorithm to detect and approximate color values. A trace of line was to precisely follow the color movement. We aligned the code with the logistic setup and achieved the desirable quality.
Building the gloves, facilitating the critique sessions and coding the interface on p5.js
Demo Preparation
We took time to investigate ideal ways to put together a suitable environment¹³. A dark room with ~10% light was concluded, accompanied by a poster to attract audience.
We encountered new challenges with lighting and the gear, but we patched up a good setup in the end.
Planning the environment, poster and constructing the physical setup
Prototyping Exhibition
The exhibition¹⁴ kicked off with inspiring creations at display. The intellectual energy from designers around the city started to pour in.
Keeping the latency low and accuracy high was a challenge. The end result wasn't perfect, but based on the feedback, the concept was communicated well. We were met by surprising reactions and thoughtful advice that deeply impacted us.
Video compilation of Mirrage exhibition experience
All good things end.