Santiago Salem- Final Project Blog

Partner: Sarah Waxman

“Create a Tree”

This essay has the purpose of explaining and exposing my process and progress of my final project. But before disclosing all my information in regards to the design and fabrication, I want to mention how everything I learned through this semester led me to build this project. It is evident that I learned the necessary code, Arduino, Processing, Illustrator, and how to use the components and sensors, but the most important thing I learned was that if one uses the interaction with a clear purpose in mind one can create incredible things. For me, the interaction begins when a particular factor or organisms establish (triggers) a reciprocal interrelation where, through a connection, one body or item influences the other and causes it to respond immediately in a relative (understanding) manner. This “reciprocal relationship” is what one as a creator must exploit to achieve a successful project. This reciprocal relationship is the hook that maintains and makes the user interact with one’s project. For my project, this relationship was the most important thing that we wanted to establish; we intend for the user to interact with our project frequently. Since the purpose of our project is for the users to recycle, we aspire that the user regularly interacts with our project.

Our original idea was based on a game for people to recycle bottle caps (since they are more useful in the process of recycling because they contain large amounts of plastic and are short in size), but then my partner and I decided that a game was not the interaction that we wanted to create accordingly to our purpose.. Before we begin to describe how the user interaction inspired our project design, it is essential first to explain the project itself. The project is an interactive trashcan bin, which means that when people throw their plastic bottles into the basket, the user visually interacts with the basket. When the container is thrown into the hole, there is a rotating world that projects onto the surface of the lid that creates a tree every time the hole detects a bottle.

That said, when we wanted to start a game we realized that the infrared detectors did not detect the lids due to their short size and also the user had difficulty in throwing the lids inside the three holes of different sizes (each hole corresponded to how many trees they were going to project, for example, the small hole created 3 trees, the middle two, etc.). The game inspired us to create a single medium-sized hole for people to throw their bottles without difficulty (and the detector can detect the size of the containers). The materials we used to create our final project were one distance detector, one round wooden surface (laser cut), a projector, and small artificial trees (for the aesthetics of the project). In terms of programming, we use an Arduino (to send the signals of the sensors to Processing) and processing to create the world and trees (codding). We decided to use the minimum amount of materials, since the process of littering is not complicated, and neither should be the interaction between the project and the user.

On the other hand, it is important to always incorporate and immediate feedback to the user as a way of signaling that the action of the user was understood. Given that we decided to project a tree immediately after the user throws the bottle to create a visual, immediate response

The manufacturing process was not as complicated to the brainstorm of the idea. At first, my partner and I had a lot of problems thinking about an idea of how to create an interactive and attractive recycling project. Then we decided that we should create something visually appealing, easy to understand, and that motivates people to recycle, and that is why we created “Create a Tree”. In terms of fabrication, in the beginning, we cut a wooden cardboard in a circular shape with a hole. Second, we painted the wood with white paint so that the image of the projected world along with the trees it would look even more apparent. Third, we installed a distance sensor on the back of the wooden surface next to the hole so that the bottles can be detected. As for coding, this was the most complicated part (it took us around 9 hours of just coding) since we had to use a video of a rotating world in which every time the sensor detects movement, it must create a tree. But together with the help of the IMA fellows, we made it possible.

However, based on our failures and successes, one of our failures made us realize how we could even improve our project. For example, the fact that the sensors did not detect the covers, made us come with the idea that our project should not be a game but rather something with a more concrete, simple and clear purpose and that is why we created a single hole instead of three. Also, during the user testing session, the most significant responses from the users were that we should create a more personalized relationship every time the user drops a bottle, we should make it visually more attractive, and we should incorporate something that does the purpose clearer. Thanks to the feedback, we decided to include the following changes. First, each tree will represent a bottle; in that way, a person can track for a few minutes his tree as it rotates around the world. Second, we added some trees, as mentioned previously, to enhance the aesthetics of the project. Finally, by making the trees last longer instead of vanishing right away, people can track how often bottles are thrown into the recycling bin.

