ITP Blog

Intro to Physical Computing - Week 6

October 17, 2018

The midterm assignment for Introduction to Physical Computing was to build a Halloween related project that utilized serial communication between an Arduino and a computer. I continued my ghosted phone fabrication project and coded a React app to send a serial signal to an Arduino Uno that would then send a digital signal to a transistor thereby activating a DC motor attached to the wooden phone.

Testing The Junk Circuit

The 1.2V DC motor for this project came from an electric razor I found in ITP’s junk shelf. Since I was upcycling razor components, I first tested a basic circuit with the DC motor by connecting it to a single AA battery (video). This confirmed the motor still worked when given an electrical current. Then I modified the Arduino Transistor Motor Control tutorial circuit into a simpler circuit that activated the DC motor directly from an Arduino digital pin (video). The final test was to build a simple webpage with an HTML button that wrote a serial signal to the Arduino using p5.serialport library (Arduino code, sketch.js code).

screenshot

Web Prototypes

My ghosted phone fabrication project blog post has more details on how I enclosed this circuit after successfully testing the circuit and serialization communication. Once this project’s physical part was done, I then worked on refactoring the webpage into a proper chat/text message experience. I started with swapping a simple HTML and JavaScript file for Gatsby.js — a static site compiler. Using Gatsby as my frontend framework provided the foundation to connect p5’s serialization library to a modern React application. It also allowed me to use an existing chatbot library to build the chat interface and message steps. Jen Kagan’s p5serial-babel-webpack repository also provided helpful examples of where to get started. The first prototype rendered a button that on click sent a serialized signal from the computer to the Arduino. The second prototype rendered a chat component using the React Simple Chatbot library.

screenshot

screenshot

Game Steps?

Once I had a working React application with a chat component, I sketched out the different message paths that all eventually led to being ghosted (i.e. “game over”).

chat flow

I then translated these message paths (steps) into a JavaScript file and refactored my prototype’s sketch file into a Conversation React component.

The final steps were to add some UI polish to the React web application. Here are some attribution links for assets used:

And here’s a final video demo of the web application triggering the serialized ghosted event.

Future Thoughts

Some thoughts I had if I continue to iterate on this idea:

  • Add more lights, movement, general commotion to the Halloween cauldron on the ghosted event
  • Allow for users to type in more responses in the chat, use sentiment analysis to decide if the conversation has reached a “ghosting tipping point”
  • Incorporate a Bluetooth component or host the application and serialization WebSocket on a server to allow the game to be played remotely from any web browser

Adrian Bautista

NYU ITP documentation blog.
Words are my own.