For this recitation, we were instructed to pick a TV show or music video and recreate it in Processing by manipulating images and clips we found online. I chose The Office theme song. First, I needed to download it as an mp4, load it into the sketch, and set it to play on a loop. Then, to make it a little more fun, I changed the speed of the video so it would play three times as fast. I also used the pixel manipulation techniques that we learned in order to pixelate the video. Lastly, because we had to incorporate the map() function, I added three ellipses along the left-hand side that responded to the movements of the mouse. They are meant to give the video the impression of having been cut out with a three-hole punch, since the TV show is about a paper company.
Here is my code for Processing:
import processing.video.*;
Movie myMovie;
void setup() {
size(480, 480);
myMovie = new Movie(this, “officeIntro.mp4”);
myMovie.play();
myMovie.speed(3.0);
myMovie.loop();
}
void draw() {
if (myMovie.available()) {
myMovie.read();
}
if ( myMovie.available() ) {
myMovie.read();
myMovie.loadPixels();
}
int rectSize = 5;
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 i = x + y * w;
fill( myMovie.pixels[i] );
rect(x, y, rectSize, rectSize);
}
}
myMovie.updatePixels();
tint(255, 50);
image(myMovie, 0, 0);
float x1 = map(mouseX, 0, width, 50, 150);
ellipse(x1, 30, 50, 50);
float x2 = map(mouseX, 0, width, 50, 150);
ellipse(x2, 130, 50, 50);
float x3 = map(mouseX, 0, width, 50, 150);
ellipse(x3, 230, 50, 50);
}
Here is the finished product:
Credits: