Category Archives: Final Documentation


For our project, Christshon and I created a pair of shoes that are both fashionable and interactive. We were inspired by sneaker culture and wearable technology.

Out of all clothing items we feel that shoes are the one that have the most potential the it comes to wearable technology. That being said the only shoes that integrate fashion and technology are extremely overpriced and largely unobtainable for the average person. We feel that it’s time that interactive fashion became something that is accessible and to prove it we made this pair of shoes that illustrates how possible it is for designs like this to be made in a cost efficient way. Although the amount of interaction between the wearer and the shoe is not very extensive art the moment, we feel that this is a good place to build from and I am now much more aware of the possibilities within the realm of wearable tech.

Our Process:

Due to issues with shipping our process was pushed back quite a few times but we still found time to get it all done. The first step was making our user interaction diagram. This was our plan for how the user would get output and what output they would receive (LEDs). Next I bought the shoes from a thrift store for only $4. After purchasing them from Salvation Army, we saw that the shoes were pretty beat up so we had to clean them and then paint them in order for them to appear new. They came out beautiful all thanks to Christshon. I entrusted him with this task because he used to paint shoes a lot back at his home.


His inspiration for the colors and shape was the “heavy-duty sneaker” look that many high-end brands like Balenciaga and Gucci have been popularizing lately. After the painting was finished, we uploaded our code to our Arduinos, we began wiring the LEDs and Arduinos to the shoes.




  1. Arduino Uno

2. Jumper Wires

3. 10k potentiometer

4. New Balance Shoes

5. Neopixel RGB LED Ring

6. Velcro

7. Paint

8. 9V Battery

9. Solderable Breadboard

It took a lot of time and even more troubleshooting but eventually we were able to get both shoes to operate smoothly. Then, we “created” a spot on the heel were the batteries would attach in order for them to not be in the way. We placed them behind the end of the shoe. Finally, we used wires to mimic shoelaces as we felt added to the futuristic vibe that we were striving for. Now that the physical component was done we put our focus onto creating the video that we would play as part of our presentation.

The idea was to create a video that demonstrated the importance of sneaker culture while also highlighting the progress that sneaker design has made since they first came onto the scene. The video was created using Premiere Pro and our plan was to create a makeshift screen to project it onto, however we did not budget enough time to create the screen so instead I decided to play the video off of Christshon’s laptop. We also decided to go with this option instead because the video lost some of its quality through projection.

Overall, I feel that we did a very good job despite the adversities Christshon and I had to endure. To be honest, he has been one of the best partners I’ve had on a project. So thank you David for letting us team up. Christshon and I will probably try to dive into some more wearable tech but let’s see for in the future.  It was cool to see how Christshon’s knowledge of shoes and my knowledge of wearable tech bloomed together. I look forward to adding onto this project along with our given feedback and to explore more possibilities of art installations and wearable tech.

Collage of the process of the interaction:

Processed with MOLDIV

Final Project

What is it?

This is a 2d shooting survival game. The target in this game is too survive as long as possible. The  unique part of this game comparing to other games of the same type is that apart from shooting all those enemies, you can choose to transform your self and let those enemies looks like npc and communicate with them which is also a good way to survive as well.

Why made this?

The original thoughts is just to make a game. In the game, we wanted to give player the chance to decided how he or she interacted with the game npcs. There’s already many games that you could choose to be a good or bad people and that influence the ending. But all of them were either fixed (only having the options to kill some key characters or not), or too irrelevant (killing people or not just influence your crime level). So in our one, we want to let player the freedom to choose and also great responses to their actions. The responses are not from the plot but instead the player them self. They will learned that those enemies could be nice person who would be glad to help you if you look at them in another perspective.

How do we make this?

Using unity and processing

Unity is responsible for all the game part, while processing in charge of the sound control. When the processing received the signal of laughing, it would output a “Space” key press. Then , the game mechanic would be triggered.





What it is
  • Pinwheels + Fat Cats + Fish + Paper Plane
  • Objects controlled by sounds.
Why made it
  • Cross-dimensional interaction
  • Easy to play with
  • Different inputs lead to different outputs
  • // I LOVE FAT CATS 😀
Who uses it
  • Everyone
How it works
  • There is only one input : the microphone
  • Based on how hard the user blows to the microphone, the rotation speed of pinwheel and the wind sound will change.
  • By dividing the input into different stages, there will also be different reactions
  • Cats’ behavior
  • The fish rain
The process
  • Coding
  • Pinwheels
  • Fat cats
  • Volume of wind sound
  • Paper Plane
  • Fish rain
  • Buy the pinwheel & microphones
  • Settle the microphone on pinwheel






