Fluto is an interactive installation originally created as a window display for my Pop-Up Windows class at ITP. It is a life-size colossal wind instrument. With Fluto, you can conduct an audio-visual symphony alone, or with others by blowing into the microphone of your mobile device.
This was a group project with Yu-hao Ko, Meicheng Jia, and Caleb Ferguson. Since the window installation in November 2018, we have showed Fluto in the ITP Winter Show 2018, and NYCxDESIGN in May 2019, and plan to display it at other events, festivals, and exhibitions. You can visit flutopopup.com to learn more.
While we collectively made decisions and helped each other along the way, my team divided up our project into tasks. My main role was user experience and interface design, as well as the software development for the web application. I did this by creating a web application that would be able to connect a website to a server (Heroku) using Socket.io, and then output the data to Arduino which would control the voltage of the fans, and the LEDs of the acrylic tubes.
Our idea was to create an interactive installation piece that would engage people of all different nationalities and ages and prompt them to enjoy the experience together with others. We decided on an full-size “flute-like” instrument where people can play together by visiting fluto.us on their mobile devices, then choose a color (that corresponds to the same color tube as the instrument), and gently blow into their phone’s microphone to see the ball inside the chosen colored tube flow to the top of the tube. In addition, when chosen, each tube plays a different sound. With Fluto, people can use their breath and their mobile devices together as a tool for creating an audio-visual symphony. The video below documents our Fluto journey beginning from the ideation stage.
We wanted to create a window display design that was simple and beautiful. The color scheme and lighting we agreed on were pastels. We decided to design two window displays that were connected, as shown in the photo of the Hermes window below. In addition, we liked the idea of fans inside the window as shown in photo of the Nike window display.
Once we had an idea of what we wanted to create, we then decided on a simple and unique user interaction. We discovered that we were able to use the microphone on mobile devices as an input for our window installation. Since we wanted fans inside our windows, we thought that the interaction of blowing into mobile devices via the microphone would be a perfect input/output match, and that blowing harder would trigger the fans to turn faster.
There will be a decal QR code and the web- app link on the window. When users scan the QR code or visit the web -app link, they can then start interacting with the installation.
After figuring out the user interaction, we needed to decide on a UI for the web-app. We made various sketches until we came up with two UIs that we liked. We then did some user testing and found that people enjoyed one of the interfaces much more than the other, as it was physically easier to tap the buttons on that interface with their fingers.
web- app design
Designing the first page of the UI using p5.js web editor
Before fabricating our installation, we visited the site where we were going to install Fluto and took some measurements of the window. We then prototyped the design layout of the installation.
installation (technical) design
For the LED design, each colored tube had a gradient of shades within that color. We decided that the gradient would move up and down slowly while idle, and then light up when user selects it via their mobile device. The color chart of the different shades are shown below.
Client- Server Workflow
Video of our documentation
NYCxDESIGN EXPO, May 2019
ITP WINTER SHOW, December 2018
ITP, Fall 2018
Pop-Up Window Displays Class, Professor Gabe Barcia-Colombo