Ken Wu

A. Molecular Soccer – Ken Wu and Alan Chao – Professor Eric Parren

(Video: World Finals of Molecular Soccer) 

B. Conception and Design

The concept of this project was to make a game that was competitive, but simple and could be played by people of all ages. We aimed for this project to be fun for children where there was interaction and struggle when playing the game itself. We looked at how simple interfaces in the Gameboy were playable and enjoyable as well as took inspiration from how this simple the design was. The simplicity of such design influenced me to design the game in such a way that was intuitive for children. We thought about how the game should be played to make the game more fun and entertaining for individuals to give them difficulty and a different experience which led to us to want to create a pulley system for playing the game, however, the ER lacked the material leading to us not being able to trial this out. Buttons were the last option for consideration, but the option we had to go with. As the game is played with hands rather than fingers, the button size was important which is what we focused on to create greater user experience. In the user testing session, we received feedback about the projection of our game, however, we ultimately decided to use an external screen due to the terrible outcome of projection on 3dimensional buttons. I think that this kind of feedback was valuable in trialing the extent that our design could function upon. 

C. Fabrication and Production

For fabrication and production, a very crucial part was for the processing to work without much delay. Alan was in charge of the processing debugging to get the wanted result due to his expertise. This process in the fabrication and production process can be seen in his reflection for the work that he put it on it. A very important part was linking his processing with the final design. We were successful with designing the board interface to represent the interface as well as making the product refined through sanding all the edges and the board to create wonderful user experience. 

(Figure 1: Interface and Board Parallel)

(Figure 2: Sanding)

(Figure 3: Blowing dust off wood for smooth crisp texture)

Of course, this design wasn’t without small failures with the design. At first, the intended design was a closed box, however, that did not take into consideration the button framework or the hole for the USB to computer. Therefore, I amended the design on Rhino after having laser cut the pieces to see if there was any way to save it. This overlooked aspect led to the open box design.

(Figure 4: Previous design with the border on the edges)

(Figure 5.1: Modeling)

(Figure 5.2: Changed design to accommodate item size and USB hole)

As we decided on an open box design where people can see through the hole, it was important for the wires to be tidy. We then cut wires to be small rather than using jumper wires to make it a clean circuit.

(Figure 6: Short wires for the circuit)

One thing previously mentioned was the button that we would use for playing. On user testing day, we borrowed buttons from the ER which were terrible for our game as they were small and had a lot of limitations in terms of user experience. Therefore, we bought huge buttons which made the experience more friendly. 

(Figure 7: Terrible buttons)

(Figure 8: Good buttons)

Essentially, those were all the components that were actually decided in our project where the end product was clean easy and applicable. 

(Figure 9: Clean user experience)

D. Conclusions

Our project’s intended goal morphed from having a bit of education input within it to being fully for entertainment. This was a good change as the connection between education and entertainment for our game wasn’t very clear and beneficial. This project was super successful in entertainment though where many of the responses to our project were highly positive and the game had a lot of people into it where they kind of had an addiction to it after playing it for a bit of time. For one, Alan and I were both addicted to this game and actually spent hours playing together in multiple sessions to understand how user experience could be built better. This aligns with my definition of interaction as the actions of someone affect the actions of the other in a continuous sequence. Our game is never-ending in interaction. The focus of the player doesn’t end after pressing one button as they have to continuously focus on playing the game. We would improve our project by retrying the projected interface with pulley system to make this more advanced. This would need more time as it was our initial plan but the engineering of the pulley system was too advanced for my advanced beginner 3dmodeling skills. I think that I learned a lot from my setbacks and failures, particularly in the aspect of realizing the best solution. Our solution couldn’t be fulfilled due to a lack of skill and experience in designing mechanical features which is something I hope to learn and become advanced upon to realize more interactive mechanical designs before integrating it with the digital. I think that my biggest takeaway from the project produced is that there are multiple solutions and sometimes basic solutions aren’t always bad for the project. In fact, it may make the game easier to play. Of course, why should anyone care? I personally believe that people should care about people’s failures, insights, and thoughts as they may drive you from making the same mistakes and being stalled at one point. If one can understand the difficulty of realizing a solution, they should also realize how they can understand how to mitigate the difficulty through learning. Only when people learn can they create the future. 

