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

Imagine que ha pintado un cuadrado de 20 píxeles de lado cuyo vértice superior izquierdo estuviera situado en el punto (0, 0) y quisiera desplazarlo 30 píxeles hacia la derecha y hacia abajo. Lo primero que se le ocurriría sería sumar 30 a las coordenadas x, y de dicha esquina y volver a pintarlo con la sentencia:

Pero hay otra forma más interesante de hacerlo, que es moviendo los ejes de coordenadas (en vez del cuadrado) con el siguiente comando:

Dicho esto, las siguientes sentencias obtendrían el mismo resultado, tal como se muestra gráficamente a continuación:

Pero ¿qué ventaja tiene esta forma de situar un objeto? A priori parece mucho más sencilla e intuitiva la primera. Aunque eso sea así en dibujos sencillos, en gráficos más complejos que quisiera posicionar o mover como un bloque resultaría muy engorroso. Para ejemplificar este hecho va a crear una animación en la que moverá el emoticono del capítulo anterior en sentido horizontal, haciéndolo rebotar sobre las paredes de la ventana.

¿Cómo sería el código del nuevo programa si no utilizara la transformación de la traslación? Échele un vistazo.

Se parte del código del emoticono del capítulo anterior. En la parte inicial del programa se ha añadido la variable xTranslate, con la que conseguirá obtener la sensación de movimiento. Esta almacenará la coordenada utilizada para situar horizontalmente el emoticono y el texto que le acompaña. Su incremento provocará un movimiento hacia la derecha mientras que su decremento lo hará hacia la izquierda. También se ha agregado la variable incremento, que representa el número de píxeles que se moverán estos elementos en cada iteración del bucle draw(), o lo que es lo mismo, la velocidad de desplazamiento.

El bloque setup() es el mismo, salvo que ahora la función background() se pasa al bloque draw(), ya que la imagen no es estática, sino que debe dar sensación de movimiento.

En el bloque draw() se han tenido que retocar todas las líneas de código en las que se dibujaban gráficos o texto, para incluir la variable xTranslate que establece la coordenada x en la que deben situarse.

La última parte del código se utiliza únicamente para hacer rebotar el emoticono y el texto en las paredes de la ventana.

La conclusión que se extrae del programa anterior es que mover elementos gráficos en bloque resulta engorroso y, por lo tanto, propenso a errores. Imagine si el número de elementos fuera mucho mayor y, además, tuviera que moverlos en ambas coordenadas. El código resultante podría llegar a ser ilegible.

El problema descrito se resolvería utilizando una transformación de traslación. Vea cómo quedaría ahora el código.

En esta nueva versión del código no modifica ninguna sentencia en las que se dibujan elementos gráficos o texto. Únicamente se ha añadido la función translate() para ir desplazando el eje X de coordenadas a la nueva posición donde deberá pintarlos.

El cambio lo ha hecho en pocos segundos y el resultado es un código limpio. Recuerde, la clave está en que no cambia la posición de las figuras, sino la del sistema de coordenadas que utiliza para dibujarlas.