Documentation Blog on Recitation 9

Recitation 9 Work

Arduino Code here:

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


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

void loop() {
  int sensor1 = analogRead(A0);
  int sensor2 = analogRead(A1);
  //  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 Code here:

 

PImage img;
import processing.serial.*;

String myString = null;
Serial myPort;


int NUM_OF_VALUES = 3;   
int[] sensorValues;  
void setup() {
  setupSerial();
  size(600, 404);
  noStroke();
  img = loadImage("Hokusai.jpg");
}

void draw() {
  updateSerial();
  printArray(sensorValues);
  for (int i=0; i<100; i++) {
    int sizex = int(map(sensorValues[0], 0, 1023, 1, 20));
    int sizey = int(map(sensorValues[1], 0, 1023, 1, 20));
    //int z = int(map(sensorValues[2], 0, 1023, 1, 100));
    int x = int( random(img.width) );
    int y = int( random(img.height) );
    color c = img.get(x, y);
    fill(c);
    ellipse(x, y, sizex, sizey);
    //filter(INVERT);
  }
}

void mousePressed() {
  saveFrame("HokusaiRecreated.png");
}
void setupSerial() {
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[ 3 ], 9600);
  myPort.clear();
  myString = myPort.readStringUntil( 10 ); 
  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]);
        }
      }
    }
  }
}

Reflection:

The work I have done in the recitation was to use two potential-meters to control the shapes and the sizes of the pixels displaying the image, aiming to create an impressionistic style. By reading the article Computer Vision for Artists and Designers: Pedagogic Tools and Techniques for Novice programmers, I got some interesting inspirations and ideas from it. The way computers create art is like visualization and realization of people’s minds, and the computer programs are like methods that actually imitate what exactly happens inside the human brain. To be more specific, when we look at an image, we capture it with our eyes and then process it through our brain. Therefore, what we see is actually what we “think”. Similarly, the process of a computer creating arts also includes the step of sending information source to its GPU and the step of processing the picture with it and then display. It appears to me that the basic theory of art creation is the same, regardless of whether the creator is the man or the computer. I can directly use imagination in my brain to change the properties of the image, but then I need to use different kinds of visualization methods to display it, and what computers do to produce arts is exactly the same, except that the visualization production will be carried out algorithms instead of manual work. 

Reference: The image used for my recitation work comes from the IxLab-Images-examples made by NYUSH IMA.