4. Dibujo en 3D

Vamos a ver ahora cómo podemos dibujar una caja en 3D con Processing. Los pasos que debemos dar son:

1º Indicar el escenario, estableciendo las dimensiones del lienzo con la instrucción size().

2º Establecer color de fondo, un color para la línea y un color de relleno para la caja (exactamente igual que hacíamos con las formas básicas en 2D):

1 void setup(){

2 background(255);

3 size(200,200,P3D);

4 stroke(0);

5 fill(255,150,100);

6 }

3º Establecer el punto central de la caja. Este punto se encuentra, inicialmente, en las coordenadas (0,0,0), esquina superior izquierda del lienzo. Para situarlo en otro sitio, utilizamos la instrucción translate(); que traslada el origen de coordenadas al punto que le indiquemos:

4º Si ahora dibujásemos una caja, no la veríamos en perspectiva, sino que solamente veríamos la cara superior; nos parecería estar viendo un cuadrado o un rectángulo. Antes de dibujarla vamos a imponer pues una rotación, para tener una vista en perspectiva. Las rotaciones pueden establecerse en uno, dos o los tres ejes:

1 void setup(){

2 background(255);

3 size(200,200,P3D);

4 stroke(0);

5 fill(255,150,100);

6 translate(100,100,-50);

7 rotateX(0.8); //ángulo de rotación en el eje X expresado en radianes

8 rotateY(0.8); //ángulo de rotación en el eje Y expresado en radianes

9 }

5º Falta ahora dibujar la caja con la instrucción box(x,y,z); que recibe, normalmente, tres parámetros, que indican la anchura (eje X), altura (eje Y) y profundidad (eje Z) de la caja.

Una vez creado el programa de esta forma, comprobarás que la figura en 3D aparece "vibrando". Si introducimos todas las sentencias que tienen que ver con el dibujo del cubo dentro de una función draw (que veremos en el siguiente punto, cuando hablemos de programas interactivos), esto dejará de pasar; ¡pruébalo!

1 void setup(){

2 background(255);

3 size(200,200,P3D);}

4

5 void draw(){

6 stroke(0);

7 fill(255,150,100);

8 translate(100,100,-50);

9 rotateX(0.8); //ángulo de rotación en el eje X expresado en radianes

10 rotateY(0.8); //ángulo de rotación en el eje Y expresado en radianes

11 box(100);

12 }

TAREA

Práctica 5. Busca en Ayuda/Referencia (dentro de la barra de menús del IDE de Processing) cómo se puede dibujar una esfera en 3D y realiza un programa para dibujar una de 100 px de diámetro, dentro de un lienzo de 200x200.