Repasando Processing / Transformaciones / translate()

Las transformaciones se definen en geometría como los procedimientos que hacen corresponder a cada punto del plano otro punto del plano de forma biunívoca. Básicamente consisten en tomar un elemento de un sitio y ponerlo en otro. Processing implementa varias funciones que permiten efectuar algunas de estas operaciones.

translate() mueve cada elemento una distancia dada en una dirección también dada. Podemos imaginar esa distancia y esa dirección como un vector, de manera que su longitud indica la distancia y su ángulo indica la dirección. Esta función toma dos parámetros, x e y. El vector que parte de las coordenadas 0,0 y acaba en x, y es el que define la traslación.

Sé que estoy dando una definición bastante técnica de una operación que se puede explicar más fácilmente como trasladar un objeto de una posición a otra. Hay un motivo para que lo haga así, y es que si estás familiarizado con las operaciones de traslación, rotación, escala, etc. en entornos de diseño como Illustrator o Photoshop, posiblemente te resulte poco intuitivo el modo como Processing las efectúa.

Primero, es importante tener en cuenta que cuando hacemos una traslación o un giro, no aplicamos estas operaciones a un objeto, sino a todo el plano donde se encuentran esos objetos, incluidos sus ejes de coordenadas.

Por tanto cuando aplicamos la primera transformación

translate(100, 50);

estamos moviendo el origen de coordenadas a esa posición. Por tanto, un cuadrado que tenga como coordenadas 0,0, después de la transformación se dibujará en 100, 50. En el siguiente dibujo, ese vector se muestra en color amarillo.

translate()

La segunda transformación, representada por el vector cian, es:

translate(100, 0);

Es decir, mover 100 píxeles a la derecha. Pero como esa transformación se suma a la anterior, el resultado es un cuadrado situado a 200 píxeles del borde izquierdo (100 + 100) y a 50 del borde superior (50 + 0). Sin embargo, si observamos el código vemos que las coordenadas del segundo rectángulo son 0, 0. ¿Qué está pasando? Sencillamente que las dos transformaciones anteriores han situado el origen de coordenadas (0, 0), en la posición 200, 50 tomada desde la esquina superior izquierda.

Lo mismo pasa con la tercera transformación, indicada en magenta, que vuelve a mover el plano 100px a la derecha.

Todo esto puede parecer poco intuitivo, y lo es, pero una vez comprendida la lógica detrás de estas operaciones al menos no será un laberinto. Además, como veremos más adelante, es posible resetear las coordenadas después de una transformación para que estas no se sumen.

 

Más sobre color

2030814
Hasta el momento hemos visto varios tipos de datos:

  • int: número entero
  • float: número decimal
  • String: cadena de texto
  • PImage: imagen

Bien, pues también tenemos el tipo de dato (datatype) color.

Puede llamar a confusión porque existe una función con el mismo nombre, que toma como parámetros los valores de cada canal según el modo de color: rojo, verde y azul en modo RGB; y tono, saturación y brillo en modo HSB (ej. color(255, 50, 30)).

Vamos a usarlos en un programa que dibuje formas de diferente color dependiendo de su posición:
Continue reading

Trasladar y girar un elemento

img
El uso de rotate() y translate() para girar y mover respectivamente un elemento, es sencillo, pero requiere que se comprendan varias cosas:

  1. Estas funciones no mueven objetos o elementos, sino todo el espacio de dibujo. rotate() gira alrededor del origen de coordenadas. Si quieres situar un cuadrado girando alrededor de su centro en medio de la ventana, necesitas hacer coincidir el centro del cuadrado con el origen de coordenadas y luego trasladarlo todo hacia el centro.
  2. Si quieres aplicar difirentes movimientos a diferentes elementos de una misma aplicación, tienes que resetear el cambio anterior mediante resetMatrix().
//usaremos esta variable para hacer girar los cuadrados
float i = 0;
//y esta para el tono (hue) del color
float h = 0;
 
void setup(){
 size(300, 300);
 //cambiamos el modo para el rectángulo
 rectMode(CENTER);
 //y el de color
 colorMode(HSB, 100);
 //creamos un valor aleatorio para el tono
 h = random(100);
 //definimos el color de fondo
 background(h, 50, 50);
} 
 
void draw(){
  //tiramos un rectángulo del mismo color y tamaño del fondo a cada ciclo
  fill(h, 50, 50);
  rect(width/2, height/2, width, height);
  //borde y relleno del cuadrado
  stroke(#ffffff);
  fill(h*0.5, 50, 50);
  //trasladamos el punto 0,0 al centro de la ventana
  translate(width/2, height/2);
  //asignamos el valor de giro
  rotate(i);
  //y dibujamos el cuadrado
  rect(0, 0, 150, 150);
  //resereamos traslación y giro
  resetMatrix();
  //y repetimos con otro rectángulo
  stroke(0, 50);
  noFill();
  translate(width/2, height/2);
  rotate(-i/2);
  rect(0, 0, 156, 156);
  //esto hace que el valor del ángulo aumente a cada ciclo
  i = i + 0.01;
}