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: