Recitation 9: Media controller by Linhui

Lab Date: April 28, 2019
Instructor: Marcela

Recitation:

In today’s recitation, I hope to use a potential meter to control the color of a picture that I am really appreciated.  I hope to change it into pixel also and can be rotated with the moving of my mouse. I asked Easter to know one more code, that is, the tint(); function. It can set the fill value for displaying images. Images can be tinted to specified colors or made transparent by including an alpha value. However, I found a problem when I start to use the tint, the picture appears two different color and the other half shrinks in a smaller size. Then, I checked the code and considered whether it is the problem of the value in tint();.I change the value and find it becomes normal.

Reflection:

Before this class, I knew the computer vision technique only from computer science applications, for example, facial detection. From this article, computer vision can be applied to the use of designing games, interactive art projects, and Artificial intelligence. Computer vision gives a new space for creation based on existing projects or artworks. It gives the static image life to move, which greatly increases the interaction level. Before we learning the processing, what we do most is based on Arduino. Now, we make Arduino data as an input and the computer as an output. We start to learn how to make an animation and an illusion, though they are still at the beginning. Computer vision makes our project more abundant and colorful and produces more deviations. 

One project impresses me a lot is the “Messa di Voce”, which uses computer vision technology to track the location of the users and visualize the invisible voice according to the sound frequency and strength. When the people move and speak,  there will be bubbles in different size coming out of the speakers’ mouth. This audiovisual project realizes the interaction between technology and human beings. It is no longer simple speaking and no longer static image, it evolves into a virtual reality. 

// IMA NYU Shanghai
// Interaction Lab
// This code receives one value from Arduino to Processing 

import processing.serial.*;


Serial myPort;
int valueFromArduino;
PImage img;
int halfimg = width*height/2;
int size = 20;

void setup() {
  size(1000, 1000);
  img = loadImage("recitation.jpg");
  colorMode(HSB,100);
  

  printArray(Serial.list());
  // this prints out the list of all available serial ports on your computer.

  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.
}


void draw() {
  image(img, 0, 0, width, height);
  tint(valueFromArduino, 100 , 255, 125);
  loadPixels();
for (int i = 0; i < halfimg; i++) {
  pixels[i+halfimg] = pixels[i];
}
updatePixels();

for( int x = 0; x < img.width; x = x + size) {
    for (int y = 0  ; y < img.height; y = y + size) {
      //colorMode(HSB,100);
      //fill( x*100/width, y*100/height, 100);
      
      int index =(y*img.width) + x;
      fill(img.pixels[index]);
      
     float d = dist(x, y, mouseX, mouseY);
     d = map(d,0,sqrt(width*width + height*height), 1, 20);
     float angle = map (d, 1, size*2, 0, PI);
     pushMatrix();
     translate(x,y);
     rotate(angle);
     
      
      
      rect(0 , 0, d,  d );
      popMatrix();
  
      }
    }

  //image(img, 0, 0);
  // to read the value from the Arduino
  while ( myPort.available() > 0) {
    valueFromArduino = myPort.read();
  }
  println(valueFromArduino);//This prints out the values from Arduino
}

Leave a Reply