Message from the Upside-Down

2017 • PERSONAL PROJECT FOR CREATIVE CODING COURSE

OVERVIEW

"Message from the Upside-Down" is a voice-enabled interactive application inspired by Stranger Things that allows users to type or use their voice to send a message that will appear on the "Stranger Things Wall" from the Upside-Down. Try the web app here.

MY ROLE

Programmed the interactivity in p5.js and designed the visuals in Illustrator.

PROCESS

I began my process by researching p5.js, a JavaScript library for creative coding. Exploring the examples and researching the p5.js add-on libraries helped me gain an understanding of what was possible and gave me a few ideas on the different directions I could take the project. After hashing out some of these ideas, I decided on the initial concept for "Message from the Upside-Down", broke down the project into steps, and started to code. 

After solidifying how the message generator would work I began designing different design components in Illustrator. The final step in my process was combining my code and design to create a functioning interactive voice-enabled prototype. 

RESEARCH & IDEA GENERATION

To begin my project I conducted secondary research online by studying the p5.js documentation. 

After reviewing the documentation I became interested in the p5.speech library for voice synthesis and recognition and started brainstorming different ideas around this topic. 

As a Stranger Things fan, I was inspired to create an interactive experience that represents one of the iconic moments of the show. 

I decided to incorporate the p5.speech library by allowing for "Message from the Upside-Down" to use voice recognition to detect the message a user wants to send. 

CODE

I started the coding process by writing an initial code plan that described how I wanted the app to work and defined inputs, outputs, and core functionalities. 

After writing out my thoughts, I began to build out iteration 1 and to test out the app. During this process I realized there were other features I wanted to add and wrote code plan 2 which more clearly defined my goals and next steps. 

After more testing and asking people for feedback I got to the place where I could start working on the design.  

DESIGN

Using Adobe Illustrator I designed the wall background and used the p5.js drawing functionality to place the lights on the background.

PROTOTYPE

To send a message of your own click the "Try it out" button below.