# Parallax 3D effect
**URL:** https://discourse.processing.org/t/parallax-3d-effect/7235
**Category:** Project Guidance
**Created:** [January 5, 2019, 10:38pm UTC](https://discourse.processing.org/t/parallax-3d-effect/7235 "2019-01-05T22:38:26Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@bryan](https://discourse.processing.org/u/bryan)
#### Post date: [January 5, 2019, 10:38pm UTC](https://discourse.processing.org/t/parallax-3d-effect/7235/1 "2019-01-05T22:38:26Z")
Hi everyone, i want to recreate the parallax effect as shown in [https://www.youtube.com/watch?v=Jd3-eiid-Uw](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.
```auto
//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;
}
}
```
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [January 22, 2019, 1:41am UTC](https://discourse.processing.org/t/parallax-3d-effect/7235/2 "2019-01-22T01:41:10Z")
> [@bryan](#):
>
> i want to recreate the parallax effect
You might be interested in the Camera3D library for Processing.
> **[Camera3D: Processing Library](https://ixora.io/projects/camera-3D/)**
>
> Processing - Camera3D library
> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/14103/stereoscopic-processing-library-camera3d-anaglyphs-split-frame-nvidia3d-oculus-rift-and-more)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.
There was also the Cardboard library for Processing, which is now bundled with Android mode.
> **[GitHub - codeanticode/processing-cardboard: Cardboard library for the Android...](https://github.com/codeanticode/processing-cardboard)**
>
> Cardboard library for the Android mode in Processing - GitHub - codeanticode/processing-cardboard: Cardboard library for the Android mode in Processing
---
### Author:  [@bryan](https://discourse.processing.org/u/bryan)
#### Post date: [January 22, 2019, 5:56am UTC](https://discourse.processing.org/t/parallax-3d-effect/7235/3 "2019-01-22T05:56:20Z")
Manny thanks! i found other resources in the OF forum as well. but this helps too : )