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;
}
}