Читать книгу Processing - Tomás Domínguez Mínguez - Страница 32

Los píxeles no salen de la pantalla para dar esa sensación tridimensional que proporciona el eje Z, por lo que Processing tendrá que realizar un renderizado 3D que lo simule. Pero ¿cómo le dice a Processing que quiere trabajar en tres dimensiones? Hasta ahora, como no le había indicado nada, utilizaba por defecto un renderizado 2D para dibujar formas, configurar colores, mostrar texto, etc. Si quiere que dibuje en tres dimensiones, deberá solicitárselo explícitamente al establecer el tamaño de la ventana con un tercer argumento (P3D).

El efecto secundario de dicho renderizado es que, a partir de ahora, no se podrá controlar las dimensiones ni la posición exacta de las imágenes que dibuje, ya que se mostrarán creando una ilusión en tres dimensiones.

¿Cómo dibujaría un rectángulo que fuera moviéndose por el eje Z acercándose hacia usted? En dos dimensiones usaba el comando rect(x, y, ancho, alto) por lo que, de forma intuitiva, pensaría que ahora tendría que utilizar el comando rect(x, y, z, ancho, alto). Esto no es así, ya que lo que deberá hacer es combinar el comando empleado en dos dimensiones con el siguiente:

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 rotateZ por rotateX y rotateY. Verá el efecto de movimiento tan diferente que se produce en cada uno de estos casos.