On the other hand, I believe that the user testing session is something vital in the process of the creation of the project. Users often give you a different perspective on how to assemble and enhance your project in unimaginable ways. It is always important to remember that your project serves a purpose that depends heavily on the user’s interaction, and hence, the project is for the users. Therefore, users’ feedback is a crucial step in the fabrication and design of one’s project.

My conclusion is based on my experience and personal perspective with the recycling bins. For example, every time I go to a basket to throw a plastic bottle, I look for the basket and I throw it there. A simple process that anyone can do. But through this project, I wanted to enhance this “process that is so simple”. What I mean is I want to give the user a kind of visual feedback every time he does the right thing to throw a plastic bottle where it belongs. This visual interaction is a simple feedback for people to see in a concrete way how the world says thank you. It is obvious that every time you throw a bottle, a tree will not appear magically in the earth. But through this symbolization, my partner and I want the user to be motivated to recycle. When we finally presented our final project to our class, we noticed the reaction and interaction of the users with our project. People were surprised to see that by throwing a simple plastic bottle, a tree appeared on the surface of the bin. The excitement of the users was the hook we wanted to create for people to interact with our project and therefore, be encouraged to recycle. Although my project was successful during the class, to be honest, if I had more time to change something in my project, I will incorporate another sensor that can turn on the projector every time someone approaches “Make a Tree”. In this was the projector won’t be turn on 24/7 and we could safe some energy (Young). I am quite proud of my project from my partner, and myself. At the beginning of the course, sometimes it was difficult for me to even turn on an LED, now together with Sarah (my partner), we have created something that I never imagined possible. To create this project, you can not only value the creation of the project itself, but also assess the progress of what I learned throughout this semester in order to create my final project. The purpose of this project for me is goes beyond than just recycling, for me, it represents all my effort, knowledge, and experience that I have for interaction.

(The code is below the video)

Processing code:  Tab 1 “Earth”

import processing.serial.*;

String myString = null;

Serial myPort;

int valueFromArduino;

int NUM_OF_VALUES = 1; /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/

int[] sensorValues; /** this array stores values from Arduino **/

import processing.video.*;

Movie earth;

PImage tree;

ArrayList<Tree> trees = new ArrayList<Tree>();

void setup() {

//size(640,360); //

fullScreen();//

earth = new Movie(this, “earth2.mp4”);

earth.loop();

earth.speed(0.5);

tree = loadImage(“tree.png”);

filter(INVERT);

myPort = new Serial(this, Serial.list()[ 24 ], 9600);

sensorValues = new int[NUM_OF_VALUES];

}

void draw() {

updateSerial();

printArray(sensorValues);

if (earth.available()) {

earth.read();

}

filter(GRAY);

background(255);

imageMode(CORNER);

image(earth, 0, 0, width, height);

if (sensorValues[0]== 1){

trees.add( new Tree() );

}

//float timeStamp = earth.time();

// println(timeStamp);

for(int i=0; i<trees.size(); i++) {

trees.get(i).display();

trees.get(i).move();

}

for(int i=0; i<trees.size(); i++) {

if(trees.get(i).offEarth == true) {

trees.remove(i);

}

}

println(valueFromArduino);//println(mouseX, mouseY);

println(trees.size());

}

//void mousePressed() {

// trees.add( new Tree() );

//}

void setupSerial() {

printArray(Serial.list());

myPort = new Serial(this, Serial.list()[ 24 ], 9600);

// WARNING!

// You will definitely get an error here.

// Change the PORT_INDEX to 0 and try running it again.

// And then, check the list of the ports,

// find the port “/dev/cu.usbmodem—-” or “/dev/tty.usbmodem—-”

// and replace PORT_INDEX above with the index number of the port.

myPort.clear();

// Throw out the first reading,

// in case we started reading in the middle of a string from the sender.

myString = myPort.readStringUntil( 10 ); // 10 = ‘\n’ Linefeed in ASCII

myString = null;

}

