The inspiration for this project was described by Phil; and the endgame was described by Alex. I’m finally getting around to describing the middle…

In short, we wanted to build a display that would mimic the parallax effect of looking out a window into a physical landscape, and enhance that effect by creating exaggerated motion when the user moves back and forth in front of the display.

Visually, we took our inspiration from the classic side-scrolling video games of the eighties, which achieved a 3D effect by drawing several different flat layers which moved across the screen at different speeds.

First we looked for a photograph with a sharply-defined foreground, middleground, and background, and found this iconic image of pre-9/11 New York.

A little Photoshop magic, and we had three layers. (Because the foreground had to move farther than the other pieces, we extended it beyond its ordinary length).

Then we built a test sketch in Processing, controlled by the keyboard. Try it! (Due to the vagaries of putting Processing sketches online, it seems that you have to click on the applet window before you can do anything. After that, press j and l to move the scene back and forth).

Here’s the code:

PImage fground;
PImage mground;
PImage bground;

float locX, targetLocX;

void setup() {
  size(900, 708);

  fground = loadImage("Foreground2.png");
  mground = loadImage("Middleground2.png");
  bground = loadImage("Background.png");

  locX = 0;
  targetLocX = 0;
}

void draw() {
  background(125);
  imageMode(CENTER);
  if (targetLocX != locX) {
    locX = lerp(locX, targetLocX, 0.1);
  }
  image(bground, width/2 + 15 * locX, height/2 - 50);
  image(mground, width/2 + 39 * locX, height/2 + 55);
  image(fground, width/2 + 200 * locX, height/2 + 230);
}

void keyPressed() {
  if (key == 'l') {
    if (targetLocX >= 3) {
      targetLocX = 3;
    }
    else {
      targetLocX = targetLocX + 1;
    }
  }
  else if (key == 'j') {
    if (targetLocX <= -3) {
      targetLocX = -3;
    }
    else {
      targetLocX = targetLocX - 1;
    }
  }
  else {
  }
}

Basically, the sketch allows for 7 virtual locations, numbered -3 to 3. It starts at zero. Each time a key is pressed, the sketch sets a new ‘target location’ which represents the position the images should move to, and then uses a LERP (Linear Interpolation) function to move the images smoothly to the target location. The foreground moves 200 pixels between each position, the middleground moves 39, and the background moves 15.