Recitation 8: Serial Communication by Tina(Tianyu Zhang)

[In-class Exercise]

Interaction included: 

In this project, the users are making interactions with the computer through Arduino and Processing. The users are able to change the position of the two ends of the line to draw a piece of a painting by knobbing the two potentiometers. With the change of mouse positions, the users will finally be able to draw a painting. 

Video documentation:

Reflection on the Interaction:

The interaction is really interesting since the users can draw paintings without even using a pen. From the perspective of innovation, it is a really interesting interaction. However, maybe adding more sensors or other things may be able to enrich the user experience. For instance, we may read more indexes like the mouse positions or others to change the color of the painting.  

Code attached: 

Arduino:

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

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

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

Processing: 

import processing.serial.*;

String myString = null;
Serial myPort;
float preX;
float preY;

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


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


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

  // use the values like this!
  // sensorValues[0] 
float posX = map(sensorValues[0],0,1023,0,width);
float posY = map(sensorValues[1],0,1023,0,height);
  // add your code
  stroke(255);
  line(preX,preY,posX,posY);
  //
  preX = posX;
  preY = posY;
}



void setupSerial() {
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[5], 9600);
  // Change the PORT_INDEX to 0 to find where your port is.

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

 

[Additional Homework]

Interaction included: 

Video documentation:

 

Reflection on the Interaction:

Code attached: 

Arduino:

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

void loop() {
  int sensor1 = digitalRead(9);
  int sensor2 = digitalRead(10);
  //int sensor3 = analogRead(A2);

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

 

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 preButtonValue0 = 0; //initial value of the first button is 0
int preButtonValue1 = 0;
int[] buttonValues;

boolean star1Display = false;
boolean star2Display = false; // initial state of the star display is false


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


void draw() {
  updateSerial();
  printArray(buttonValues);
  background(0);
  // use the values like this!
  // sensorValues[0] 

  if (buttonValues[0] == 1 && buttonValues[0] != preButtonValue0){
    star1Display = !star1Display;
  }
   if (buttonValues[1] == 1 && buttonValues[1] != preButtonValue1){
    star2Display = !star2Display;
  }
  if (star1Display){
  pushMatrix();
  translate(width*0.3, height*0.5);
  rotate(frameCount / 400.0);
  star(0, 0, 80, 100, 40); 
  popMatrix();
  }
  
  if (star2Display){
  pushMatrix();
  translate(width*0.7, height*0.5);
  rotate(frameCount / -100.0);
  star(0, 0, 30, 70, 5); 
  popMatrix();
  }

  //previous value of button is also changing so we update it as well
  preButtonValue0 = buttonValues[0];
  preButtonValue1 = buttonValues[1];
  // add your code
  //pushMatrix();
  //translate(width*0.2, height*0.5);
  //rotate(frameCount / 200.0);
  //star(0, 0, 5, 70, 3); 
  //popMatrix();
  
  //pushMatrix();
  //translate(width*0.5, height*0.5);
  //rotate(frameCount / 400.0);
  //star(0, 0, 80, 100, 40); 
  //popMatrix();
  
  //pushMatrix();
  //translate(width*0.8, height*0.5);
  //rotate(frameCount / -100.0);
  //star(0, 0, 30, 70, 5); 
  //popMatrix();
  //
}

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

  buttonValues = 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++) {
          buttonValues[i] = int(serialInArray[i]);
        }
      }
    }
  }
}