void updateSerial() {

while (myPort.available() > 0) {

myString = myPort.readStringUntil( 10 ); // 10 = ‘\n’ Linefeed in ASCII

if (myString != null) {

String[] serialInArray = split(trim(myString), “,”);

printArray(serialInArray);

if (serialInArray.length == NUM_OF_VALUES) {

for (int i=0; i<serialInArray.length; i++) {

sensorValues[i] = 0;

println(sensorValues[i]);

sensorValues[i] = int(serialInArray[i]);

println(sensorValues[i]);

}

}

}

}

}

Processing code: Tab 2 “Trees” 

class Tree {

float x, y;

float speed;

boolean offEarth = false;

Tree() {

float centerX = width/2;

float centerY = height/2;

// while( dist(x, y, width/2, height/2) > 150) {

x = centerX + random(-200, 200);

//x = random(170, 200);

y = centerY + random(-200, 200);

// }

speed = 7;

}

void display() {

ellipse(x, y, 10, 10);

imageMode(CENTER);

image(tree, x, y);

}

void move() {

x += speed;

if(dist(x, y, width/2, height/2) > 300) {

offEarth = true;

}

}

}

Arduino Code: 

#define trigPin 2

#define echoPin 3

int sensor1;

void setup() {

SensorSetup();

Serial.begin(9600);

}

void loop() {

int actualDistance = MeasureDistance();

if (actualDistance < 15) {

sensor1 = 1;

}else {

sensor1 = 0;

}

// keep this format

Serial.println(sensor1);

}

void SensorSetup() {

pinMode(trigPin, OUTPUT);

pinMode(echoPin, INPUT);

}

int MeasureDistance() { // a low pull on pin COMP/TRIG triggering a sensor reading

long duration;

digitalWrite(trigPin, LOW); // Added this line

delayMicroseconds(2); // Added this line

digitalWrite(trigPin, HIGH);

delayMicroseconds(10); // Added this line

digitalWrite(trigPin, LOW);

duration = pulseIn(echoPin, HIGH);

long distance = (duration / 2) / 29.1;

return (int)distance;

}

Battleship? – Robert (Haochen Xiong) – Young

CONCEPTION AND DESIGN

The best way to understand how the users will interact with your project is to imagine yourself as a user too. When I was thinking my design that can make the users better interact with my game, I regard myself as a game player want to try this battleship game. The reason I do this is that I have already played a lot of games before. In other words, though it might not be that strong, I still have the ability to distinguish whether a game is interesting or not. After user testing, I chose to improve the user experience of my game. The first thing I did was to change the feel of my joysticks because it was uncomfortable to directly use them. Cut a small box to put? But then it will be hard to control because the handle of the joystick is short. So I need to 3D print a long handle and that will take me a lot of time. After discussing with Ellie, I came up with the idea that I can print a huge box with two small but long boxes on each side, then I can put two joysticks in the smaller boxes and other things like Arduino kit in that big box. This will provide enough height for the players to hold the small box and use the joystick. 

The mixed box I made and I put some decoration on it

Besides the box, I also made a speed-up button to the users to step on. When I was playing my game with friends, I found that it was always hard to both speed up the battleship and turn its direction so I decided to separate them. Then I borrowed two buttons from EC and think about how to fix then to stand on the ground. Finally, in order to turn them back, I chose foam to reinforce them because it will be easier to take them off. Also, I put an arrow emoji on it to show that it is for speeding up. 

The first version, though little ugly, but well function

FABRICATION AND PRODUCTION

I do think giving up my original plan is the most failure but also the most success. My original plan is to give a new possibility for the old battleship game. However,  I found it impossible to fulfill my goal so I directly change my goal. It was a little pity to give it up but it also gave me the chance to make the new one.

Comfort myself: at least I tried

