Category: Interaction Lab

Exercise 1: Make a Processing Etch A Sketch

Step 1: draw with ellipse

I don’t have any difficulty in step 1, I just copy the code by IMA Lab to import data from Arduino.  And I found if I draw it with ellipse, we have to move extremely slow to ensure the graph is a line but no a bunch of circles. 

Step2: draw with lines

I was a little confused at the first time because pmouseX and pmouseY cannot be applied to the position of the variables from Arduino. However，after asking the fellow, I figured it out. What I need is just make a variable to store the previous number from Arduino. The code is attached:

fill(0);
line(a, b, sensorValues[0], sensorValues[1]);
a=sensorValues[0];
b=sensorValues[1];

The whole code is under:

Processing :

import processing.serial.*;

String myString = null;
Serial myPort;

int NUM_OF_VALUES = 2; /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/
int[] sensorValues; /** this array stores values from Arduino **/
int a;
int b;

void setup() {
size(500, 500);
background(255);
setupSerial();
}

void draw() {
updateSerial();
printArray(sensorValues);
fill(0);
line(a, b, sensorValues[0], sensorValues[1]);
a=sensorValues[0];
b=sensorValues[1];
}

void setupSerial() {
printArray(Serial.list());
myPort = new Serial(this, Serial.list()[ 4 ], 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;

sensorValues = new int[NUM_OF_VALUES];
}

void updateSerial() {
while (myPort.available() > 0) {
myString = myPort.readStringUntil( 10 ); // 10 = ‘\n’ Linefeed in ASCII
if (myString != null) {
String[] serialInArray = split(trim(myString), “,”);
if (serialInArray.length == NUM_OF_VALUES) {
for (int i=0; i<serialInArray.length; i++) {
sensorValues[i] = int(serialInArray[i]);
}
}
}
}
}

Arduino:

void setup() {
Serial.begin(9600);
}

void loop() {
int sensor1 = analogRead(A0);
int sensor2 = analogRead(A1);

// keep this format
Serial.print(sensor1);
Serial.print(“,”); // put comma between sensor values
Serial.print(sensor2);
Serial.println(); // add linefeed after sending the last sensor value

// too fast communication might cause some latency in Processing
// this delay resolves the issue.
delay(100);
}

schematic :

Exercise 2: Make a musical instrument with Arduino

I have no difficulty in building this, but I really don’t know how to make different sounds through the code…   Sadly, because of the time limit, I couldn’t figure it out, but I will ask fellows when I do my final project. The interaction in this project is simple: when you click the mouse, the buzzer make sound.

Here are my codes:

Arduino:

define NUM_OF_VALUES 2 /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/

/** DO NOT REMOVE THESE **/
int tempValue = 0;
int valueIndex = 0;

/* This is the array of values storing the data from Processing. */
int values[NUM_OF_VALUES];

void setup() {
Serial.begin(9600);
pinMode(11, OUTPUT);
}

void loop() {
getSerialData();

// add your code here
// use elements in the values array
// values[0] // values[1]

tone(11,values[0]);
noTone(11);

}

//recieve serial data from Processing
void getSerialData() {
if (Serial.available()) {
char c = Serial.read();
//switch – case checks the value of the variable in the switch function
//in this case, the char c, then runs one of the cases that fit the value of the variable
//for more information, visit the reference page: https://www.arduino.cc/en/Reference/SwitchCase
switch (c) {
//if the char c from Processing is a number between 0 and 9
case ‘0’…’9′:
//save the value of char c to tempValue
//but simultaneously rearrange the existing values saved in tempValue
//for the digits received through char c to remain coherent
//if this does not make sense and would like to know more, send an email to me!
tempValue = tempValue * 10 + c – ‘0’;
break;
//if the char c from Processing is a comma
//indicating that the following values of char c is for the next element in the values array
case ‘,’:
values[valueIndex] = tempValue;
//reset tempValue value
tempValue = 0;
//increment valuesIndex by 1
valueIndex++;
break;
//if the char c from Processing is character ‘n’
//which signals that it is the end of data
case ‘n’:
//save the tempValue
//this will b the last element in the values array
values[valueIndex] = tempValue;
//reset tempValue and valueIndex values
//to clear out the values array for the next round of readings from Processing
tempValue = 0;
valueIndex = 0;
break;
//if the char c from Processing is character ‘e’
//it is signalling for the Arduino to send Processing the elements saved in the values array
//this case is triggered and processed by the echoSerialData function in the Processing sketch
case ‘e’: // to echo
for (int i = 0; i < NUM_OF_VALUES; i++) {
Serial.print(values[i]);
if (i < NUM_OF_VALUES – 1) {
Serial.print(‘,’);
}
else {
Serial.println();
}
}
break;
}
}
}

schemes:

Processing:

import processing.serial.*;

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

Serial myPort;
String myString;

// This is the array of values you might want to send to Arduino.
int values[] = new int[NUM_OF_VALUES];

void setup() {
size(500, 500);
background(0);

printArray(Serial.list());
myPort = new Serial(this, Serial.list()[ 4 ], 9600);
// check the list of the ports,
// find the port “/dev/cu.usbmodem—-” or “/dev/tty.usbmodem—-”
// and replace PORT_INDEX above with the index 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 draw() {
background(0);

value[0]=mouseX
}

// sends the values to Arduino.
sendSerialData();

// This causess the communication to become slow and unstable.
// You might want to comment this out when everything is ready.
// The parameter 200 is the frequency of echoing.
// The higher this number, the slower the program will be
// but the higher this number, the more stable it will be.
echoSerialData(200);
}