E. Technical Documentation

General Processing Sketch

import processing.sound.*;
SoundFile file;
SoundFile win;
//SoundFile blob;
import processing.serial.*;

String myString = null;
Serial myPort;


int NUM_OF_VALUES = 10;   /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/
int[] sensorValues; 

PImage soccer;
Ball ball;
PVector loc;
PVector gravity = new PVector(0, 10);

boolean playState = true;
int count = 0;
int left_score = 0;
int right_score = 0;

float[][] trails = new float[100][2];

Player[] players = new Player[10];
String goalSide;
PFont arcade;
int winningHue;

void setup() {
  fullScreen();
  arcade = createFont("ArcadeClassic", 32);
  //size(1200, 675);
  setupSerial();
  loc = new PVector(width/2,height/2);
  //fullScreen();
  //pixelDensity(2);
  ball = new Ball(loc);
  rectMode(CORNERS);
  win = new SoundFile(this, "win.wav");
  //blob = new SoundFile(this, "blob.wav");
  file = new SoundFile(this, "378355__13gpanska-lakota-jan__bouncing-football-ball-off-the-ground.wav");
  players[0] = new Player(new PVector(310, height/2 - 117.5), 1);
  players[1] = new Player(new PVector(310, height/2 + 117.5), 1);
  players[2] = new Player(new PVector(550, height/2 - 280), 1);
  players[3] = new Player(new PVector(550, height/2 + 280), 1);
  players[4] = new Player(new PVector(width/2 + 200, height/2), 1);
  
  players[5] = new Player(new PVector(width-310, height/2 - 117.5), 2);
  players[6] = new Player(new PVector(width-310, height/2 + 117.5), 2);
  players[7] = new Player(new PVector(width - 550, height/2 - 280), 2);
  players[8] = new Player(new PVector(width-550, height/2 + 280), 2);
  players[9] = new Player(new PVector(width/2-200, height/2), 2);
}

void draw() {
  background(240);
  updateSerial();
  println(frameRate);
  //printArray(sensorValues);
  push();
  //textFont(arcade);
  fill(255, 0,0, 40);
  textSize(800);
  textAlign(CENTER);
  text(left_score, width/2 - 350, height - 200);
  fill(0, 0, 255, 40);
  text(right_score, width/2 + 350, height - 200);
  pop();
  drawCourt();
  for (int i = 0; i < players.length; i++) {
    players[i].run();
  }
  if (playState){

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


  //println(frameRate);
  gravity.y = 20*noise(frameCount) - 10;
  ball.applyForce(gravity);
  int head = frameCount%100;
  trails[head][0] = ball.location.x;
  trails[head][1] = ball.location.y;
  push();
  colorMode(HSB);
  for (int i = 0; i < trails.length; i++) {
    float dia;
    if (i >= head) {
      dia = 0.3*(head - i);
    }else{
      dia = 0.3*(head - (i+100));
    }
    fill(30, 200, 255, 80);
    circle(trails[i][0], trails[i][1], dia);
  }
  pop();
  ball.run();
  
  if (ball.location.x <= ball.size/2 + 133 ||  ball.location.x >= width - ball.size/2 - 133) {
    ball.velocity.x *= -1;
    file.play();
    ball.hue += random(200);
    if (ball.location.x < 133) {
      ball.location.x = ball.size/2 + 20;
    }else if (ball.location.x > width - 133) {
      ball.location.x = width - ball.size/2 - 20;
    }
      if (ball.location.y > height/2 - 200 && ball.location.y < height/2 + 200 && ball.location.x < width/2) {
    right_score += 1;
    goalSide = "Blue";
    playState = false;
    //ball.velocity.mult(0);
    push();
    fill(255,0,0);
    rect(0, height/2 - 200, 133, height/2 + 200);
    pop();
  }
  if (ball.location.y > height/2 - 200 && ball.location.y < height/2 + 200 && ball.location.x > width/2) {
    //ball.velocity.mult(0);
    left_score += 1;
    goalSide = "Red";
    playState = false;
    push();
    fill(255,0,0);
    rect(width-133, height/2 - 200, width, height/2 + 200);
    pop();
  }
  }
  if (ball.location.y <= ball.size/2 + 5 ||  ball.location.y >= height - ball.size/2 -5) {
    ball.velocity.y *= -1;
    file.play();
    ball.hue += random(200);
    if (ball.location.y < 5) {
      ball.location.y = ball.size/2 + 20;
    }else if (ball.location.y > height - 5) {
      ball.location.y = height - ball.size/2 - 20;
    }
  }
  

  
  //println(keyPressed);
  for (int i = 0; i < players.length; i++) {
    //players[i].run();
    players[i].bounce(ball);
    //if (i != 9) {
    //  players[i].reactSize(i == Character.getNumericValue(key) - 1 && keyPressed);
    //}else{
    //  players[i].reactSize(0 == Character.getNumericValue(key) && keyPressed);
    //}
    players[i].reactSize(parseBoolean(sensorValues[i]));
    
    
  }
  }
  else{
    if (!win.isPlaying()){
      win.play();
    }
    
    count += 1;
    push();
    colorMode(HSB);
    winningHue += round(10*noise(frameCount));
    winningHue %= 360;
    fill(winningHue, 150, 230);

    textFont(arcade);
    textAlign(CENTER);
    textSize(200);
    text(goalSide + " Scores", width/2, height/2 + 50*noise(frameCount*0.1) - 25);
    //println(count);
    pop();
    if (count > 180) {
      playState = true;
      win.stop();
      count = 0;
      ball.location.x = width/2;
      ball.location.y = height/2;
      //ball.velocity.mult(0);
      //ball.velocity.y = random(-1,1);
    }
  }
}


