Introducción.
Este fin de semana me tomé un rato para jugar con Processing, esta vez con las transformaciones gráficas que hacía tiempo estaba postergando por mis múltiples actividades pereza.
Como en todos los demás lenguajes, en Processing es posible trasladar un objeto sumando valores a sus respectivas coordenadas. Processing además facilita esto con un método mas elegante, en lugar de trasladar las coordenadas del objeto se traslada el orígen del plano y se grafica con referencia a este orígen. Esta técnica no sólo es útil para trasladar sino que también puede utilizarse para rotar y escalar los graficos.
Estas modificaciones alteran la matriz de transformación actual, esto quiere decir que afectarán igualmente a las invocaciones posteriores. Para limitar esto se utilizan las funciones pushMatrix y popMatrix que permiten almacenar y posteriormente recuperar las matrices de transformaaciones originales.
Implementación.
Traslación.
Como mencioné, la técnica consiste en trasladar el orígen del plano a la nueva coordenada.
translate(nuevoX, nuevoY);
Y desde allí generar el grafico con coordenadas respecto al orígen.
rect(-ancho/2, -alto/2, ancho, alto);
Con este ejemplo se obtendrá un rectángulo cuyo centro será (nuevoX, nuevoY).
Rotación.
El ángulo de rotación se indica en radianes (ver radians) y su rango de valores va desde 0 hasta 2*PI.
rotate(angulo);
La rotación realiza el traslado del orígen así que se hace necesario ubicarla en su posición final como se mencionó antes.
Escalamiento.
El índice de escalamiento se indica como un número real (1.5 = 150%) y sus valores van desde 0 hasta infinito.
scale(nivel);
Igual que con la rotación, con el escalamiento se hará necesario ajustar la ubicación del grafico trasladándolo como se mencionó inicialmente.
Demostración.
Demostración de transformaciones con Processing
En este sketch de demostración se pueden utilizar las transformaciones mencionadas mediante las siguientes teclas.
| Flechas del cursor Ubicación del puntero del ratón | Movimiento del carro |
| q | Terminar el sketch (aplicación) |
| r | Reiniciar el sketch |
| s, d | Girar la imagen |
| a, z | Manipular el nivel de acercamiento |
| w | Mostrar el rectángulo de la imagen |
| e | Mostrar el grafico de la imagen |
Enlaces.
- Sketch de demostración de las transformaciones.
http://demo.jorgeivanmeza.com/Processing/DemoTransformations - Código fuente del sketch de demostración.
http://demo.jorgeivanmeza.com/Processing/DemoTransformations/0.1/DemoTransformations.pde - Referencia del API de Processing.
http://processing.org/reference/
No hay artículos relacionados.
