16. Giros y traslaciones

Cuando queremos girar un objeto alrededor de un punto dado, tenemos que usar las siguientes funciones:

• translate(x,y), para establecer el punto alrededor del cual girará el objeto (como ya vimos cuando hablamos de dibujo en 3D, lo que realmente hacemos es desplazar el origen de coordenadas).

• rotate(ángulo); para indicar el ángulo de giro del objeto (en el sentido de las agujas el reloj), en radianes.

En ambas funciones los efectos de la transformación son acumulativos. Por ejemplo, si hay una rotación de π/4 radianes y otra después también de π/4 radianes, los objetos dibujados después se girarán π/2 radianes.

Así, en el siguiente ejemplo,

1 float angulo=0; //establecemos la variable angulo

2 void setup()

3 {

4 size(400,400);

5 }

6 void draw()

7 {

8 background(0);

9 fill(255);

10 noStroke();

11 ellipse(200,200,5,5); //dibuja el puntito del centro de giro

12 angulo = angulo+0.02; //ángulo girado en radianes

13 translate(200,200); //traslada el origen de coordenadas para girar el objeto

14 rotate(angulo); //gira el objeto el ángulo girado

15 rect(10,10,100,100); //dibuja el rectángulo según el nuevo origen de coordenadas

16 }

Obtendríamos el siguiente resultado:

Y, si jugamos con la transparencia del lienzo, podemos obtener el siguiente resultado:

En el uso de translate(x,y), la función pushMatrix() se utilizan para añadir un nuevo sistema de coordenadas y popMatrix() se utiliza para eliminarlo. Ambas deben usarse siempre juntas.

Por otro lado, si queremos resetear todas las transformaciones, haciendo que el origen de coordenadas vuelva a su posición inicial y que la función rotate(x) no se acumule, debemos utilizar la función resetMatrix().

TAREAS

Práctica 21.- Crea un programa en el que dos cuadrados giren en sentidos contrarios a diferente velocidad, siendo uno de ellos transparente para dejar ver al otro. El resultado debe ser similar al siguiente:

NOTA: Para hacer que los dos cuadrados giren de forma distinta, o bien utilizamos dos variables para los dos ángulos de giro, o bien ejecutamos resetMatrix() tras las transformaciones del primer cuadrado.

Práctica 22.- Crea un programa cuyo resultado sea parecido a este:

Práctica 23.- A partir de la imagen "monstruo.jpg", realiza un programa para conseguir que gire uno de sus ojos:

Práctica 24.- Intenta ahora, utilizando la imagen"monstruo2.jpg", que giren los dos ojos al unísono: