Multiple Translations

The nature of translate() is that it's accumulaive. That is, each time you add in a translation function, it adds to (or subtracts from) the previous offset.

void setup() {
  size(120, 120);
}
void draw() {
  translate(mouseX, mouseY);
  fill(#00ff00);
  rect(0, 0, 30, 30);
  translate(35, 10);
  fill(#ff0000);
  rect(0, 0, 15, 15);
}

So in this case, the first rect is translated to the x/y position of the mouse, but the second rect is translated to 35 + mouseX and 10 + mouseY.

There may be times when you don't want translate() to accumulate. For this, Processing adds a pair of functions that allow you to do a separate translate() function on any given object you draw: pushMatrix() and popMatrix(). (Think matrix like a grid, not the movie)

void setup() {
  size(120, 120);
}
void draw() {
  pushMatix();
  translate(mouseX, mouseY);
  rect(0, 0, 30, 30);
  popMatrix();
  translate(35, 10);
  rect(0, 0, 15, 15);
}

Which will move the first, bigger square with the mouse, but only move the second, smaller square over 35 and down 10

Rotations

rotate() is a kind of translation, but instead of moving the graph paper's x/y coordinates, it rotates the graph paper around the 0,0 upper left corner of the Display Window. Of course, like the arc() function, it uses the radians method to describe the angle of rotation. (Arrgh! Who thinks in radians?).

Anyway, here's a simple example of using rotate():

void setup() {
  size(120, 120);
}

void draw() {
  rotate(mouseX / 100.0); // Returns values from 0.0 to 1.20
  rect(40, 30, 160, 20);
}

Remember, you can always use radians(someValueInDegrees) to convert from a degree to a radian value.

Center Rotation

To get an object to spin around its center you nee to center the object over the upper left of the Document Window, or 0,0. This next example will do just that:

void setup() {
  size(120, 120);
}

void draw() {
  rotate(mouseX / 100.0);
  rect(-80, -10, 160, 20);
}

The value inside rotate() is between 0.0 and 1.20, and is treated as a radian value.

A Better Way Than Our Textbook

Knowing what we know about putting things in variables, and using functions like map(), let's make the example code even better!

float rectWidth = 160;
float rectHeight = 20;

void setup() {
  size(120, 120);
}
void draw() {
  float myRadians = radians(map(mouseX, 0, width, 0, 180));
  rotate(myRadians);
  rect(-rectWidth/2, -rectHeight/2, rectWidth, rectHeight);
}

Notice that you can put a function inside a function!

radians(map(mouseX, 0, width, 0, 180));

Translation Then Rotation

To spin an object around its center point at a place in the Display Window way from the origin, first use translate() to move the location where you'd like the shape (like follow the mouseX and mouseY) then call rotate() before you finally draw the shape:

int myWidth = 30;
int myHeight = 30;
float myAngle = 0;

void setup() {
  size(120, 120);
}

void draw() {
  translate(mouseX, mouseY);
  rotate(myAngle);
  rect(-myWidth/2, -myHeight/2, myWidth, myHeight);
  myAngle += 0.1;
}

Even though we're using radians as the value of myAngle, it doesn't really matter because the thing just keeps rotating. (Beware, if you let this code run for several days, it will crash when myAngle gets to be bigger 2,147,483,647 ☺ ).

Rotation Then Translation

The following code is the same as the previous code, except the sequence of translate() and rotate() is reversed. So the shape is rotated around the upper left of the display window first, then it has it x/y location translated.

int myWidth = 30;
int myHeight = 30;
float myAngle = 0;

void setup() {
  size(120, 120);
}

void draw() {
  rotate(myAngle);
  translate(mouseX, mouseY);
  rect(-myWidth/2, -myHeight/2, myWidth, myHeight);
  myAngle += 0.1;
}

In both examples, the square is set to the center of the Display Window. In the first example we translate the position of the square, then we rotate it. In the second we rotate the square then relocate it.

Makes a big difference, doesn't it?

An Articulating Arm

In this example, we'll put together a sequence of translate() and rotate() functions to creat a linked arm that bends back and forth. Since translate() is accumulative by default, each use of it moves the position

float myAngle = 0.0;
float angleDirection = 1;
float myspeed = 0.005;

void setup() {
  size(120, 120);
}

void draw() {
  background(204);
  translate(20, 25); // Move to start position
  rotate(myAngle);
  strokeWeight(12);
  line(0, 0, 40, 0);
  translate(40, 0); // Move to next joint
  rotate(myAngle * 2.0);
  strokeWeight(6);
  line(0, 0, 30, 0);
  translate(30, 0); // Move to next joint
  rotate(myAngle * 2.5);
  strokeWeight(3);
  line(0, 0, 20, 0);

  myAngle += myspeed * angleDirection;
  if ((myAngle > QUARTER_PI) || (myAngle < 0)) {
    angleDirection *= -1;
  }
}

Improved version

More joints and transparency just for fun...

float myAngle = 0.0;
float angleDirection = 1;
float myspeed = 0.005;

void setup() {
  size(500, 500);
  stroke(0, 128);
}

void draw() {
  float armLength = 300.0;
  background(204);
  for (int i=1; i<6; i++) {
    rotate(myAngle);
    strokeWeight(armLength/3);
    line(0, 0, armLength, 0);
    translate(armLength, 0); // Move to next joint
    armLength = armLength/1.5;
    rotate(myAngle * 2.0);
  }
  myAngle += myspeed * angleDirection;
  if ((myAngle > QUARTER_PI) || (myAngle < 0)) {
    angleDirection *= -1; // Switch Directions
  }
}

This is a video of the output...