void drawCourt () {
  pushStyle();
  stroke(120);
  noFill();
  strokeWeight(3);
  
  line(133, 5, 133, height - 5);
  line(width - 133, 5, width - 133, height - 5);
  line(133, 5, width -133, 5);
  line(133, height-5, width -133, height-5);
  strokeWeight(1);
  //rect(2, 382, 30, 468);
  
  rect(133, height/2 - 200, 94, height/2 + 200);
  rect(133, height/2 - 350, 215, height/2 + 350);
  
  //rect(width-2, 382, width-30, 468);
  rect(width-133, height/2 - 200, width-94, height/2 + 200);
  rect(width-133, height/2 - 350, width-215, height/2 + 350);
  ellipse(width/2, height/2, 200, 200);
  line(width/2, 5, width/2, height-5);
  push();
  stroke(0, 200, 200);
  strokeWeight(5);
  line(133, height/2 - 200, 133, height/2 + 200);
  line(width - 133, height/2 - 200, width-133, height/2 + 200);
  pop();
  popStyle();
}



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

Sketch of Ball

class Ball {
  PVector location;
  PVector velocity;
  PVector acceleration;
  float size;
  float mass = 30;
  int hue;

  Ball(PVector l) {
    acceleration = new PVector(0,0);
    velocity = new PVector(random(10),random(-2,0));
    //velocity = new PVector(0,0);
    location = l.get();
    size = 30;
    hue = 0;
  }

  void run() {
    update();
    display();
  }

  void applyForce(PVector force) {
    PVector f = force.get();
    f.div(mass);   
    acceleration.add(f);
  }

  // Method to update location
  void update() {
    velocity.add(acceleration);
    location.add(velocity);
    acceleration.mult(0);
    velocity.limit(16);
    velocity.mult(0.998);
    //lifespan -= 2.0;
  }

  // Method to display
  void display() {
    push();
    stroke(0);
    strokeWeight(2);
    
    //noStroke();
    colorMode(HSB);
    fill(hue % 360, 200 , 255);
    ellipse(location.x,location.y,size,size);
    pop();
  }
  
  void setSize(float value) {
    size = value;
  }

  // Is the particle still useful?
  //boolean isDead() {
  //  if (lifespan < 0.0) {
  //    return true;
  //  } else {
  //    return false;
  //  }
  //}
}

class Player extends Ball {
  int side;
  float originalSize;
  Player(PVector l, int s) {
    super(l);
    this.setSize(130);
    originalSize = size;
    side = s;
    velocity = new PVector(0,0);
  }
  
  void display() {

    noStroke();
    if (side == 1) {
      fill(200, 0, 0, size * 1.1);
    }
    else if (side == 2) {
      fill(0, 0, 200, size* 1.1);
    }

    ellipse(location.x,location.y,size,size);

    if (size > 160) {
          push();
      for (int i = 0; i < 20; i++) {
      float d = map(i, 0, 20, 0, size);
      float op = map(d, 0, size, 80, 0);
      stroke(255, op);
      strokeWeight(20);
      noFill();
      circle(location.x,location.y,d);
      }
          pop();
    }

  }
  
  boolean checkPos(Ball other) {
    float dist = this.location.dist(other.location);
    if (dist <= (size + other.size)/2 + 2) {
      return true;
    }else{
      return false;
    }
  }
  
  void reactSize(boolean triggerState) {
    if (triggerState){

      //println("yes");
      //float rate = sensorValues[i] - pSensorValues[i];
      //rate = map(rate, 0, 1023, 30, 100);
      //if (!blob.isPlaying() || frameCount % 30 == 0){
      //  blob.play();
      //}
      size += 40;

    if (size > 300) {
        size = 300;
      }
    }
    else if (size > originalSize){
       size = lerp(size, originalSize, 0.03);
    }
  } 
  
  void bounce(Ball other) {
    if (this.checkPos(other)) {
      file.play();
      other.hue += random(200);
      PVector force = new PVector(other.location.x - location.x, other.location.y - location.y);
      float dist = this.location.dist(other.location);
      dist = dist / 2;
      force.normalize();
      force.mult((other.velocity.mag()+1) * dist);
      //force.mult(dist*100);
      other.applyForce(force);
    }
  }
}

Arduino Sketch

// IMA NYU Shanghai
// Interaction Lab
// For sending multiple values from Arduino to Processing

int sensors[10];

void setup() {
  Serial.begin(9600);
  for (int i=2; i < 12; i++) {
  pinMode(i, INPUT);  
  }
}

void loop() {
  for (int i=2; i < 12; i++) {
    sensors[i] = digitalRead(i);
    Serial.print(sensors[i]);
    if(i != 11) {
      Serial.print(",");
      }
    
  }

  // keep this format
//  Serial.print(sensor1);
//  Serial.print(",");  // put comma between sensor values
//  Serial.print(sensor2);
//  Serial.print(",");
//  Serial.print(sensor3);
    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);
}

Step 1

For the critique of a project, I went to the project by Duorfan and Kiki where they created an interaction game for solving recycling where the background gradually became more green as people recycled. This stresses the environmental value of recycling.  I thought that this project was interesting in the sense that people had to identify the object and move the trashcan to catch it as an interaction rather than simply using the mouse to press the trashcan. Moreover, this interaction is similar to the real world’s interaction of recycling which was very clever. While conceptually it was very good, there were design flaws with the project where I provided feedback. They will be listed as follows:

1. There is no time that is provided for the player to see what the object they are recycling is. It was highly difficult to recycle without Duorfan telling me what the object was. To fix this, I recommended that they have the graphic of the object static for 2 seconds before starting the game so that players could identify the object.  
2. Another flaw was the distance sensor which was a big nuisance to use as the sensitivity was lacking and that the box didn’t slide well on the board. I recommended that they make a slider for the board or add wheels to the box so that it was easier to play the game. Moreover, more variety could be used in the product. 

Step 2

According to the people that participated in the user test, the intuitiveness of our project was the most successful, however, as our project didn’t have the buttons created so that they align with the position of the game during user testing, the user experience was lackluster. People wanted to play our game, but couldn’t play it comfortably as there was a lack of alignment with the game. I agree with this as I struggled to play and only controlled 2 circles rather than the 5 that I could control. There was also feedback on the interface that this should be played on. There was a recommendation to borrow a projector. We agree but  we couldn’t access one as they were all borrowed from the ER already. Other than that, we didn’t really incorporate any feedback from others. This is due to the planned design of the project previously thought out where the rendering designs and 3d modeling were already created to limit the necessity of changing anything or having anything be incorrectly made. 