In the user text, besides the speed up problem, the most suggestion I received was for the chess board. It was not finished so the users can not get a full understand of it even I had already explained to them. There is a big gap between the chess game and the shooting game and the gap made the users confused. The most doubt I got is: is there a need to make this chess board. Even I suspect myself in the end that maybe I can cut the chess board part. However, Young gave me the key advice that firms my thought of making the chess board. He advised me that I can only show a specific moment for the users to know the chess board and then directly going into the fun shooting game. So I improve my chess board to make it more understandable.

The new chess board page
Now the players can just press the button on player 1’s battleship and directly join the fun shooting game

CONCLUSIONS

The goal of my project includes three part: interactivity, playability and something new. First, it needs to satisfy the definition of interaction which is a responsive process that includes two or more subjects to get clear input, digest and produce clear output which will have effects on each other. My project does align my definition of interaction. Two players join my game, get a clear image on the screen, digest for their strategy, and decide how to destroy the enemy battleship whose result will lead them to new thoughts and emotions. Second, I want to make a fun game that people want to play and I think I made it. In the IMA show, I saw people playing it both enjoyable and seriously because this game is also somehow competitive. However, most friends will hug each other after playing the game and this makes me feel relieved. Also, another thing makes me happy is that kids love to play my game.

Though they are a little “violent” that broke my equipment, I feel happy that they like it

Third, I do think I build something new. Though I did not finish the chess board part,  it still provides a new possibility for the traditional chess game. In my view, the addition of a shooting game does give more fun to it. Also, the addition of physical controls like the joysticks makes it more user-friendly. It is not a mixed monster, but a new product by a combination. 

If I have more time, I will definitely complete the chess board part and also improve the shooting part. I will design my own battleship chess like its rules. For the shooting part, I will add more blocks that if the battleship hits, it will lose health. What I take away from this project is that it is worthy to persist in your goal but sometimes you need to reverse it too. I changed my original plan but in the second time, I persevered in my chess board plan. I remember my struggle in displacing a chess game in processing but it was worth to try. Though I am not completely successful, my trying process improves my understanding and using of the processing a lot. Also, going back to my conception, in the future, I will continue to put myself in the user’s shoes to better improve my project. The future looks good and I will try my best to make more great games. 

The Labyrinth – Jonathan Lin – Young Chung

Before creating our game, my partner and I were aware that when we were presenting our project we had very little time to explain what our project was about. We knew that a lot of people would not know what The Labyrinth was and our goal was to teach them. Therefore from the beginning, we knew we wanted to include an intro video showing the actual myth itself, and along with with it an instruction page on how to play the game. Our intention was to create a DDR machine that would be used to control the characters. We decided to use buttons and the heart rate sensor for our game. At first, we thought about using pressure sensors instead of buttons, but then we realized if our intention was just to sense that the player wanted to go in a particular direction, buttons would not only be easier but more practical. The heart rate sensor was something we had in mind because we wanted to mimic in a maze where someone’s heart rate would be high due to confusion, fear, and adrenaline.

DDR machines are very technologically advanced and in order to provide a clean simple design that is shown in arcades is very expensive. We had to improvise with less knowledge and fewer resources. We knew the placement of the Arduino would be important because if we had placed in the wrong the wiring would be all over the place. In the end, we realized we had to use longer wires to connect the two DDR machines and could not avoid the wire mess. We could only make it not affect the interaction and make it look somewhat organized. User testing was super useful in not only seeing how people interacted with our project but also in observing how people reacted to the information presented to them. Was our intro video informative enough? Were our instructions for the games clear? With all this information, we ended up adding more educational aspects to our game and labeled the DDR pads for their respective directions, for example, we added U, D, L, and R (UP, DOWN, LEFT, RIGHT). I believe this advice we got definitely improved our project and made it easier for others to try it.

