El uso de rotate() y translate() para girar y mover respectivamente un elemento, es sencillo, pero requiere que se comprendan varias cosas:
- 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.
- 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; }
Muchísimas gracias!! Me estaba volviendo loca al programar, todo por no saber lo del resetMatrix! Buen artículo 🙂
Gracias Altea.
También puede servirte este artículo:
http://dunadigital.com/processing/2015/07/29/repasando-processing-pushmatrix-popmatrix/
El tándem pushMatrix() / popMatrix() te puede ser muy útil en los casos en los que resetMatrix() no es suficiente.