Recitation 9: Media Controller–Lifan Yu

Recitation 9: Media Controller

Lifan Yu (ly1164)

       In this recitation I changed the parameters of an image I painted, using Arduino and processing.

1. I used the function “tint()” to change the colors. I used potentiometers to do this through serial communication.
2. Also, when a button is pressed, my image starts moving and bounces when it touches edges.
3. I used another potentiometer to control the blurring of this image using filter(BLUR, b);
4. I used one more potentiometer to control zooming by adding the array of potentiometer data into my image’s size parameters:  float n=map(sensorValues[1],0,1023,0,500);  image(img1, x, y, n, n);

Zoom in and zoom out:

Tint:

Before applying these data, I mapped the original data from Arduino to suitable ranges for each parameter.

Code for Arduino:

// 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 = digitalRead(6);
int sensor4 = analogRead(A3);

// keep this format
Serial.print(sensor1);
Serial.print(“,”); // put comma between sensor values
Serial.print(sensor2);
Serial.print(“,”);
Serial.print(sensor3);
Serial.print(“,”);
Serial.print(sensor4);
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);
}

Code for Processing:

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

/*
 * Based on the readStringUntil() example by Tom Igoe
 * https://processing.org/reference/libraries/serial/Serial_readStringUntil_.html
 */

import processing.serial.*;

String myString = null;
Serial myPort;


int NUM_OF_VALUES = 4;   /** YOU MUST CHANGE THIS ACCORDING TO YOUR PROJECT **/
int[] sensorValues;      /** this array stores values from Arduino **/
PImage img1;
float m=0;
float n=0;
float x=0;
float y=0;
float speedX=10;
float speedY=10;


void setup() {
  size(1000, 1000);
  background(0);
  setupSerial();
  img1 = loadImage("Witch.png");
}


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

  // use the values like this!
  // sensorValues[0] 
  imageMode(CENTER);
float m=map(sensorValues[0],0,1023,0,500);
  float n=map(sensorValues[1],0,1023,0,500);
  float b =map(sensorValues[3],0,1024,0,10);
    
  // add your code
  background(0);
  tint(m,m,m,m);
  
image(img1, x, y, n, n);
filter(BLUR, b);

if (sensorValues[2]==0 ){
  x=300;
  y=300;
}else{
x=x+1.7*speedX;
y=y+speedY;
if(x>width||x<0){
  speedX=-speedX;
}
if(y>height||y<0){
  speedY=-speedY;
}
}

  //
}



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

       The way that technology is used in my project is the serial communication that allows users to change parameters of a picture without actually typing in those data in a computer. Rather, this process is done by interacting with physical devices, changing their input values–indirectly but simply and conveniently changing parameters into whatever values we like. This only requires an extra step of mapping values into new ranges (that fit their parameters) after we have built up a serial communication between Arduino and Processing. Using this technology, even people who don’t know much about computer programming can easily interact with that image and change it’s features.