Recitation 9 : Johnny

For this recitation, I have used one of my favorite effects shown in Tuesday’s class. First, we can have a quick look at the final result of it, and I really love it.

When I rotate the potentiometer, I have mapped the input, making it range from 5 to 18.  The first part of the program is to get 2 images from the website, here I have chosen two covers of my favorite superhero Wolverine. And then, I use the for loop to get each pixel’s position, and based on the input from the potentiometer, I have recreated an image, which can be considered as an approximate simulation of the image from the website. At the same position as the pixel, the program will draw an ellipse, filled with the pixel’s color and the radius is the mapped result controlled by the potentiometer. When the index of the potentiometer is larger than 15, it will shift to the second picture and continue imitating it. This is because the second picture is a comic published much earlier before the first one, the rougher simulation indicates this point.

Here is my Arduino code.

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

void loop() {
  int sensor1 = map(analogRead(A0),0,1023,7,18);
  Serial.print(sensor1);
  Serial.println();
  delay(100);
}

Here is my Processing code.

PImage img1;
PImage img2;
import processing.serial.*;
String myString = null;
Serial myPort;
int NUM_OF_VALUES = 1;  
int[] sensorValues;     

void setup() {
  setupSerial();
  size(546, 840);
  noStroke();
  img1 = loadImage("https://i.annihil.us/u/prod/marvel/i/mg/3/c0/5b50b89954a90/clean.jpg");
  img1.resize(546, 840);
  img2 = loadImage("https://i.annihil.us/u/prod/marvel/i/mg/9/d0/5afc8095c653f/clean.jpg");
  img2.resize(546, 840);
}
void draw() {
  updateSerial();
  printArray(sensorValues);
  if (sensorValues[0]>=15) {
    for (int i=0; i<100; i++) {
      int x = int( random(img2.width) );
      int y = int( random(img2.height) );
      color c = img2.get(x, y);
      fill(c);
      ellipse(x, y, sensorValues[0], sensorValues[0]);
    }
  } else {
    for (int i=0; i<100; i++) {
      int x = int( random(img1.width) );
      int y = int( random(img1.height) );
      color c = img1.get(x, y);
      fill(c);
      ellipse(x, y, sensorValues[0], sensorValues[0]);
    }
  }
}

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[1];
}
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]);
        }
      }
    }
  }
}
void mousePressed() {
  saveFrame("old man logan.jpeg");
}

I think the most important technology part used in this little exercise is the software itself, the Processing. According to Fry’s words in “Computer Vision for Artist and Designers”,  processing “allows for fast manipulations of pixel buffers with a Java­based scripting language”. Especially in this exercise, indeed, I am dealing with the problem of pixels. This is similar to the camera part, “Computer Vision for Artist and Designers” has also mentioned that “The movements of people (or other objects) within the video frame can be detected and quantified using a straightforward method called frame differencing. In this technique, each pixel in a video frame F1 is compared with its corresponding pixel in the subsequent frame F2”. Though it is explaining the camera’s working mechanism and machine learning, this is very similar to what I have done. I have fed my program with two pieces of pictures and what it is told to do is to do one kind of simulation of that. These are two ways of how technology is embedded in my recitation exercise, though seeming to be easy, it is very useful and by combining those things together, we can get something very cool.