GRÁFICOS
POR
COMPUTADORA
3D CON PROCESSING
3D CON PROCESSING
• Processing dispone de dos modos de visualización 3D: P3D y OPENGL
• P3D está basado en software, OPENGL se implementa mediante OpenGL (hardware). Con algunas
excepciones, los dos modos soportan el mismo conjunto de primitivas y funciones.
• Las primitivas y funciones utilizadas en 2D pueden utilizarse en 3D (puede haber alguna excepción)
• Algunas de las primitivas, como líneas (line), puntos (point), curvas y shapes (primitiva vertex), permiten
definir 3 coordenadas: x, y, z
• El resto de las primitivas 2D también pueden utilizarse (con una z=0 implícita)
• Las funciones de trazo, relleno, texto e imágenes (texturas) también pueden utilizarse en 3D
3D CON PROCESSING
• Transformaciones geométricas 3D
3D CON PROCESSING
Transformaciones geométricas 3D
• Traslación à translate(tx, ty, tz)
• Escalado à scale(sx, sy, sz)
• Rotación respecto a un eje à rotateX(),
rotateY(), rotateZ()
3D CON PROCESSING
• Por defecto, se realiza una proyección perspectiva simple
• El (0,0,0) se encuentra ubicado en la esquina superior izquierda
• -z para alejar
3D CON PROCESSING
// Elipse rotando alrededor
// del eje y
float ang = 0.0;
void setup()
{
size(400, 400, P3D);
stroke(255, 0, 0);
noFill();
}
void draw()
{
background(0);
// Dibujaremos centrado
// en el (0,0,0)
translate(width/2, height/2);
rotateY(ang += 0.1);
ellipse(0, 0, 300, 200);
}
3D CON PROCESSING
box(ancho, alto, profundo)
• Dibuja un ortoedro (caja) centrada en el (0,0,0) de ancho (x), alto (y) y profundo (z) como argumentos
sphere(radio)
• Dibuja un esfera centrada en el (0,0,0) de radio suministrado como argumento
• El nivel de detalle en el que la esfera ser‡ generada se puede ajustar con la función sphereDetail(n),
donde n implica que los vértices serán generados cada 360o/n (por defecto, n = 30)
3D CON PROCESSING
// Cubo rotando alrededor
// de los tres ejes
// Versión alámbrica
void setup()
{
size(400, 400, P3D);
stroke(255, 0, 0);
noFill();
}
void draw()
{
background(0);
// Dibujaremos centrado
// en el (0,0,0)
translate(width/2, height/2);
rotateX(frameCount*PI/60.0);
rotateY(frameCount*PI/120.0);
rotateZ(frameCount*PI/180.0);
box(200, 200, 200);
}
3D CON PROCESSING
// Cubo rotando alrededor
// de los tres ejes
// Versión sólida
void setup()
{
size(400, 400, P3D);
fill(255, 0, 0);
}
void draw()
{
background(0);
// Dibujaremos centrado
// en el (0,0,0)
translate(width/2, height/2);
rotateX(frameCount*PI/60.0);
rotateY(frameCount*PI/120.0);
rotateZ(frameCount*PI/180.0);
box(200, 200, 200);
}
3D CON PROCESSING
// Cubo rotando alrededor
// de los tres ejes
// Versión con iluminación básica
void setup()
{
size(400, 400, P3D);
fill(255, 0, 0);
noStroke();
}
void draw()
{
background(0);
// Iluminación básica
lights();
// Dibujaremos centrado
// en el (0,0,0)
translate(width/2, height/2);
rotateX(frameCount*PI/60.0);
rotateY(frameCount*PI/120.0);
rotateZ(frameCount*PI/180.0);
box(200, 200, 200);
}
3D CON PROCESSING
// Cubo interactivo void mousePressed()
float rotX = 0.0, rotY = 0.0; {
int lastX, lastY; lastX = mouseX;
float distX = 0.0, distY = 0.0; lastY = mouseY;
void setup(){ }
size(400, 400, P3D); void mouseDragged()
noStroke(); {
fill(255, 0, 0); distX = radians(mouseX - lastX);
} distY = radians(lastY - mouseY);
void draw(){ }
background(0); void mouseReleased()
lights(); {
translate(width/2, height/2); rotX += distY;
rotateX(rotX + distY); rotY += distX;
rotateY(rotY + distX); distX = distY = 0.0;
box(200, 200, 200); }
}
PRÁCTICA 1.
• Modificar el programa anterior para permitir también modificar el factor de zoom, mediante el
acercamiento o alejamiento del cubo
• Para ello, habrá que añadir a la traslación un desplazamiento en z
• Inicialmente este desplazamiento será 0, y deberá variar de 0 a -500 con incrementos de 10
• Para ello se puede capturar el evento de teclado keyPressed() para detectar la pulsación de la tecla UP y
DOWN
3D CON PROCESSING
// Lo hacemos con OpenGL (hardware) // Proporcionamos los vértices
// Necesitamos hacer el import // 3D de cada cara del cubo.
// Los dos valores finales
import [Link].*;
// son las coordenadas de la // -X "left" face
float rotX = 0.0, rotY = 0.0; // textura que corresponde vertex(-1, -1, -1, 0, 0);
int lastX, lastY; // al vértice en cuestión vertex(-1, -1, 1, 1, 0);
float distX = 0.0, distY = 0.0; // +Z "front" face vertex(-1, 1, 1, 1, 1);
// Textura vertex(-1, -1, 1, 0, 0); vertex(-1, 1, -1, 0, 1);
PImage foto; vertex( 1, -1, 1, 1, 0); endShape();
void setup(){ vertex( 1, 1, 1, 1, 1); }
vertex(-1, 1, 1, 0, 1); void mousePressed()
size(400, 400, OPENGL);
// -Z "back" face {
noStroke(); vertex( 1, -1, -1, 0, 0);
foto = loadImage("[Link]"); lastX = mouseX;
vertex(-1, -1, -1, 1, 0); lastY = mouseY;
// Vamos a referirnos a las coordenadas de la vertex(-1, 1, -1, 1, 1);
}
// textura de (0,0) a (1,1) vertex( 1, 1, -1, 0, 1);
// +Y "bottom" face void mouseDragged()
textureMode(NORMALIZED);
vertex(-1, 1, 1, 0, 0); {
} distX = radians(mouseX - lastX);
vertex( 1, 1, 1, 1, 0);
void draw(){ distY = radians(lastY - mouseY);
vertex( 1, 1, -1, 1, 1);
background(0); vertex(-1, 1, -1, 0, 1); }
translate(width/2, height/2); // -Y "top" face void mouseReleased()
rotateX(rotX + distY); vertex(-1, -1, -1, 0, 0); {
rotateY(rotY + distX); vertex( 1, -1, -1, 1, 0); rotX += distY;
// Hacemos el cubo de 200 x 200 x 200 vertex( 1, -1, 1, 1, 1); rotY += distX;
vertex(-1, -1, 1, 0, 1); distX = distY = 0.0;
// Lo dibujamos de -1 a 1
// +X "right" face }
scale(100, 100, 100);
vertex( 1, -1, 1, 0, 0);
beginShape(QUADS);
vertex( 1, -1, -1, 1, 0);
texture(foto); vertex( 1, 1, -1, 1, 1);
vertex( 1, 1, 1, 0, 1);
3D CON PROCESSING