Worry Capsule Tree

talk to the tree, let it listen and store your worries

Interactive Installation | Web Development(p5.js) | User Experience Design

Worries surround us every day. However, as time passed, we always realize how trivial those problems are in comparison. Worry Capsule Tree is an interactive installation that listens and stores people’s current worries and sends those back to them in the future, thus allowing its users to retrieve their previous worries and revisit the past selves.

Project Brief

A 6-week Interactive Installation Project teamed with Hau Yuan

Showcase

  • ITP Winter Show, New York 2017. 12. 17 - 2017. 12. 18

  • Maker Faire, New York 2018. 09. 22 - 2018. 09. 23

My Role

Voice Recognition | Database Server | Physical Computing | Fabrication | Front-end Development | Experience Design

Technical Features

Design: hand sketch | sketch | After effects | illustrator

Coding: Voice Recognition (p5.speech.js) | Database Server (M-Lab) | Interface (After Effects/p5.js/Sketch) | Serial Communication(Arduino)

Physical Computing: Arduino MEGA | USB microphone | Jumbo RGB LEDs | Neo-pixel RGB Lights

Fabrication: Soldering | Laser Cutting

 
 

 

How it works?

 
tree_IxDBehaviour.png
tree_workflow.png
  • When the user comes to the installation, he will see our tree with a computer and a microphone in front of it.

  • The interface on the computer screen will instruct the user to say “hello” to the tree.

  • The greeting from the user will trigger the tree to communicate with him and encourage him to tell it the current worry he holds.

  • The tree will listen, remember and store the worry from the user.

  • When the worry is being stored, the tree installation will be gradually lit up.

  • In the end, the user will find his worry being stored in one of the capsules on the tree.

  • The user can choose to tell his contact information to the tree to get his worries retrieved in the future.

 
 

Design and Fabrication

 

Tree Design

 
 

Interface Design

 

Design progress

Ideation

  1. Brainstorming

  2. Make design plans

User Testing

  1. Test with users to decide user behavior

  2. Develop the interactions

Fast Prototype

  1. Create different possible designs

  2. User testing with the prototypes and develop tree design

Development

  1. Physical computing

  2. Programming

  3. Fabrication

 

Ideation

“I really want to store my anxiety into a place and unload my pressures.”

The original idea of Worry Capsule Tree comes from one of the creators Yuan’s desire to release daily stress by keeping his anxiety into a safe place. After Yuan talked to me, this idea of telling and storing worries reminded me of the time capsule, whose function is to help people store memories that are accessible a long time later. 

Both of us liked the concept of storing current anxiety and retrieve it in the future. On one hand, it helps release the stress we have now, and on the other hand, it provides us with a chance to re-visit our past selves and see how much we have overcome and grown.

Since we decided to build something that deals with emotions and memories, the questions of:

“how would the users best communicate with this capsule?” and “how do they emotionally engage with the device” becomes very important.

These questions triggered us to first think about the appearance of our device. Our first thought is the image of a tree. Trees have the ability to absorb substances from the environment and convert them to nutritious fruits. We think it’s a metaphor for transforming people’s anxiety to their assets in the future. Therefore, we decided to build a worry capsule tree which can respond to the users and store their worries. This has brought us to the very first stage of our design.

 

User Testing

If you could store your anxiety into a tree, would you prefer to talk to it or write to it about your worries?

In order to know which way makes people feel more comfortable to interact with the tree and release their anxiety, we did user testing with 10 people.

Based on our research, more than half of the testers prefer speaking, in particular murmuring to the tree because they believe that creates an intimate relationship between them and the tree.

We finally decided to create an interactive capsule tree which can listen to its users and store their worries.

 

Fast Prototype


Once we decided the main interaction behavior, we built two fast tree prototypes. We ask different users’ opinions on our designs. We decided to follow my (Xiran’s) proposal, a more sculptural design because we believed it looked more interesting and can create more intimacy between our tree and the users. We adapted the design later and finished with the final outcome as shown in the video.

Yuan’s prototype

Yuan’s prototype

Xiran’s prototype

Xiran’s prototype

 

Development

Coding

1

Voice recognition

In order to have the tree “understands” what the user is talking about and make it respond to the user, we used voice recognition to translate the speech of user into text.

The voice recognition is done by p5.speech.library which can translate audio input into text.

 

2

Store information in a database

To store the worries in the tree, I used M-Lab’s database server. Basically, you need to register an account at M-lab, create a database, then a collection. Each account will have an API key, you will be able to use that API key to access your database, upload data and view all the documents you have sent to that database.

Easy Tutorial on how to use M-lab to create database and upload data

M-lab’s tutorial (Also easy to follow)

