Tomás Domínguez Mínguez - Processing

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 xTranslateque 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.

Con Processing, además de traslaciones puede realizar rotaciones. El concepto que se utiliza es el mismo en ambos casos, solo que ahora lo que hace es girar los ejes de coordenadas con el comando:

El ángulo no viene expresado en grados sino en radianes, por lo que conviene recordar lo que estudió de trigonometría en su infancia. Una circunferencia tiene 360º, que equivale a 2π radianes (siendo π el número pi, cuyo valor aproximado es 3.14). De forma similar, media circunferencia (180º) serían π radianes y un cuarto de circunferencia (90º) π /2 radianes. Es decir, para pasar de grados (que seguro que es con lo que se encuentra más cómodo) a radianes, deberá utilizar la fórmula:

radianes = grados* π/180

Puede verlo de forma gráfica a continuación:

Para facilitarnos las cosas, Processing proporciona una función que ya realiza este cálculo:

El argumento de entrada sería el ángulo en grados y el resultado de la función el ángulo en radianes.

NOTA.La función inversa sería degrees(), que tomaría como argumento un ángulo en radianes y lo convertiría a grados.

NOTA.Processing proporciona las constantes del sistema PI, TWO_PI, QUARTER_PI y HALF_PI, cuyo nombre es autoexplicativo.

Pero vea gráficamente cómo trabaja la función rotate(). Para ello, imagine que desea dibujar la siguiente figura, que representa un cuadrado de 20 píxeles de lado girado 45º que, como ya sabe, son π/4 radianes:

Se podría tratar de dibujar cuatro rectas, calculando sus coordenadas x, y para que todas midieran exactamente 20 píxeles. O dibujar un simple cuadrado en el origen de coordenadas y luego trasladarlo del punto (0, 0) al punto (30, 30) y luego girarlo π/4 radianes, tal como se muestra en la siguiente figura.

En Processing, el código necesario para dibujar dicha figura sería:

La última función de transformación que estudiará será la de escalado, que cambia el tamaño de la cuadrícula. El comando que proporciona Processing para realizarlo es:

Naturalmente, ambos argumentos no tienen por qué ser iguales, ni tampoco números enteros.

Vea un ejemplo en el que dibujará un cuadrado de 40 píxeles de lado, cuya esquina superior izquierda se encuentre en el punto (10, 10), al que ampliará al doble de su tamaño. El código sería:

En la imagen inferior puede ver el resultado.