Recitation 10 Media Manipulation Chloe Wang

In this recitation, I decided to do the media manipulation workshop. For the workshop, we needed to choose a music video or any video clip and recreate it with processing.  I chose a clip of my favorite Chinese TV show as the original video to work on. I downloaded the video and renamed it to liuxing.mp4. Liuxing is one of the main character’s name. At first, I was confused because I didn’t know how to incorporate the map() function in the video. So my first action was to loop the video to make it play over and over again. 
I also wanted to make the video pixelated when mouse is pressed because this is a quite old TV series with low resolution. But when I watched it while I was young, I remembered it to have rather a high resolution. 
To use the map function, I made the video to change speed according to where the mouse is placed on the canvas. To change the speed, I used a float i function, i is the speed, and it is changed according to the map. 
float i =map(mouseX,0,mouseY, 0,4);
myMovie.speed(i);
Here is the final result of my media manipulation project:
https://youtu.be/erkvH7dAsC4 
Here is my code:
import processing.video.*;

Movie myMovie;
void setup() {
  size(636, 360);
  myMovie = new Movie(this, "liuxing.mp4");
  myMovie.play();
  myMovie.loop();
  //define the state of the video
}
void draw() {
  if (myMovie.available()) {
    myMovie.read();
    //read the current frame of my video
  }
  image(myMovie, 0, 0);
  //draw the current frame of the video
float i =map(mouseX,0,mouseY, 0,4);
myMovie.speed(i);

if (mousePressed){
int rectSize = 10;
  int w = myMovie.width;
  int h = myMovie.height;
  for (int y = 0; y < h; y+=rectSize) {
    for (int x = 0; x < w; x+=rectSize) {
      int a =  x + y * w;
      fill( myMovie.pixels[a] );
      rect(x, y, rectSize, rectSize);
    }
}}
}

Source:
 

Recitation 10–Vivien Hao

For this recitation, I chose to do the media one. I have a lot of videos from different concerts. I have chosen one video and then insert it in this code. I want to use the videos that I have taken in the past. And by using potentiometer, I could control the speed of the video. The following codes are for Arduino and Processing. 

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);
Serial.print(sensor1);
Serial.println();
delay(100);
}

Processing:

import processing.video.*;
Movie myMovie;
import processing.serial.*;
Serial myPort;
int valueFromArduino;

void setup() {
  size(400, 400);
  myMovie = new Movie(this, "ljj.mp4");
  myMovie.play();
   printArray(Serial.list());
  // this prints out the list of all available serial ports on your computer.

  myPort = new Serial(this, Serial.list()[ 2 ], 9600);
  //define the state of the video
}
void draw() {
  while ( myPort.available() > 0) {
    valueFromArduino = myPort.read();
  }
  println(valueFromArduino);
  float x = map(valueFromArduino,0,1023,0,93);
  if (myMovie.available()) {
    //read my file when it can be read
    myMovie.read();
    //read the current frame of the video
  }
  //draw the frame
  if (mousePressed){
   if (mouseX<width/2){
     myMovie.jump(myMovie.time()-x);
     myMovie.read();
   }else{
     myMovie.jump(myMovie.time()+x);
     myMovie.read();
   }
  }
  image(myMovie, 0, 0);
}

Recitation 10: Workshop by Alexander Cleveland

Serial Communication

Although I was not present during this week’s observation, I choose to use the serial communication workshop with Young as a baseline of learning. I choose this workshop because I wanted to use past examples my work to further understand how I can use serial communication in the future. Alongside the workshop slides by Eszter and Jessica, I found both workshops to be very helpful by scanning through their notes and slides online.

Example of Serial Communication Using the Map Function

Because there is not a specific exercise involved with this workshop, I’ve chosen to properly showcase the mapping skills I’ve used throughout this class through the image tint I previously worked on.  The code for the image tinting is as follows:

My Code

Arduino

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


void loop() {
  int sensor1 = analogRead(A0);
  Serial.write(sensor1);
  int a = map(sensor1, 0, 1023, 0 , 255);
  Serial.write(a);
//  Serial.print(sensor1);
//  Serial.println();
  

  // too fast communication might cause some latency in Processing
  // this delay resolves the issue.
  delay(10);
}

Processing

import processing.serial.*;
PImage img;
Serial myPort;
int valueFromArduino;
int sensor1;


void setup() {
  size(600, 600);
  img = loadImage("HK.jpeg");
  imageMode(CENTER);
  background(255);
  
  printArray(Serial.list());
  myPort = new Serial(this, Serial.list()[16], 9600);
}

void draw() {
  if (img.width > 0) {
    image(img, 300, 300, width, height);
    //float a = map(sensor1, 0, 1023, 0, 600); 
    
    while ( myPort.available() > 0) {
    valueFromArduino = myPort.read();
  }
  println(valueFromArduino);//This prints out the values from Arduino
}
  
  if ( valueFromArduino > 150) { 
    tint(0, 0, 255, 150);
    image(img, 250, 0);
  }
 else if (valueFromArduino < 149) {
  tint(0, 255, 0);
 }
  }

 Video example

Through this code, I created a mapping value in the Arduino code of “int a = map(sensor1, 0, 1023, 0 , 255)” and by doing so, I correlated the “int a” value with the values of sensor 1 (potentiometer). The reasoning for this was to create the lowest possible and highest possible values within the potentiometer in the second and third slots of the mapping. In the third and fourth slots I wrote in my lowest target value and highest target value. I also wrote in Sensor 1 so that all of the value in slots 1-4 would correlate with it. Through serial communication, these mapped out values were transferred to processing. The corresponding lines of code in processing were represented by “if ( valueFromArduino > 150) {     tint(0, 0, 255, 150);     image(img, 250, 0);   }  else if (valueFromArduino < 149) {   tint(0, 255, 0);” These values of 0-255 were the original target values I created in my map on Arduino. And thus by printing “println(valueFromArduino)” it was then possible to correlate the two programs to work together. 

Recitation 10—Tao Wen

The idea is when user clicks on each character in the picture, a picture featuring them is shown, like future-telling. If given enough time, I would make a flashing effect.

PImage image1,image2,image3;
float x=400;
float y=300;
float r=110;
int state=0;


void setup() {
  size(800, 600);
  image1 = loadImage("fox.jpg");
  image2=loadImage("dad1.jpg");
  image3=loadImage("dad2.jpg");
}
void draw() {
  background(0);
  imageMode(CENTER);
  image(image1, width/2, height/2);
  fill(235, 174, 52);
  ellipse(pmouseX,pmouseY,30,30);
  noStroke();
  fill(0, 0,0, 0);
  ellipse(x, y, r, r);
  if (mousePressed && ((mouseX-x)*(mouseX-x)+(mouseY-y)*(mouseY-y)<=r*r)) {
    state=1;
  }
  if (state==1){
  flash();
  }
  
    delay(30);
  }

  void flash(){
    imageMode(CENTER);
    image(image2,width/2,height/3,400,300);
  }