Parallax 3D effect


#1

Hi everyone, i want to recreate the parallax effect as shown in https://www.youtube.com/watch?v=Jd3-eiid-Uw. but instead of using the wii control i’m gonna use the kinect for head tracking including his depth in the space.

I made a version of it, it kinda works but, i’m sure that there’s a better way to do it. i want to create that “tunnel” effect in 3D, because what i’m doing is only create 5 planar faces which represent the red tunnel. The thing is that i’ll have troubles when adding some volumes.

So, if somebody can guide me a little bit i’ll really appreciate it. i know that it has to be done with the frutrum, camera, perspective and more functions, but i don’t know how to apply it in order to create this effect.

in case that somebody want to try the code here is: with the mouse you control the position and +, - to zoom it.

//for getting close o far from the scene
float translateZ = 0;
float scaleShape = 1;
boolean translateZpos = false;
boolean translateZneg = false;

void setup() {
  // size(640, 480, P3D);
  fullScreen(P3D);
  rectMode(CENTER);
  noStroke();
}

void draw() {
  background(0);
  zoom();
  float xx = map(mouseX, 0, width, 150, width - 150);
  float yy = map(mouseY, 0, height, 150, height - 150);
  lights();

  //tengo que checar como hacer que vayan al centro!!
  drawShape(0, 0, /*translateZ */0, xx, yy, new PVector(0, 155, 155));

  parallaxBox(xx, yy, 100, 50, translateZ);
  fill(255);
  text("translateZ: "+ translateZ, 20, 20);
}

void parallaxBox(float x, float y, float sizeX, float sizeY, float zoom) {
  float zoomX = sizeX + zoom;
  float zoomY = sizeY + zoom;
 
  float colorDepth = map(translateZ, 0, 200, 0, 100);

  //this rect will represent the distant face
  fill(colorDepth, 0, 0);
  rect(x, y, zoomX * 2, zoomY * 2);

  //left face
  beginShape();
  fill(255, 0, 0, 150);
  vertex(0, 0);
  vertex(0, height);
  fill(colorDepth, 0, 0, 150);
  vertex(x - zoomX, y + zoomY);
  vertex(x - zoomX, y - zoomY);
  endShape();

  //right face
  beginShape();
  fill(255, 0, 0, 150);
  vertex(width, 0);
  vertex(width, height);
  fill(colorDepth, 0, 0, 150);
  vertex(x + zoomX, y + zoomY);
  vertex(x + zoomX, y - zoomY);
  endShape();


  //upper side
  fill(170, 0, 0, 150);
  beginShape();
  fill(255, 0, 0, 150);
  vertex(0, 0);
  vertex(width, 0);
  fill(colorDepth, 0, 0, 150);
  vertex(x + zoomX, y - zoomY);
  vertex(x - zoomX, y - zoomY);
  endShape();


  //down side
  beginShape();
  fill(255, 0, 0, 150);
  vertex(0, height);
  vertex(width, height);
  fill(colorDepth, 0, 0, 150);
  vertex(x + zoomX, y + zoomY);
  vertex(x - zoomX, y + zoomY);
  endShape();
  //  popMatrix();
}

void drawShape(float xPos, float yPos, float zPos, float xx, float yy, PVector colorShape) {

  float colorBox = map(translateZ, 0, 200, 0, 100);
  fill(colorShape.x + colorBox, colorShape.y + colorBox, colorShape.z + colorBox);


  float z = map(scaleShape, -0.3, 2, 1000, 0);
  float x = map(mouseX, 0, width, width - z, z);
  float y = map(mouseY, 0, height, height - 0.5 * z, 0.5 * z); 
  pushMatrix();

  translate(x + xPos + zPos * 1, y + yPos + zPos * 1, 300);
  scale(1+scaleShape);

  //float escalaZ = map(zPos, -500, 300, -0.5, 3);
  // scale(1 + escalaZ);


  float rotationX = map(x, width - z, z, 0.1 * PI, -0.1 * PI);
  float rotationY = map(y, height - 0.5 * z, 0.5 * z, - 0.1 * PI, 0.1 * PI);
  rotateY(rotationX);
  rotateX(rotationY);

  box(100);
  popMatrix();

  /*
  stroke(255);
   strokeWeight(5);
   line(xx, yy, x, y);
   noStroke();*/
}


void zoom() {
  if (translateZpos) {
    translateZ += 1;
    scaleShape += 0.01;
    if (translateZ > 200) {
      translateZ = 200;
    }
    if (scaleShape > 2) {
      scaleShape = 2;
    }
  }
  if (translateZneg) {
    translateZ -= 1;
    scaleShape -= 0.01;
    if (translateZ < 30) {
      translateZ = 30;
    }
    if (scaleShape < -0.3) {
      scaleShape = -0.3;
    }
  }
}

void keyPressed() {
  if (key == '+') {
    translateZpos = true;
  }
  if (key == '-') {
    translateZneg = true;
  }
}

void keyReleased() {
  if (key == '+') {
    translateZpos = false;
  }
  if (key == '-') {
    translateZneg = false;
  }
}

#2

You might be interested in the Camera3D library for Processing.

There was also the Cardboard library for Processing, which is now bundled with Android mode.


#3

Manny thanks! i found other resources in the OF forum as well. but this helps too : )