Rebecca Skurnik
Rebecca Skurnik
1D6A0266.JPG

Fluto

Fluto

 
 

project overview

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.

 
IMG_4882.jpg
main.png
IMG_4885.jpg
IMG_4874.jpg
IMG_4861.jpg
 

my role

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.

 

idea

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.

 

inspiration

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.

 

process

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.

 

sketches

sketch1.png
 

user interaction

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.

user_interaction.png
 

user interface

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.

fluto_userinterface.png
 

web- app design

Designing the first page of the UI using p5.js web editor

Screen Shot 2018-11-12 at 11.34.34 AM.png
 
flutoscreens.png
 

installation DESIGN

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.

IMG_4199.jpg
aaaaa.jpg
IMG_4202.jpg
IMG_4306.jpg
IMG_4308.jpg
aa.jpg
 

installation (technical) design

fluto_technicaldesign.png
 

led 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.

IMG_4286.jpg
 

fan design

fan-pwm-design.jpg
 

Client- Server Workflow

IMG_4458.jpg
IMG_4553.jpg
IMG_4550.jpg
 

prototype

IMG_4084.jpg
IMG_4518.jpg
 

DEVELOPMENT

 

INSTALLATION

 

Video of our documentation

 

EXHIBITIONS/Awards

NYCxDESIGN EXPO, May 2019

ITP WINTER SHOW, December 2018


ITP, Fall 2018

Pop-Up Window Displays Class, Professor Gabe Barcia-Colombo