Our goal was to create an interactive project that would teach people about the story of The Labyrinth. I believe we definitely created something interactive because it not only was it a two-player game, but each player also had to interact with a physical DDR that would control their character in-game. Ultimately, I believed we did succeed because people who tried our game told us that they had fun, and afterward they would ask more questions about The Labyrinth. Giving them more information about this awesome myth and introducing them into other stories was definitely a highlight during the IMA show. One problem we had was that our DDR was a wired mess, and I would love to improve this if we had more time. Looking at our DDR machines, it looked like a prototype, but we really had no easy way to contain the wires. We tried putting a box to hit the wires, but then sometimes the wires would get unplugged from the Arduino or breadboard and that would just be a huge hassle to remove the box. If we had more time I would have loved to create a DDR machine that used fewer wires and maybe even add more mechanics to our game, for example, a good idea someone gave us was an option for randomized mazes. Every time our code failed, wires fell out, or designs didn’t work, all these times taught us that there is a better way to do things. The code, wires, design, and everything can always be improved to be made simpler and more appealing. The fact that our idea became a reality makes me proud that we accomplished that. After a whole a semester of Interaction Lab, I have learned that the question of “Who cares” does not really matter. If you truly believe in your project, then that means that you care and that is what matters. What matters is what you learn from creating your project and the final product represents that you have gone through a journey of learning and ended with success. To end, I believe one of the most important lessons I have learned from the Interaction Lab is that people will always be there to help you. The number of hours the IMA fellows and instructors spent just helping people was just amazing. They never judged the problem you were having, whether it be to helping a student build a simple LED circuit to coding a system of gravity, they were always helpful. This class was awesome and it has taught me you should not care too much when others don’t care, and of course, I now know the definition of interaction!

DEMO

PHOTOS

MEDIA USED IN PROJECT


CODE

Escape Room Game: Break Free – Haoquan Wang(Kenneth) – Young

CONCEPTION AND DESIGN:

Concept of my project–Depressing emotion:

I got my inspiration from my own experience. In this semester I have encountered many difficulties and depression. When I was depressed, I really hope that there is someone who can care for me.  So I think I can do something for the people who are depressed–maybe I cannot help them solve the depression, I can do a project which appeals people to care for their friends around them. Secondly, because I want to do something “artistic”, the idea of making an escaping room game came to my mind–I can use a locked room to imply one’s closing mind and the breaking room to imply going back to normal. Hence, I decided to do an escape game.

Design of interaction:

1. Basic design:

To make an escape room game, the first thing that I did is to design each room. I hope that users can explore each room through clicking mouse. They can also go back and forth among all the rooms. That is the basic interaction way of our project, which users can navigate through this way. Then we design each room. I divided my project into four main topics: Love, academic, family and self. In our story, the character encounters much displeasure–she fails in the exam; she breaks up with her boyfriend. The result is that she forgets who she is; she forgets her family and friends. So basically we supposed to have four rooms and four keys. In four topics, users need to explore to get information and guess the key. 

2. The way of getting key:

I design many interactive ways to collect keys. They are a potentiometer, direction keys, and camera. The first thing is the potentiometer.

The first picture is the family page. I design that the picture is unclear(upload pixels and change the size of the rectangle to a big number), meaning that the character forgets her family and friends. Users can use the potentiometer to change the size of the rectangle to make the image clear, which means that the character gets the memory. The second and third pictures are love page. The character hides her love and memory in a locker. The users are supposed to help her open her mind to embrace the new life. My partner design a riddle that there is a number hid in it. Users need to guess the number and turn the value from the Arduino to a number bigger than the riddle number. At first, we want to let the users turn the value to the value we assigned, but the value from the Arduino is floating, is not stable. So in order to solve it, I code it like “if(valueFromArduino > 1314);”(1314 is the designed value).

 

For the academic topic, I mainly use the interaction of direction keys. In this topic, the character experiences the failure of the exam, which is pretty common in students’ life. The character tears up her exam paper. The users need to use the direction keys to move the paper pieces together so as to help the character correctly face the exam. 

3. The way of entering keys

In self page, I use camera interaction. In this part, the character forgets who she is. So I design that users need to use a camera to take a selfie, meaning that “know yourself”. At first, we want to use the library of face detection, but it will increase the difficulty of using–the users may not know this is a self-taking selfie. So we abandon this design.