For this recitation, I focused on making a parallel pattern with a light sensor and the brightness of a photo. The light sensor composes of the Arduino part while the brightness of the photo is from Processing. This parallel seemed like a natural process and is similar to what happens to the computer screen or phone screen that auto detect brightness and change itself accordingly which was what I aimed to mirror. Essentially, this is similar to how the brightness of a camera or the iso can be modified to be dimmed or brightened according to the brightness of the external background. 

Processing Code:

// IMA NYU Shanghai
// Interaction Lab
// For receiving multiple values from Arduino to Processing

/*
 * Based on the readStringUntil() example by Tom Igoe
 * https://processing.org/reference/libraries/serial/Serial_readStringUntil_.html
 */

import processing.serial.*;

String myString = null;  //string will take the Arudino values , but according to ASICC code
Serial myPort;


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

PImage photo;

void setup() {
  background(0);
  size(1500, 1500);
  photo = loadImage("HELP.png");
   setupSerial();
}


void draw() {
  updateSerial();
  //printArray(sensorValues);

  // use the values like this!
  // sensorValues[0] 
 tint(map (sensorValues[0], 0, 1023, 0, 255)); 
  image(photo, 0, 0);

} 



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

// IMA NYU Shanghai
// Interaction Lab
// For sending multiple values from Arduino to Processing


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

void loop() {
  int sensor = analogRead(A0);

  // keep this format
  Serial.print(sensor);
  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);
}

For recitation 8, the focus was on serial communication where there were tasks to create Arduino to processing serial communication and processing to Arduino serial communication. 

Exercise 1

For exercise 1, the task was to create an etch a sketch. This wasn’t too difficult as potentiometers sent serial communication to processing to draw lines. One potentiometer controlled the x of the processing and the other controlled the y coordinate. A video will be attached to show this learning. 

Processing Code

// IMA NYU Shanghai
// Interaction Lab
// For receiving multiple values from Arduino to Processing

/*
 * Based on the readStringUntil() example by Tom Igoe
 * https://processing.org/reference/libraries/serial/Serial_readStringUntil_.html
 */

import processing.serial.*;

String myString = null;
Serial myPort;
float x, y;//current
float m, n;//previous


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

void setup() {
  size(500, 500);
  background(0);
  setupSerial();
  m = 0;
  n = 0;
}


void draw() {
  updateSerial();
  printArray(sensorValues);
  float x = map(sensorValues[0], 0, 1023, 0, width);
  float y = map (sensorValues[1], 0, 1023, 0, height);
  fill(255);
  stroke(255);
  strokeWeight(5);
  line(m, n, x, y);

  //update previous 
  m = x; 
  n = y;
  //stroke(5);
  //frameRate(1);
  //   line (0,0, x, y);

  //}
  //  if (sensorValues[1]==1){

  //    background (0);
  //    fill(255);
  //  circle (50,50,50);
  //}

  // use the values like this!
  // sensorValues[0] 

  // add your code

  //
}



void setupSerial() {
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[ 2 ], 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 Code
// IMA NYU Shanghai
// Interaction Lab
// For sending multiple values from Arduino to Processing
void setup() {
 Serial.begin(9600);
}
void loop() {
 int potentiometer1 = analogRead(A0);
 int potentiometer2 = analogRead(A1);
 // keep this format
 Serial.print(potentiometer1);
 Serial.print(",");  // put comma between sensor values
 Serial.print(potentiometer2);
 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);
}

Exercise 2
For exercise 2, I focused on making the buzzer's frequency react to the coordinates of the x-coordinate of the trackpad. 
This helped make it more focused and interactive where a video will be attached. 
 

// IMA NYU Shanghai
// Interaction Lab


/**
 * This example is to send multiple values from Processing to Arduino.
 * You can find the arduino example file in the same folder which works with this Processing file.
 * Please note that the echoSerialData function asks Arduino to send the data saved in the values array
 * to check if it is receiving the correct bytes.
 **/


import processing.serial.*;

int NUM_OF_VALUES = 2;  /** 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()[ 2 ], 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);

  // changes the values
  //for (int i=0; i<values.length; i++) {
  values[0]= mouseX;//
  values[1] = mouseY;




  // 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(20);
}

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 );
}

Arduino Code

// IMA NYU Shanghai
// Interaction Lab


/**
  This example is to send multiple values from Processing to Arduino.
  You can find the Processing example file in the same folder which works with this Arduino file.
  Please note that the echo case (when char c is 'e' in the getSerialData function below)
  checks if Arduino is receiving the correct bytes from the Processing sketch
  by sending the values array back to the Processing sketch.
 **/

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