These two websites provide some very good tutorials on how to set up a database at M-Lab and store data into it.

While M-lab’s own sample code is written in Jquery, I used p5.js to do the same thing. I majorly used HttpPost() function to push information (voice text array) into my database.

 

3

User Interface Programming

All animations are done by After Effects and are embedded and organized into the interface using p5 DOM library.

 

4

Serial Communication

To add all the light effects to the tree, we used p5.serialport.js library to do serial communication. Basically everytime when we want the computer side to trigger the tree to change its behavior, we send one-byte binary (a number) from the computer to Arduino by doing p5-to-Arduino serial communication.

 

Physical Computing

We used Jumbo RGB LEDsNeopixel RGB LED strips as well as some white Jumbo LEDs.

We first tested all the behaviors of the lights by just doing Arduino, using some switches and a sound sensor.

After we made sure that everything worked well on Arduino, we used serial communication to allow the computer to control the behaviors of all lights.

Animated GIF-downsized (1).gif
 

Tree Fabrication

We created the physical tree using laser cutting and soldering techniques.

IMG_2003.JPG
 

IMPOSE

A Motion Capture Live Performance

Why do social norms and stereotypes still exist ? How exactly does society impose these norms ?

IMPOSE is an interactive, immersive motion-capture driven live-performance that explores different social norms, their beginnings and how they continue to be enforced by society on an individual.

 
 
 
 
5L5A2135.2019-03-03 21_57_59.gif
 

 

Projection Mapping archive

Floating Staircase 2018

by Chengchao Zhu, Tong Wu, Xiran Yang


Vans Projection 2016

 
stairs.gif
 

Shy Mirror

shymirror.jpg
 
 

Showcase

IMA Winter Show, NYU Shanghai, China | 2016. 12

#interactive Installation #Maya #Arduino #Fabrication

Collaborators

Xiran Yang - Designer | Fabricator

Zhang Zhan - Developer | Fabricator

Alexis Zerafa - Video Editor | Fabricator

Introduction

Shy Mirror is an interactive installation using mirror as the major component. While mirror is often used as something that helps people to view themselves, this installation tries to reverse that function and turns mirror into an intermediary that stimulates people to view others and pay more attention to others.

When one approaches the mirror and tries to view him/herself, the mirror will turn away from the viewer till he or she steps away from it.

 

Demo

 

Process

Early Stage Sketch

Early Stage Sketch

Design

Constructively speaking, Shy Mirror is composed of two parts—the upper part and the bottom part. In the upper part, a 40cm*100cm mirror is hung on a wooden frame by string. The wooden frame is connected to the 90cm-tall wooden box at the bottom by nails. The bottom of the mirror is connected to a motor attached on the top of the box. In the front side of the box(also the side where the mirror is facing) there is a distance sensor used to detect the audience’s movements.

Idea

When the viewers of Shy Mirror approach it, and when they stand close enough to the installation, the distance sensor will detect their movements. The sensor will then send a signal to the motor, asking it to start rotating 90 degrees. The motor will start moving and as a result, the mirror will start rotating 90 degrees as well. Therefore, the person standing in front of the mirror would not be able to see himself. Instead, the person is able to see others in the mirror while the mirror is turning away from him. And when the mirror finishes rotating, it will not turn back unless the person moves away from it. As a result, people who intent to look at the mirror and pay attention to themselves will be forced to pay attention to others and look around in the end.Therefore, Shy Mirror transforms people’s self-awareness to attention to others.

The idea to build this interactive installation is driven by our daily observations of people’s behaviors. We have noticed that people care about their own outfits, how they look and how they sound to others. It seems that it is easier and more natural for individuals to pay more attention to themselves than to others.

pc012926.jpg

Meanwhile, mirror is almost the most common and powerful tool that allows individuals to view themselves and appreciate themselves. Interestingly, because of the law of reflection, mirrors can also prevent people from viewing themselves and instead let people look at others. When someone turns a mirror to a certain angle, he would not be able to view himself in the mirror but other people. And when a person is looking at others in the mirror, these people who are viewed by that person are also able to in return see him in the mirror.

In addition, it seems that when people pay attention to themselves, it is not always because they are narcissistic but because they care about others’ opinions. Self-awareness and the attention to others are not contradictory but somehow always inevitably bounded together. In order to juxtapose self-awareness and the attention to others, as well as considering the interesting characteristics of mirrors, we decided to make a “Shy Mirror”.

Construction