void sendSerialData() {
String data = “”;
for (int i=0; i<values.length; i++) {
data += values[i];
//if i is less than the index number of the last element in the values array
if (i < values.length-1) {
data += “,”; // add splitter character “,” between each values element
}
//if it is the last element in the values array
else {
data += “n”; // add the end of data character “n”
}
}
//write to Arduino
myPort.write(data);
}

void echoSerialData(int frequency) {
//write character ‘e’ at the given frequency
//to request Arduino to send back the values array
if (frameCount % frequency == 0) myPort.write(‘e’);

String incomingBytes = “”;
while (myPort.available() > 0) {
//add on all the characters received from the Arduino to the incomingBytes string
incomingBytes += char(myPort.read());
}
//print what Arduino sent back to Processing
print( incomingBytes );
}

Title: Pirate Chase! – A Tragedy of the Commons

Project Statement of Purpose: My partner and I decided to expand upon our midterm project and focus more on the psychological/experimental aspect of it. Our updated project: Pirate Chase! is a boat chasing game between four people. The participants will be positioned on four different corners of the circle (which will serve as the ocean) and have to blow their boats to the island in the middle. There will be a few obstacles in between which will serve to push the boat beneath the water or drive it in the opposite direction. Through previous research, we would like to use the ‘Tragedy of the Commons’ scenario to see if individuals will blow their opponents boats away from each other or collaborate to go onto the island together and share the treasure.

Project Plan: We would like to use our project as a psychological experiment to test the ‘Tragedy of the Commons’ economic concept with students as our target. We will first begin by building our ‘ocean’ by purchasing a miniature kiddie pool (61cm wide 12cm high) and filling it with blue water. We will then 3D print four boats, making sure they are all in different colors in order to clearly distinguish between the four players. Next we will build our island and the obstacles we plan on using. We hope to build a bridge across the circular pool in order to keep the electronic objects (ie. arduino and sensors) away from the water. This bridge will be made from clear, see-through material for now (material used for laminating). We will then fix the island in the middle of this bridge therefore placing the island right in the middle of the circular pool. We will attach an infra-red sensor to this which will point downwards and will detect when the winning boat floats under the island through an LED light which we will position on top of the island. The island will be designed by us and 3D printed. We will also attach a buzzer to emit sound when the winner wins. Through serial communication, the infra-red sensor will transmit from Arduino to Processing and thereby project a graphic on a laptop screen displaying who won and marking the end of the game. We will also time this and monitor how students drive their opponents away. The first boat to reach the island directly without being thrown off by the obstacles is the winner. Students can only move their boats forwards not backwards or sideways. If students miss their first try to reach the island due to an obstacle they cannot move their boats backwards and so will have to rotate around the circle, thereby forcing them to move physically move to where their opponents are standing. 

In order to empathize with our target group we will make sure the circle is big enough and students have enough space to walk around the circle. In addition to this, since it is an experiment we will try this with groups of friends, a mix of students and faculty and a number of mixed combinations to see how the outcome might change. By the end of this week we hope to build our circuits and ensure that our sensor is working. We also hope to finish designing the graphics for Processing and connecting Arduino to Processing through serial communication on Thursday. On Friday we hope to 3D print our boats and island. Next week, we will begin building the bridge and putting the components together. We hope to be done with the main components before Thanksgiving and leave the week before the Final to designing and improving the start and end sounds for the game etc.

Context and Significance: Most of the research I did focused on educational projects that could be used either to convey information to children or older students. After taking two Psychology courses as well as Economics courses here at NYU Shanghai, my Partner and I thought of how we could merge these together in a fun and interactive way while still contributing to the field of Psychology and Economics. We then stumbled across the “Tragedy of the Commons” concept first introduced by American ecologist Garrett Hardin which looks at how people will react in a situation where there exists limited resources in a specific area. This concept further aims to understand the individualistic and collective cultures of people (ie. two psychological concepts). Depending on an individual’s culture or country, some may care only for themselves whereas others may have to consider their family or others before themselves. Through this we hope to focus on how students interact with each other in our game/experiment and whether they will adopt an individualistic approach or collectivist approach in getting the treasure on the island. We are re-creating our midterm project and improving upon its design as well as concept. This could be helpful for students as they re-evaluate their roles in their day to day lives and what approach they choose. After successful completion, we could contribute to the first hand data we gather to a Social Science Psychology Research Journal. Our population/demographic will be unique because our school has a mixture of people from a huge number of countries each with their own unique culture. We could take this further and display various scenarios besides the “Pirate capturing treasure on an island” and look at how countries may fight over a specific resource in the future after climate change completely limits/reduces the availability of that specific resource. 

Most importantly, we wanted our project to be as interactive as possible. Referring back to my definition of interaction, I stated that I had originally seen interaction as a form of communication, however I added to this definition stating that it is not only a form of communication, but also a way of blending technology and human abilities together in the most natural way without undervaluing the capabilities of humans, to therefore fulfill a greater aim. After reading “A Brief Rant on the Future of Interaction Design” by Bret Victor, I began to think about the ways in which technology of today is fully set on only fulfilling the needs of humans. Bret Victor on his blog encourages us to think outside the box and go one step ahead in terms of how technology can be revolutionary. He encourages us to not restrict interaction to the use of a single finger on a touch screen which is why we decided to incorporate “blowing” and physical movement in our project. This therefore allows individuals to truly feel as though they are not being undervalued, with the computer doing all the work, but rather sets an equal balance between man and machine.