Recitation 9: Media Controller

Media Controller:

In this recitation, I created a Processing sketch that controls media (images) by manipulating both the size of the ellipse and the tint of the lights, using two physical controllers( 10k potentiometer) made with Arduino. 

The picture on the left is revised from the ex00_pixels_get we learned in class,

and the one on the right is revised from the ex03_tint.

Arduino:

I used two potentiometers to adjust two analog value. The circuit I used is similar with the one I made in last recitation.

Here’s the image of me controlling the two values.

 

Here’s the code:

void setup() {
  Serial.begin(9600);
}
  
void loop() {
  int theValue = analogRead(A0);
  int theMappedValue = map(theValue, 0, 1023, 0, 255);
  Serial.write(theMappedValue);
 
  theValue = analogRead(A1);
  theMappedValue = map(theValue, 0, 1023, 0, 255);
  Serial.write(theMappedValue);
 
  delay(20);  
}

 

Processing:

I may choose to use video, live video via webcam, or images as the media I will control in Processing.

By the way, in this recitation, I chose the images because my video library didn’t work well. However, it turns out to be working when assistant helped me restart the application. How silly I was. lol

I practice the use of map() since the two values I use work both in the tint and the size.

Here’s the code:

PImage img;
import processing.serial.*;
 Serial myPort;  // The serial port

int a = 0;
int b = 0;

void setup() {
  size(1200, 800);
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[1], 9600);
 
  noStroke();
  //img = loadImage("sunset.jpg");
  img = loadImage("colorful lights.jpg");
  img.resize(600, 800);
}

void draw() {
  while (myPort.available () > 1) {
    // read in the last byte sent from arduino (pot 2)
    a = myPort.read();
    // and the next byte (first one was discarded)
    b = myPort.read();
  for (int i=0; i<100; i++) {
    //int size = int( random(0.1, 50) );
    int x = int( random(img.width) );
    int y = int( random(img.height) );
    // get the pixel color
    color c = img.get(x, y);
    // draw a circle with the color
    //tint(0, 0, 255, 0);
    fill(c);
    float sizea = map( a, 0, 255, 0.1, 20);
    float sizeb = map( b, 0, 255, 0.1, 20);
    ellipse(x, y, sizea, sizeb);
    
  } 
   tint(a, b, 255, 155);
   image(img, 600,0);
  }
}

void mousePressed() {
  saveFrame("mySketch.png");
}

The computer is intelligent and sensible to receive input and output by using algorithmic method. The way computers create art is like the visualization and realization of people’s thoughts, while computer programs are like ways to actually imitate what happens inside the human brain. More specifically, when we view an image, we capture it with our eyes and then process it through the brain. I can directly use the imagination in my brain to change the attributes of the image, but then I need to use various visualization methods to display the image and how the computer will generate the image. After reading this week’s article, Computer Vision for Artist and Designers, I was inspired to numerous ways technology could be used in our project. The techniques used in reading (light sensor and motion sensor) are suitable for the examples. While I only use two potentiometers in my recitation project, my final project should include more interactions that require more user participation. Because the project in reading is interactive and emphasizes the connection between the user and the project, I need to adjust the idea of my own project interaction. 

Image resource:

• Pexels.com: https://www.pexels.com/