I wanted to create a design in Processing using images that look like old style photos from a photo booth, and combine these images with recorded video and live video capture. I’m interested in the notion of the passage of time and images, for example when you see a photo or a recorded video, you don’t know what occurred right before or after that image was captured; it is a snapshot in time. So, with this project, I experimented with 3 phases of time — a still snapshot, recorded video segment, and live video capture — combining imagery of an old fashioned photo booth and a moving film strip. The background image shows a city scene with high-rise buildings, a reminder of the film industry and photography craze in New York City.

When the sketch opens, the user sees a moving film strip and what appears to be still images. However, when the user mouses over one of the photos, the still photo turns into a video and that video segment plays continuously in a loop while the user’s mouse remains over the image. Also, the live video capture is always displayed in one of the photo strip boxes, using the camera capture from the laptop.

Photo Booth Filmstrip from Suzanne Kirkpatrick on Vimeo.

CODE
Here is the code for the setup and main loop:

/*
Photo Booth Film Strip
by Suzanne Kirkpatrick
November 4, 2010
*/

import hypermedia.video.*;
import processing.video.*;
PImage myImage;

OpenCV movie;
Capture myCapture;

//variables for movies
int seg1 = 0;
int seg2 = 15800;
int seg3 = 25000;
int counter = 0;

//variables for film strip holes
float y = 5;
float spacing = 20;
int holecounter = 0;

//speed of film strip
float speedY = 6;
boolean rollover = false;

void setup () {
  size(500,720);
  //background(255,200,50);
  smooth();

  myCapture = new Capture(this,185,140,30);

  movie = new OpenCV(this);
  movie.movie("PhotoBooth0.m4v",185,140);
  myImage = loadImage("NYCskyline.jpg");
  myImage.resize(width,height);
  background(myImage);
}

void draw () {
  sceneOne();
  sceneTwo();
  sceneThree();
  sceneFour();
  sceneFive();
  sceneSix();
  sceneSeven();
  sceneEight();

  filmStrip();
  filmStripHoles();

  moveFilm();
  scenesReappear();
  filmStripReappear();
}

void captureEvent(Capture myCapture) {
  myCapture.read();
}

//END

Here is the code for each function:

//variables for film strip
float rect1Y = -20, rect2Y = 130, rect3Y = 280, rect4Y = 430, rect5Y = 580, rect6Y = 730, rect7Y = 880, rect8Y = 1030;

//make film strip
void filmStrip() {
  noFill();
  stroke(0);
  strokeWeight(25);
  rectMode(CENTER);
  rect(250,rect1Y,200,150);
  rect(250,rect2Y,200,150);
  rect(250,rect3Y,200,150);
  rect(250,rect4Y,200,150);
  rect(250,rect5Y,200,150);
  rect(250,rect6Y,200,150);
  rect(250,rect7Y,200,150);
  rect(250,rect8Y,200,150);
}

//make film strip holes on left and right sides
void filmStripHoles() {
  noStroke();
  fill(255,200,50);
  for(float y = 5 - holecounter*speedY; y <=1105 - holecounter*speedY; y+=spacing) {
    rect(148,y,4,6);
  }
  for(float y = 5 - holecounter*speedY; y <=1105 - holecounter*speedY; y+=spacing) {
    rect(352,y,4,6);
  }
}

//make film strip move if user is not moused over the strip, otherwise stop film strip
void moveFilm() {
  if(mouseX  350) {

    film1Y = film1Y - speedY;
    film2Y = film2Y - speedY;
    film3Y = film3Y - speedY;
    film4Y = film4Y - speedY;
    film5Y = film5Y - speedY;
    film6Y = film6Y - speedY;
    film7Y = film7Y - speedY;
    film8Y = film8Y - speedY;

    rect1Y = rect1Y - speedY;
    rect2Y = rect2Y - speedY;
    rect3Y = rect3Y - speedY;
    rect4Y = rect4Y - speedY;
    rect5Y = rect5Y - speedY;
    rect6Y = rect6Y - speedY;
    rect7Y = rect7Y - speedY;
    rect8Y = rect8Y - speedY;

    //make yellow holes move
    holecounter++;

    if(holecounter >= speedY)
    {
      holecounter = 0;
    }
  }
}