/** DO NOT REMOVE THESE **/
int tempValue = 0;
int valueIndex = 0;
float x;
float y;
/* This is the array of values storing the data from Processing. */
int values[NUM_OF_VALUES];


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

void loop() {
  getSerialData();
  x = map(values[0], 0, 500, 2000, 5000);
  y = map(values[1], 0, 500, 100, 200);
  tone(8, x, y);

}


//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;

Additional Homework

The additional homework for this week revolved around using boolean true and boolean false to create the stars appearance and disappearance. I struggled at first to understand how boolean would be used as I made it flicker when I pressed the button, however after asking a fellow to assist me in understanding how the drawing works, I was able to figure it out to be boolean. A video will be attached as well as a photo of the circuit. 

Processing Code :

// IMA NYU Shanghai
// Interaction Lab
// For receiving multiple values from Arduino to Processing

/*
 * Based on the readStringUntil() example by Tom Igoe
 * https://processing.org/reference/libraries/serial/Serial_readStringUntil_.html
 */

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 h=0;
int k=0;
boolean b = false;
boolean c=false;

void setup() {
  size(600, 600);
  background(0);
  setupSerial();
}


void draw() {
  updateSerial();
  printArray(sensorValues);
  background (0);
  if (sensorValues[0]==1 &&sensorValues[0]!=h) {
    b=!b;
  }
  if (sensorValues[1]==1 &&sensorValues[1]!=k) {
    c=!c;
  }
  if (b) {
    star(100, 100, 80, 100, 40);
  }
  if (c) {
    star(250, 300, 30, 70, 5);
  }
  h=sensorValues[0];
  k=sensorValues[1];
}


void setupSerial() {
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[2], 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 star(float x, float y, float radius1, float radius2, int npoints) {
  float angle = TWO_PI / npoints;
  float halfAngle = angle/2.0;
  beginShape();
  for (float a = 0; a < TWO_PI; a += angle) {
    float sx = x + cos(a) * radius2;
    float sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a+halfAngle) * radius1;
    sy = y + sin(a+halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

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 code: 

// IMA NYU Shanghai
// Interaction Lab
// For sending multiple values from Arduino to Processing


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

void loop() {
  int button1 = digitalRead(7);
  int button2 = digitalRead(8);

  // keep this format
  Serial.print(button1);
  Serial.print(",");  // put comma between sensor values
  Serial.print(button2);
  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);
}

For the Final Project, we changed the initial 6 ideas we had to this final project due to information received from the instructor and classmates. In particular, what influenced us was the suggestion to move away from buttons and sliders where we reviewed all our existing ideas and thought about how this component could be removed. In addition, we also focused on trying to make the works original as there was a comment that the sand table idea didn’t add many original components to it. The final project information will then be provided below. 

A. Molecular Soccer

B. I found inspiration from the Gameboy for this project where controls of the console were simple but could alternate the dimensionality of the game. When I was young, I’ve also played soccer on a Gameboy before thus this project also is derived from past experience of playing soccer. Our project focuses on the specific purpose of entertainment for young children as well as ingraining technical scientific principle of expansion and heat upon them. We’d like to address simple education through entertainment to young children to allow them to actually use a product that would help them learn. This is due to children’s interests in leisure rather than learning. We’d also like to include subtle graphics that show scientific models of expansion to children to expose them to knowledge at an early age as a byproduct of playing this game in hopes that they understand such knowledge easily. 

C. Our project will be a projection of a game similar to soccer, but simplified to simple circles to represent the players. The circles will expand and compress based on the distance of the hand above or below them which is important to note as the “soccer ball” reflects on the circle based on the angle of impact. In total, there will be 14 circles with 7 circles that are controlled by each user. This project will first have the mechanics of processing work out in which the circular ball reflects when it hits another ball as well as how it will count points when it enters the goal which will be completed by December 1. Afterwards, we will try to implement the ultrasonic sensors to test the serial connection between Arduino and processing on December 2. When both of these steps have been perfectly completed, the design of the game box will be 3D modeled in Rhinoceros before having the pieces laser cut and attached to each other on December 3 and perfected so that it can be user tested on December 4. 

Steps that will be taken to empathize with the target audience would be to account for arm span so that they can properly experience the game device without stretching and covering the projection. Moreover, as this device is conceptually targeted to children we would like to make it simpler for them to control where the ultrasonic sensor will have lower distance settings in which the circle will expand. Other than the above, the aesthetics may appear more childish in the sense that there may be engraved drawings. 

D. From the preparatory research and readings, I was most impacted by the definition of interaction that was studied between them. In particular, Edmonds’ dynamic-passive interaction and dynamic-interactive interaction stood out to me most which inspires this proposal. It can be seen in my project that it is dynamic-interactive as the movement of the virtual ball changes how the players move within the game. Moreover, this also is inline with my definition of interaction which is that an action leads to a reaction that leads to another action from the source. This should be reciprocal where both sources should contribute in the interactive manner. It can be seen in this idea that the action of a ball moving leads to reactions of the individual which lead to continuous movements of the ball in the direction that’s reflected. 

I think that this project is unique in the sense that a lot of the control components are simplified so that only the size of the ball can affect movement, direction, and etc. We then take the existing sport of soccer and implement it to this game to create a new experience of playing soccer which is different from modern day video game consoles. We think that this is significant as it provides opportunities to strengthen the kinetic skills of individuals as an entertaining game to them. It can also provide a basis to them on how cells expand when heating as the circle will turn red. This project could be a non-digital screen based game which is rare in society as everything is technology based, especially gaming consoles. Subsequent projects could build upon this idea of simple controls to address the child audience in a healthy manner that doesn’t include digital gaming on a screen. While the value of this project would not be especially high in terms of educational worth, it can provide joy which can arguably be worth it for many parents in our society as well as entertainment worth. 

Sand Art Table

This table concept takes inspiration from the Sisyphus Table that I researched outside of the projects from the last blog. It essentially is a clear table with sand and a metal ball inside of it that creates kinetic designs. I want to evolve this design to be manual and interactive for people to entertain themselves with where I would include the addition of a joystick that controls the movement of the ball on the sand to create certain patterns. Along with this, there will be a projector that projects different colors to create a more immersive table that creates different moods. 

This product aims to redefine the aesthetics of a table to be dynamic through creating a device that amends the patterns of the table for people of all ages. For children, this will be a device that initiates their creativity as a entertainment object while for teenagers, students, and the working class, this can be a product that reduces stress during their daily activities as it has been proven that art reduces stress. Being for a vast audience, the purpose of the product isn’t to provide the entertaining, stress-relieving features that it offers, rather, it is to be a product that has the potential of providing these services when there is a need so the users can also use this as a normal table for completing their daily tasks. 

Arduino Educational Board Game

This idea takes inspiration from both the Gameboy and Monopoly where it is a board game that revolves around a device for educational purposes when playing a game. The board game is based on movement according to whether or not a question on a card is answered correctly. The questions are based on the Arduino programming language where it may ask questions such as function notations of void setup or details such as whether or not a circuit is correct. This was influenced by Monopoly for the game movement and the device is based on the old Gameboy to display the answers to the question through input of numbers. 

This product aims to provide an educational experience of Arduino to young children and aspiring computer engineers that want to learn how the logic of computers work. In providing an educational experience through a board game that young children would like to play, it would like to assist the development of the next generation of talents in the STEM studies. In teaching these talents to basic STEM fundamentals through a game, the aim is to ingrain such knowledge into them so that they can apply it to Arduino later. 

Musical Table 

This concept is based upon the Gameboy but used on a different surface being the table. It essentially is a variety of buttons and levers on a table surface which serve as an instrument that can be played. Each button has a different pitch on the table which they can play and pitch can be determined by other buttons of the interface. 

This product children aspiring to learn instruments and is meant to improve their music interests. When children go to school, they normally go back home to do homework where they would use a desk. This product is meant to provide inspiration for children to develop musical interests on the table that they write homework in which may also serve them entertainment purposes. 

For this recitation, there was an emphasis on using arrays to create a function in which we were tasked to create a drawing of an object. For this, I created a hourglass like design using triangles and a square. It would look like the photo below where the sketch video will also be attached. 

The code to this drawing is the following:

int instances=100;
float[] move = new float[100];
float [] xPos= new float [instances];
float [] yPos= new float[instances];
color [] cL=new color[instances];

void shapeX (float x, float y, color c) {
  fill (c);
  circle (x, y, 20);
  fill (c/2);
  rectMode (CENTER);
  square (x, y, 30);
  fill (c/4);
  triangle (x-15, y+10, x, y-5, x+15, y+10);
  fill (c/8);
  triangle (x-15, y-10, x, y+5, x+15, y-10);
}
void setup() {
  size (600, 600);
  background (0);
  for (int i=0; i<instances; i++) {
    xPos[i]=(random(0, 600));
    yPos[i]=(random(0, 600));
    cL[i]=color (random(0, 255), random (0, 255), random (0, 255));
    move[i]=(random(5));
  }
  noStroke();
}
void draw() {
  background (0);
  for (int i=0; i<instances; i++) {
    shapeX (xPos[i], yPos[i], cL[i]); 
    if ((xPos[i] + move[i] > 600)||(xPos[i] + move[i] < 0)) {
      move[i]=-move[i];
    }
    xPos[i] = xPos[i]+move[i];
  }
}

Afterwards, there was the additional homework with the responsive graphic to the mouse point where a video of the graphic will be attached as well as the code. For the code, I struggled with it a lot and went to the study session to understand how it works and what to do. 

int col=25, row=25;
int totalNumber=col*row;
int padding=140;
int defaultSize=10;
float[]xPositionsOriginal = new float [totalNumber];
float[]yPositionsOriginal = new float [totalNumber];


float[]xPositions = new float [totalNumber];
float[]yPositions = new float [totalNumber];

float[]sizeFactors = new float [totalNumber];

float lerpFactors=0.5;

void setup() {
  size(800, 800);
  for (int i=0; i<col; i++) {
    for (int j=0; j<row; j++) {
      int index=j+i*row;
      xPositionsOriginal[index]=map(i, 0, col-1, padding, width-padding);
      yPositionsOriginal[index]=map(j, 0, col-1, padding, height-padding);

      xPositions[index]=xPositionsOriginal[index];
      yPositions[index]=yPositionsOriginal[index];
      sizeFactors[index]=1.0;
    }
  }
}
void draw() {
  background(255);
  for (int i=0; i<totalNumber; i++) {
    float offset=dist(mouseX, mouseY, xPositionsOriginal[i], yPositionsOriginal[i]);
    offset=max(offset, 0.001);
    float newX=xPositionsOriginal[i]-(25/offset)*(mouseX-xPositionsOriginal[i]);
    float newY=yPositionsOriginal[i]-(25/offset)*(mouseY-yPositionsOriginal[i]);


    xPositions[i]=lerp(xPositions[i], newX, lerpFactors);
    yPositions[i]=lerp(yPositions[i], newY, lerpFactors);

    sizeFactors[i]=100/offset;
    sizeFactors[i]=max(sizeFactors[i], 0.4);
    sizeFactors[i]=min(sizeFactors[i], 2);
    fill(0);
    circle(xPositions[i], yPositions[i], sizeFactors[i]*defaultSize);
  }
}

For question 1, the difference between having the loop and set up and draw is essentially whether the sketch will be a continuous animation or if the sketch will be static. When the loop is in setup, there will be no repetition of the sketch which only allows it to be a static image. When the loop is in draw, it will repeat the animation and the functions of the code per frame which would make it animating if the frame has such properties. For question 2, I believe that arrays are beneficial to processing codes as it makes the code more efficient and makes the code easier to control. Essentially, it stores data of information within a set of data which can easily be accessed by the user at their will. This then can be applied to sets of data for names of objects, functions such as color, size, and etc, and more. It also condenses the information allowing it to be tidy so that information can be easily accessed and used to create the wanted sketch. I might use this in my project by combining information of a certain project within my text. For example, if I make a board game, I may include variables of text that should appear in an array so that the projector can display the necessary text.