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

Para terminar de entender la utilidad de las matrices de transformación, va a realizar un ejercicio en el que dibujará un reloj analógico totalmente operativo (marcará en todo momento la hora actual). Usará una traslación para situar todos los componentes del reloj en el centro de la ventana y una rotación adicional para situar cada aguja en la posición exacta que deba tener para marcar la hora, minuto y segundo en cada instante.

El aspecto que tendrá dicho reloj será el siguiente.

¿Se anima a realizar el código? Es muy sencillo. Tiene ya todos los conocimientos para ello. Únicamente le faltaría saber las funciones que Processing proporciona para obtener la hora actual, que son las siguientes:

* hour(). Devuelve la hora actual con un valor comprendido entre 0 y 24.

* minute(). Devuelve el minuto actual con un valor comprendido entre 0 y 59.

* second(). Devuelve el segundo actual con un valor comprendido entre 0 y 59.

Una posible implementación del programa sería la siguiente:

Como es habitual, empezará definiendo el tamaño de la ventana en el bloque de setup().

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.