Worry Capsule Tree

Showcase

ITP Winter Show, New York, U.S | 2017. 12. 17 - 18

UPCOMING: Maker Faire, New York, U.S. | 2018.09.22 - 23

#p5.js #HTML #CSS #Arduino #SerialCommunication #VisualDesign #Fabrication #LEDs

Role

Xiran Yang - Voice Recognition | Database Server | Physical Computing | Fabrication

Hau Yuan - Visual Programming | Physical Computing | Fabrication

 

Technical Features

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

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

Fabrication: Soldering | Laser Cutting

Introduction

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 stores people’s current worries and sends them back in the future, thus allowing its users to retrieve their previous worries and revisit the past selves.

Demo

 
 
 
 

Working Progress

tree_developmentProcess.png

 

User AND Tree interaction

tree_IxDBehaviour.png
tree_workflow.png

 

Tree Fabrication

tree_Size&Structure.png
tree_arrangement.png

 

Coding

Voice recognition

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

Store information in a database

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.

User Interface Design

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

Serial Communication

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.