For entering keys to go out, we design our keys in forms of the figure, like the picture. In the lock page, the users need to press the button according to the key image. For multiple button key, the user needs to press all the key at the same time. We decided to design the key part in the way that users don’t need to enter the key in a specific sequence. At first we want to do that way, but actually, we realize that it is too difficult and inconvenience for the users to remember the sequence and go back to each page to check each key. So I think do not use this design is smart and necessary.

FABRICATION AND PRODUCTION:

For fabrication, we only use the laser cutter to make a box to hide our Arduino board and breadboard. We dig several holes for the potentiometer and button. Also, we leave four small holes for LEDs on the top of the box. The LEDs can help users check the key they enter.

We try to use the serial communication to show the key through LEDs–the led will shine and fade to show each key right after the users successfully get the key. But we don’t have this design until user testing, so we don’t have enough time to achieve this design. We failed it. The most successful thing in our production is that we do all the work at the same time. I was coding while my partner was drawing. For the components, big potentiometer and direction buttons, we bought it from Taobao.

In user testing, we got much feedback. The first thing is that we need more instruction. Fellow Nick says “He didn’t know what he should do when he first open my project”. Besides, he also mentions that he didn’t know whether he should use only the box use computer. It is confusing. To solve this issue, we firstly add instruction through typewriter effect in Processing, we type many hint and instruction on the canvas of our project. The second thing we did is to add more background information page to tell the users the whole story. Also, considering the feedback from Nick that we should do all the interaction in a physical box or just on the computer, we want to add a cursor on a computer operated by a button, but we failed.

Generally speaking, all the adaption and changes are pretty effective.

CONCLUSIONS:

In general, my project achieves our goal–to appeal to people to care for the people who are depressed. In IMA show, our users highly praise our aim of the project. In my research paper, I wrote that interaction should be a flexible, self-created reciprocal process. The output can also be the input, the input can also be output. In my project, the screen, Processing part, is the input, people can touch the screen or click the mouse to explore and take a selfie; it is also output, users can get information and keys from the screen. For the physical part, Arduino part, people can input key through the button and interact with the output from the computer–it is input part; also, it is output because people can check the LEDs.

During the IMA Show, my users pretty enjoy my project. They easily know how to interact with my project. Even kids can get familiar with this flexible, highly connected interaction way.

 

If I have more time, I will fix several things. The first thing is that I will make the self page part easier. From the feedback from the users, they think that they need to move two pieces of paper together very accurately. The second thing is the camera interaction. Because my camera is broken, so for the part of camera interaction, we just guarantee that it is working but people cannot interact with our project in that way. The third thing is to achieve the serial communication design that I mentioned above. 

The lesson that I take away from this final project is that I need to have the ability to simplify things. When we cannot achieve one design, how can we have a similar one through another alternative designing way? This ability that I gain really helps me a lot this time. Because our project is supposed to be very hard and almost impossible to achieve within two weeks.

The wrap-up:

Going back to the purpose of my project, many universities suffer from pressure and burden of love, friendship, academic mission, and family conflict.  

These pictures were going to be used at the end of my project, but we decided to put in in final blog post. These are the research we had made. There is a necessity for us to pay attention to the mental health of students in modern universities system. Even though our project may not really help those who are depressed to feel better, our project is aiming to raise the awareness of these serious issues.

Zen Place – Liyang Zhu (Tom) – Young

1. Concept And Design

1.1. Inspiration

Nowadays, over-stress has become a very common problem. The idea of my final project is to build an interactive gestured-controlled particle system which can help people reduce stress levels. My project uses Microsoft Kinect and Arduino to detect the user’s gesture and uses Processing to display a dynamic particle system. By enabling its users to interact with the particles using gestures, my project tries to immerse users in the process of waving their hands and thus release their stress.

Continue reading “Zen Place – Liyang Zhu (Tom) – Young”