#define PIN_ANALOG_X 0
#define PIN_ANALOG_Y 1
#define PIN_ANALOG_X2 2
#define PIN_ANALOG_Y2 3
#define PIN_ANALOG_X3 4
#define PIN_ANALOG_Y3 5
#define PIN_ANALOG_X4 6
#define PIN_ANALOG_Y4 7
#define PIN_ANALOG_X5 8
#define PIN_ANALOG_Y5 9
#define PIN_ANALOG_X6 10
#define PIN_ANALOG_Y6 11

int sensor1 = analogRead(A0);
int sensor2 = analogRead(A1);
int sensor3 = analogRead(A2);
int sensor4 = analogRead(A3);
int sensor5 = analogRead(A4);
int sensor6 = analogRead(A5);
int sensor7 = analogRead(A6);
int sensor8 = analogRead(A7);
int sensor9 = analogRead(A8);
int sensor10 = analogRead(A9);
int sensor11 = analogRead(A10);
int sensor12 = analogRead(A11);

//joystick 2 X A2 Y A3

void setup() {
pinMode(A0, INPUT_PULLUP);
pinMode(A1, INPUT_PULLUP);
pinMode(A2, INPUT_PULLUP);
pinMode(A3, INPUT_PULLUP);
pinMode(A4, INPUT_PULLUP);
pinMode(A5, INPUT_PULLUP);
pinMode(A6, INPUT_PULLUP);
pinMode(A7, INPUT_PULLUP);
pinMode(A8, INPUT_PULLUP);
pinMode(A9, INPUT_PULLUP);
pinMode(A10, INPUT_PULLUP);
pinMode(A11, INPUT_PULLUP);


// pinMode(2, OUTPUT);

void loop() {










My project is a cross between an instrument and a sound remixer. It is preloaded with 3 sounds and 3  tunes the user can “remix.” It can be considered the “kid’s version” of DJ equipment.


So many people love music and have personal things they would change about certain songs or performances, but no way to do it. Learning how to use really DJ equipment is difficult, time consuming, and usually left to the professionals. Actual DJ equipment is expensive ad bulky. That’s why I created the “kid’s version” of DJ equipement giving regular people a chance to make music.


The project consists of 6 joysticks all mapped to speed and volume. There are 4 joysticks on the bottom and 2 joysticks on the top sitting where the fingers naturally would when holding a video game controller. I made the case out of foam and resemble a nintendo or PS4 shape to be more comfortable, user-friendly, and intuitive. Out of the 6 joysticks, the 3 on the right are connected to 3 different real songs and the 3 on the left are connected to 3 different tunes/beats.

Food Have Feelings Too

All the documentation we have accumulated is located on this website link:

What is the project?

This is an interactive storytelling piece that includes anthropomorphic food, food made out of clay, photo sensors linked to an Arduino and the p5.js editor. Users will have to interact with the clay food and the interaction triggered by Arduino and light sensors will activate pre-made animations made in After Effects.

Who is it for?

Everyone who enjoys food, grumpy old men, annoying teenagers, sad little boys and our visually appealing world. Also, this who can relate to the heart aching pain that comes when someone leaves or is taken out of one’s life. 

Why Have We Made It?

We made this because we wanted to continue with the idea that was born for our hyper cinema projection mapping project. We also wanted to tell funny yet sad stories in a playful way using the skills we’ve learned so far. We wanted to say something about that inevitable truth, but do so in a playful and implicit way that seemingly skims over the true pain that it can cause an individual. We want to explore a new interaction with well-known and well-loved foods using the skills we have learned this semester.

How Does It Work?

We have three anthropomorphic food animated characters that we created for the interaction to compliment.

Storyline: Our three characters are a young, sad boy, a hormonal and annoying teenage girl, and a grumpy, old man. Using these archetypes of people in society, we are going to make scenarios using animation to create the reactions of these characters as the ones they like and love leave or are taken away.
Roger (Doughnut): A grumpy, old man whose super bitter about everything and is very mad at humans picking up his family and brothers in arms because it reminds him of his impending doom.
Raechel (Pizza): An annoying teenager who wants to do nothing but talk about her boyfriends and acts like she doesn’t care if you take her boyfriends away. But now, she has to deal with the harsh reality of life and loneliness.
Ronnie (Dumpling): A sad, lonely boy who has encountered too much loss in his life when it comes to his friends leaving. He has become jaded and thinks that inevitably everybody will leave him.
In the 30 second video, you will see our interaction is working with the dumpling and the light sensors. The clip at the end is a snippet of one of our animation that will be linked to one of the sensors for the dumpling.

So how the interaction should work is the user should be prompted by a sign that says something along the lines of “Pick up the food one at a time if you dare” or something like that. The user can start at any prototype and put on the headphones. It will be pretty self explanatory from there. The user one by one will watch all of the animations and move on to the next prototype if they wish. Hopefully, nothing is broken after the user is done. There is a failsafe in the code to not mess up the interaction if two foods are picked up at the same time.

Video of the Pizza Prototype Working:

Video of User Interaction With Pizza Prototype:

Video of Dumpling Prototype Working:


As we set up for the final presentation we came across a lot of problems, ones that we didn’t expect. Our wires somehow kept breaking even with the soldering and some stripped wires and kit wires kept breaking as well. So as we tried to fix this problem, the dumpling and donut prototypes stopped working. We got the dumpling prototype to work but it’s very fragile and we might need to replace all the loose wires before the show to ensure that it works correctly.

Final Code:

Arduino Code:

void setup() {
void loop() {
  int reading = analogRead(A0);
  int valueone = map(reading, 0, 1023, 300, 500);
  int secondreading = analogRead(A1);
  int valuetwo = map(secondreading, 0, 1023, 300, 500);
  int thirdreading = analogRead(A2);
  int valuethree = map(thirdreading, 0, 1023, 300, 500);
  int fourthreading = analogRead(A3);
  int valuefour = map(fourthreading, 0, 1023, 300, 500);
p5.js/Atom Code:


var Ben;
var Julian;
var Jose;
var Camron;
let serial;
var options = {
baudrate: 9600
var xData;
var yData;
var jData;
var sData;
var videoplay = false;
var benisplaying = false;
var julianisplaying = false;
var joseisplaying = false;
var camronisplaying = false;

function preload() {

Ben = createVideo(“”);
Julian = createVideo(“”);
Jose = createVideo(“”);
Camron = createVideo(“”);

function setup() {
createCanvas(400, 400);

serial = new p5.SerialPort();

// Let’s list the ports available
var portlist = serial.list();

// Assuming our Arduino is connected, let’s open the connection to it
// Change this to the name of your arduino’s serial port“/dev/cu.usbmodem14101”);

// Register some callbacks

// When we connect to the underlying server
serial.on(‘connected’, serverConnected);

// When we get a list of serial ports that are available
serial.on(‘list’, gotList);

// When we some data from the serial port
serial.on(‘data’, gotData);

// When or if we get an error
serial.on(‘error’, gotError);

// When our serial port is opened and ready for read/write
serial.on(‘open’, gotOpen);

// We are connected and ready to go
function serverConnected() {
print(“We are connected!”);

// Got the list of ports
function gotList(thelist) {
// theList is an array of their names
for (var i = 0; i < thelist.length; i++) {
// Display in the console
print(i + ” ” + thelist[i]);

// Connected to our serial device
function gotOpen() {
print(“Serial Port is open!”);

// Ut oh, here is an error, let’s log it
function gotError(theerror) {

// There is data available to work with from the serial port
function gotData() {
var currentString = serial.readStringUntil(“\r\n”);

if (currentString) {
let values = currentString.split(‘,’);
xData = int(values[0]);
yData = int(values[1]);
jData = int(values[2]);
sData = int(values[3]);
// console.log(values[0]);

function sensordetect() {
if (videoplay == false) {
if (xData >= 400) {;;
videoplay = true;
benisplaying = true;
} else if (yData >= 400) {;;
videoplay = true;
julianisplaying = true;
} else if (sData >= 400) {;;
videoplay = true;
camronisplaying = true;
} else if (jData >= 400) {;;
videoplay = true;
joseisplaying = true;

if (videoplay == true) {
if (benisplaying == true) {
if (julianisplaying == true) {
if (joseisplaying == true) {
if (camronisplaying == true) {

if (xData < 400 && yData < 400 && sData < 400 && jData < 400) {
videoplay = false;
benisplaying = false;
julianisplaying = false;
joseisplaying = false;
camronisplaying = false;


function draw() {



Current Documentation (12/2/18)

Okay so, we’re almost there! Essentially, I have the controller working, and I have each lesson finished. All that’s left is to troubleshoot the controller to work a little more accurately, and then put the serial code into every project (Which should be relatively simple). Here is a photo of the bongo controller, the arduino cord comes out of the bongo to connect to your laptop.


As for the code in the lessons, I have the first example basically finished. It works as it should (for this lesson). The only problem encountered right now is the sound doesn’t play if you hit a couple times fast. which is the edit I need to make before applying it to the rest of my lessons. Although you can’t really use the sketch without the controller, here is the code to the first example in my set of lessons:

Here is a video of it working, the Black circle indicates when you are supposed to hit it, the blue one indicated when YOU hit the bongo, If the text is blue, you pretty much hit it at the right time:

Super excited to get the last parts working, I know it’s not really a BEAUTIFUL Aesthetic but I think that’s more so a function I will add if I were to develop the project further, such as adding a cursor along music, and maybe having the notes jump, (As well as making a more attractive looking controller).