Tomás Domínguez Mínguez - Processing

Para entender cómo hacerlo, imagine que acerca una hoja de papel hacia usted. Esta se representaría como un plano en dos dimensiones que se iría agrandando según se aproxima, tal como se aprecia en la siguiente figura.

El código Processing que simularía dicho efecto sería el siguiente:

Del bloque de setup()únicamente se comentará que contiene la sentencia que define una ventana de 400 × 400 píxeles, pero ahora especificando un renderizado 3D.

En el bloque draw()se localiza la sentencia translate()que dará la sensación de que la hoja se está acercando a usted, haciendo más grande el rectángulo.

Este efecto hará que el tamaño de la hoja de papel, establecido originalmente en 100 × 200 píxeles, ya no se visualice con dicho tamaño en pantalla, tal como sucedería si trabajara en 2D. Será, por lo tanto, Processing quien decida en cada momento el tamaño adecuado de los objetos, necesario para dar esa sensación de profundidad.

En el caso de la rotación, en vez de usar la sentencia rotate(ángulo), deberá utilizar:

Es decir, un comando específico para definir el ángulo de rotación en cada eje. Para ver el efecto, haga rotar la hoja de papel sobre el eje Z. Es como si la atravesara con un lapicero por su centro y la hiciera girar utilizándolo de eje.

Dicha imagen se generaría con el siguiente código:

Al igual que en el caso anterior, en el bloque de setup()únicamente se destaca el uso de la sentencia size()para declarar un renderizado 3D.

En el bloque draw()llevará la hoja al centro de la pantalla con el comando translate()y luego utilizará rotateZ()para girarla en el eje Z.

La siguiente sentencia dibuja el rectángulo. Observe que su esquina superior izquierda coincide con la de la ventana. Serán las transformaciones de traslación y rotación las que situarán finalmente dicho rectángulo en la posición correspondiente para obtener el efecto deseado.

La última sentencia es la que modifica el ángulo de giro, cuyo valor determinará la velocidad a la que gire la figura.

Pruebe a cambiar rotateZpor rotateXy rotateY. Verá el efecto de movimiento tan diferente que se produce en cada uno de estos casos.

Una vez conocidos los conceptos básicos del renderizado 3D, ya está en disposición de dibujar sus primeras figuras geométricas en tres dimensiones. Para ello, Processing ofrece diferentes funciones, entre las que destacan:

* box(dimensión eje X, dimensión eje Y, dimensión eje Z )

* sphere(radio )

La primera función la utilizaría para dibujar una caja con las dimensiones indicadas. Si se tratara de un cubo se podría simplificar usando box(lado ). La segunda función dibujaría una esfera con el radio indicado.

Vea cómo dibujar un cubo.

Para ello utilizaría este código Processing:

Observe que en el bloque setup()se usa la sentencia noFill()para que las caras del cubo sean transparentes, viéndose únicamente sus aristas.

En el bloque draw()posiciona el cubo en el centro de la ventana, girándolo ligeramente sobre el eje X con el fin de dar mayor sensación 3D.

Finalmente, pintará el cubo con la sentencia.

¿Y si en dicho código sustituyera la sentencia box(150)por sphere(150)? Vea cómo, con tan poco, se puede hacer tanto.

¿Se anima a darle movimiento? Con muy pocas sentencias puede hacerlo girar continuamente sobre el eje Y. Solo tiene que usar la función rotateY()y una variable auxiliar de tipo float que vaya incrementando en el bloque draw(). ¡Ah! No se olvide de situar la sentencia background()en dicho bloque.

Hasta ahora, las figuras que ha dibujado en 3D no tenían rellenas las caras de ningún tipo de textura ni color. Aparecía solo su «armazón», pero, ¿qué pasaría si se cubriera con una capa de color? Haga la prueba con el cubo, sustituyendo en el código anterior la sentencia nofill()por: