Problems working with global and local transformations

TonyRamirez

Having difficulty working out the correct way to do transformations with Processing's co-ordinate system. Something very simple like the following seems beyond me.

1) In a 1000x 1000 window, animate a 100x100 square (rectMode(CENTER)) around the center point of the canvas at a distance of 300 from the center of the canvas, but do it so that the square is always level i.e. the top of the square is always parallel to the top of the screen. This way the square is counter rotating around itself independently of the rotation around the canvas center (global and local rotation).

2) It's easy to do the above animation so that the square rotates solely around the canvas center (and does not counter-rotate around itself). You just translate(500,500) to get the zero point to canvas center, specify the amount of rotation and then do rect(300, 0, 100,100).

If I was able to specify both 'global' and 'local' coordinates then I could design the first animation easily but don't know how to implement otherwise.

jeremydouglass

@TonyRamirez -- No need for "local" and "global". To counter-rotate, just rotate in the opposite direction, as the name implies.

1. rotate
2. translate
3. -rotate

For example:

float r;
void setup(){
  size(400,400);
  rectMode(CENTER);
}
void draw(){
  background(0);
  r = r + 0.015;

  translate(width/2,height/2);
  rotate(r);
  translate(100,0);
  rotate(-r);
  rect(0,0,50,50);
}

TonyRamirez

Thanks JD, thought I was going nuts because I'd done this successfully before! I confused myself by translating the square via changing it's coordinates rather than translating the axes and somehow that cancelled out all the transforms. Cheers.

jeremydouglass

translating the square via changing it's coordinates rather than translating the axes and somehow that cancelled out all the transforms

It didn't cancel out the transforms -- by placing the rect off 0,0 you put it on the edge of a pivot point, then swung the whole shape off the screen, like this:

For more on why this doesn't work and produces surprising results, read this tutorial:

• https://processing.org/tutorials/transform2d/

TonyRamirez

Many thanks