To accomplish this installation, we used wood to build the structure so that it is strong enough to hold the mirror and motor. Arduino and the distance sensor are used to detect human movements and provide feedback accordingly. We intended to build this mirror installation narrow and tall so that each time it can be viewed by only one person. Therefore, the sense of “self-awareness” would be stressed. We also intended to locate it in a room where other people will be so that the person who interacts with our installation will be able to find people who he can pay attention too. The installation is both durable and detachable because each of its parts is connected by nails (except the top of the mirror is connected to the frame by string in order to increase its movability) and can be moved to any place as long as there are power and audience. It can also be a prototype for future larger installations.

Though our team initially planned to encourage our audience to reconsider the relationship between self-awareness and attention to others, we ended up paying more attention to others than ourselves. During our working process, we have paid attention to each other and learnt from each other. We have paid attention to our peers and their feedback. We also have paid attention to our instructors and their advice. In return, we have not only delivered our concept by successfully building Shy Mirror, but also experienced this concept ourselves and deepened our understanding of it.

 
shy mirror.png
 

Panda Operation

 

Showcase

IMA Winter Show, 2016. 12 | NYU Shanghai, Shanghai, China

#Wearable #LaserCut #SerialCommunication #Arduino #Solder #Fabrication

TEAM

Xiran Yang - Designer, Developer and Fabricator

Collaborators: Susie Chen, Flora Lu, Annaluz Cabrera

Introduction

Panda Operations is an interactive game made of fabric and Arduino. It requires the gamer to pick up different bones in the holes on the panda without touching the holes’ edges. The edges are made of conductive fabric; and the tool a gamer will use to pick us the bones is a pair of metal chopsticks. The conductive fabric is connected to the digital pins on an Arduino board using snaps. While the metal chopsticks are connected to ground. When the chopsticks touch the edges, a signal would be sent to the Arduino, and the code written will trigger an mp3 player to play audio files notifying the player that the game is over.

The game is designed for both children and adults, therefore a cute panda is chosen to make the game more inviting. The fluffy fabric which makes the panda is aimed at creating a more intimate and comfortable user experience. By using fabric as the major material and connecting the fabric to the electronics using snaps, users are able to wash and clean the game.

Techniques

Fabrication, Laser Cut, Arduino, Serial Communication

     
    panda operation.png

    Installation 1933

    Interactive Installation Prototype | 2016, Shanghai, China

     

    Collaborators

    Dyadra, Kevin Pham, Xiran Yang, Zhang Zhan

    Introduction

    1933 Installation is an interactive installation prototype.

    1933 is now known as a popular building in Shanghai where many theaters, creative startup companies and stores are located. However, this architecture was originally built as a slaughter house.

    “Blood” flows down through the stairs, with people kneeling down, drinking and enjoying it without consciousness. The installation is trying to juxtapose the current capitalist/consumerist nature of 1933 with its bloody slaughterhouse history.  It encourages the audience to make a connection between the past and the present.

    The audience are able to control the blood flow speed in this project by rotating the IV button. While in the real-project, the speed of the blood flow will change based on the number of visitors in the building.

    4.png

    Chinese Rap

    Independent Book Design Project | 2016. 03 New York, U.S.

     
     
     

    Introduction

    Spring 2016 | New York “Chinese Hiphop” is a self-designed and self-printed book. This book introduces some Chinese rap culture, its history, some signature Chinese rappers and their representative songs. When printing the book by myslef, I laser cut CD outlines on the book cover as well. The square shape of the book and laser cut CD outline on the cover are aimed to resemble a rap mixtape.

    2.jpg
    3.jpg
     
    BookStack.jpg
     

    Earring Book

    Independent Book Design Project | 2016. 05 | New York, U.S.

     

    Introduction

    Earring Book is a book design project. It contains four pairs of book earrings that are wearable. Four different ways of binding including Japanese binding, perfect binding, pamphlet binding and fold book binding are adopted. The inner pages are left blank to allow people who wear these earrings to create their own contents and to show their different personalities. The style of the cover which hangs these earrings is inspired by traditional Chinese screen design.

     

    Design Thoughts

    In this project, I used papers, hardboards, headpins and beads to make tiny book earrings that are wearable. I adopted four different ways of binding including Japanese binding,  perfect binding, pamphlet binding and fold book binding. I have left the inner pages blank because I want people who wear these earrings to create their own contents. I created a larger cover to hang these earrings, whose style is inspired by traditional Chinese screen design.

    No matter what genre the content of a book is, a book is trying to tell a story. People all have different personalities and personal stories. Their personalities are shown partly through their choices of fashion. What they choose to wear is a way to show their preference and what kind of people they are.

    These earring books are such items that function both as stories themselves and intermediaries that help to reflect personalities.

     
     
    1.jpg
    2.jpg
    3.jpg
    4.jpg
     
    Panda Operation 1.png