//variables for film strip scenes
float film1Y = -90, film2Y = 60, film3Y = 210, film4Y = 360, film5Y = 510, film6Y = 660, film7Y = 810, film8Y = 960;

//play live video capture in frame 1
void sceneOne() {
  myCapture.filter(GRAY);
  image(myCapture,158,film1Y);
}

//play segment 1 in frame 2
void sceneTwo() {
  movie.jump(seg1, OpenCV.MOVIE_MILLISECONDS);
  // check if movie should play when mouse is moved over scene
  if(mouseX > 160 && mouseX  film2Y && mouseY  15500) {
        counter = 0;
      }
    }
  }
  else {
    counter=0;
  }

  movie.read();
  image(movie.image(),158,film2Y,185,140);
}

//play segment 2 in frame 3
void sceneThree() {
  movie.jump(seg2, OpenCV.MOVIE_MILLISECONDS);
  // check if movie should play when mouse is moved over scene
  if(mouseX > 160 && mouseX  film3Y && mouseY  22190) {
        counter = 0;
      }
    }
  }
  else {
    counter=0;
  }

  movie.read();
  image(movie.image(),158,film3Y,185,140);
}

//play segment 3 in frame 4
void sceneFour() {
  movie.jump(seg3, OpenCV.MOVIE_MILLISECONDS);

  if(mouseX > 160 && mouseX  film4Y && mouseY  28500) {
        counter = 0;
      }
    }
  }
  else {
    counter=0;
  }

  movie.read();
  image(movie.image(),158,film4Y,185,140);
}


//play live video capture in frame 5
void sceneFive() {

  myCapture.filter(GRAY);
  image(myCapture,158,film5Y);
}

//play segment 1 in frame 6
void sceneSix() {
  movie.jump(seg1, OpenCV.MOVIE_MILLISECONDS);
  // check if movie should play when mouse is moved over scene
  if(mouseX > 160 && mouseX  film6Y && mouseY  15500) {
        counter = 0;
      }
    }
  }
  else {
    counter=0;
  }

  movie.read();
  image(movie.image(),158,film6Y,185,140);
}

//play segment 2 in frame 7
void sceneSeven() {
  movie.jump(seg2, OpenCV.MOVIE_MILLISECONDS);
  // check if movie should play when mouse is moved over scene
  if(mouseX > 160 && mouseX  film7Y && mouseY  22190) {
        counter = 0;
      }
    }
  }
  else {
    counter=0;
  }

  movie.read();
  image(movie.image(),158,film7Y,185,140);
}


//play segment 3 in frame 8
void sceneEight() {
  movie.jump(seg3, OpenCV.MOVIE_MILLISECONDS);

  if(mouseX > 160 && mouseX  film8Y && mouseY  28500) {
        counter = 0;
      }
    }
  }
  else {
    counter=0;
  }

  movie.read();
  image(movie.image(),158,film8Y,185,140);
}

//make film scenes reappear at the bottom of the screen
void scenesReappear() {
  if(film1Y < -140) {
    film1Y = height + 340;
  }

  if(film2Y < -140) {
    film2Y = height + 340;
  }

  if(film3Y < -140) {
    film3Y = height + 340;
  }

  if(film4Y < -140) {
    film4Y = height + 340;
  }

  if(film5Y < -140) {
    film5Y = height + 340;
  }

  if(film6Y < -140) {
    film6Y = height + 340;
  }

  if(film7Y < -140) {
    film7Y = height + 340;
  }

  if(film8Y < -140) {
    film8Y = height + 340;
  }
}


//make film strip rectangles reappear at the bottom of the screen
void filmStripReappear() {
  if(rect1Y < -70) {
    rect1Y = height + 405;
  }

  if(rect2Y < -70) {
    rect2Y = height + 405;
  }

  if(rect3Y < -70) {
    rect3Y = height + 405;
  }

  if(rect4Y < -70) {
    rect4Y = height + 405;
  }

  if(rect5Y < -70) {
    rect5Y = height + 405;
  }

  if(rect6Y < -70) {
    rect6Y = height + 405;
  }

  if(rect7Y < -70) {
    rect7Y = height + 405;
  }

  if(rect8Y < -70) {
    rect8Y = height + 405;
  }
}
//END