For our final, Jackie and I partnered up and build a system for automatic drawing and facilitating creative collaborations.

We decided to build a glove equipped with 4 vibration motors referencing the directions up, down, left and right and a system that allows x number of participants to control and trigger said motors.

System Diagram:

  1. Any number of participants are able to press up, down, left and right using key or mouse pressed.

  2. Participants actions are recorded and saved in a server.

  3. Said actions trigger the corresponding motors via serial.

  4. The “medium”/drawer moves the pen accordingly.


To divide the work, I focused on developing the crowdsourced experience and Jackie focused on building the wearable. This blog post will mainly cover the user experience and server development while Jackie’s will focus on the development, prototyping and building of the wearable. Here is a link to her blog:


It being the first time I build a server, I started by booking office hours in order to get an idea on how to diagram the process. Turns out there are many different ways to approach it and those don’t necessarily mix. It was a lot of trial and error but a huge learning experience that I’m grateful for.

I started by building the HTML side of the interface in p5 and, as per Shawn’s help, following Dan Shiffman’s tutorial on incorporating and express to a p5 sketch and connected it to Jackie’s arduino sketch via serial. The main road block I encountered here was allowing cross-network connections to the server and recording users input. I tried several things from this point, installing nrgok in order to support cross network connections, tried creating json files out of the input data, pushing them into arrays, looked into the service twitch and building more of a chat server (which Dan Shiffman’s tutorial technically did) but nothing worked.

I showed the process to my friend Luming who helped me go about it a different way. First I needed to separate my serial code from my html code (I had them all in sketch.js). I created 3 different sketches -

  • sketch.js: here I called my key action functions and had buttons animation

  • server.js: received the key action functions

  • laptop.js: mainly for sending the information to the arduino

He also told me about which allowed me to create a specific url for any participant to join in as well as allowed for cross network connection.

Link to full code:

User Experience:

Key elements considered for the experience:

  • Incorporated in the code a pointer event with a timeout in order to prevent all of the motors to be on all of the time.

  • Created a landing page where users are introduced to their “medium” and/or drawer and given the instructions as well as the link.

  • Created a drawing pad.

Screen Shot 2019-05-08 at 2.49.36 PM.png

Special thanks to Luming, David Ríos, Shawn, Brent and of course Jackie <3