Tomás Domínguez Mínguez - Processing

En el bloque draw(), lo primero que hará es llamar a la función background()para dar la sensación de movimiento de las agujas. Esta función borra todo lo que ha pintado anteriormente en cada ciclo, dejando la ventana en blanco. Si no lo hiciera así, al moverse la aguja del segundero a su nueva posición se pintaría en la nueva, pero también en la anterior, por lo que, en un minuto, el dibujo tendría 60 líneas. Lo mismo sucedería con el resto de agujas.

A continuación, realizará la primera operación de transformación, trasladando los ejes de coordenadas al centro de la pantalla, ya que tanto los círculos con los que se pinta el marco del reloj, como las agujas, toman de referencia dicho punto.

En este caso, no es necesario utilizar las funciones pushMatrix()y popMatrix()porque todo lo que pinte lo hará utilizando esa referencia.

Realizados estos preparativos previos, empezará a dibujar el marco del reloj. Para pintar un marco de color azul, primero dibujará un círculo grande de dicho color y luego otro interior más pequeño relleno del color de la esfera. Por lo tanto, establecerá inicialmente el color del marco tanto para el trazado de la circunferencia como para el relleno del círculo con las sentencias stroke()y fill(), respectivamente. Asegúrese de pintar primero el círculo mayor, ya que el siguiente que pinte tapará al anterior. Una vez tenga el círculo exterior relleno en azul pintará el fondo del interior en blanco, para lo que de nuevo se utilizará la función fill(). Para el color de trazo sigue sirviendo el azul, por lo que no hace falta modificarlo. Como este último círculo es más pequeño y de color blanco, tapará al primero dando la sensación de tener un reloj con la esfera blanca y el marco azul.

Ahora dibujará las manecillas, empezando por la del segundero. Para ello, lo primero que debe hacer es calcular el ángulo en el que se encuentra dicha manecilla en función del segundo que deba marcar. Eso lo hará con un sencillo cálculo matemático a través de la siguiente sentencia:

La aguja del segundero se dibujará como una línea horizontal (de 95 píxeles de largo) girada en dicho ángulo. Para ello, realizará la segunda transformación, que consistirá en rotar los ejes de coordenadas con el fin de situar la línea en la posición adecuada. Como el ángulo que ha calculado está en grados, lo pasamos antes a radianes con la función radians()para poder invocar correctamente la función rotate(). Es importante que dicha transformación se realice dentro del bloque formado por las funciones pushMatrix()y popMatrix()ya que, una vez dibujado el segundero, deberá dejarlo todo como estaba para seguir pintando las otras dos agujas (cada una de ellas en su correspondiente posición).

Para entender mejor las transformaciones realizadas, el siguiente gráfico muestra marcado con (1) una línea horizontal que representaría el segundero en su posición original. Marcado con (2) esa misma línea después de haber realizado la traslación del sistema de coordenadas al centro de la ventana con la función translate(). Marcado con (3) aparece cómo se dibujaría la misma línea si, además, a dicho sistema de coordenadas se le hubiera realizado una rotación con la función rotate(). Finalmente, marcado con (4) estaría la posición en la que realmente deseamos pintar el segundero. Como en los relojes los minutos empiezan a contar desde arriba y en Processing los grados empiezan a contar desde la derecha, la coordenada «y» del punto final tiene signo negativo, tal como se aprecia en la figura.

Para dibujar las manecillas que marcan los minutos y las horas usaría el mismo procedimiento, calculando el ángulo de cada una de ellas y pintándolas con una línea del tamaño y grosor correspondiente. La rotación de los ejes de coordenadas, necesaria para situar cada aguja en su posición correspondiente, la realizará siempre entre las funciones pushMatrix()y popMatrix()para no afectar la posición de las otras agujas.

Una vez conocidas las bases del dibujo en dos dimensiones, ya está preparado para dar el salto a la tercera dimensión. La diferencia entre trabajar en 2D frente a 3D es que ahora usará un sistema de coordenadas de 3 ejes, ya que a los conocidos ejes X e Y, se le añade el eje Z, que se situará perpendicularmente a ambos. Gráficamente, se podría representar de la siguiente forma:

Con tres ejes, ahora los puntos se declaran con tres coordenadas, una por cada eje. Así, por ejemplo, el punto de color azul del gráfico anterior tendría las coordenadas (50, 0, -20). Fíjese en que en el eje Z las coordenadas positivas se sitúan desde el origen hacia usted.

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: