Understanding the concept of a matrix stack

hellocatfood

The reference page for pushMatrix() states

that Understanding pushMatrix() and popMatrix() requires understanding the concept of a matrix stack.

Where can I learn more about matrix stacks?

Chrisir

one of the tutorials

http://www.processing.org/tutorials/transform2d/

see section The Transformation Matrix - or read the whole thing

;-)

asimes

In my opinion matrices as applied to computer graphics and stacks can be thought of as two completely separate concepts.

By default, units are 1 pixel, the x-axis is horizontal, the y-axis is vertical, and the origin is at the top left of the window. There are matrix transformations to change this:

• scale() changes the coordinate system's default unit
• rotate() rotates the coordinate system around the origin
• translate() moves the origin

Any single matrix can have these transformations applied to it. It is worth noting that these transformations do not change the actual values of objects being drawn in Processing, they change where objects are drawn.

A stack is a data structure that is conceptually similar to an ArrayList but only supports push(), pop(), and getting information about the last pushed element. Here is an example of how an integer stack works:

• Stack, named iStack, initially has 0 elements
• iStack.push(5)
• Stack now has 1 element with value 5
• iStack.push(3)
• Stack now has 2 elements and the top element has value 3 (5 is "hidden" behind 3 and cannot be used)
• iStack.push(2)
• Stack now has 3 elements and the top element has value 2 (both 5 and 3 are "hidden" behind 2 and cannot be used)
• iStack.pop()
• Stack now has 2 elements and the top element has value 3 (2 is gone and 5 is still "hidden" behind 3)

A stack of matrices then is a way of having more than one matrix where only the top matrix affects how objects are drawn. Another example with matrices:

• Another stack initially has 0 elements. However, the default settings for Processing's object drawing mentioned above are set.
• pushMatrix()
• A copy of the current state of the coordinate system (default state) is made and pushed to the stack, the stack has that copy at its top
• translate(100, 0)
• Objects are now drawn 100 units further to the right than they normally would be
• pushMatrix()
• A copy of the current state is made, so far it has only been translated
• rotate(HALF_PI)
• A 90 degree rotation occurs making the x-axis rotate into the y-axis and the y-axis rotate into the x-axis
• pushMatrix()
• A copy of the current state is made, so far it has been translated then rotated
• translate(200, 0)
• If an object were to be drawn right now it would be 100 units further right of the origin, it would be sideways, and 200 units further below the origin
• popMatrix()
• The settings for translate(200, 0) are popped from the stack and we return to the state where just translate(100, 0) and rotate(HALF_PI) happened
• popMatrix()
• The settings for rotate(HALF_PI) are popped from the stack and we return to the state where just translate(100, 0) happened
• popMatrix()
• Back to default settings

Here is an example, try uncommenting the rect()s:

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

void draw() {
  background(0);
  fill(255, 192);

  pushMatrix();
  translate(100, 0);

  pushMatrix();
  rotate(HALF_PI);

  pushMatrix();
  translate(200, 0);

  // After translate(100, 0), rotate(HALF_PI), and translate(200, 0)
  //rect(0, 0, 150, 50);

  popMatrix();

  // After translate(100, 0) and rotate(HALF_PI)
  //rect(0, 0, 150, 50);

  popMatrix();

  // After translate(100, 0)
  //rect(0, 0, 150, 50);

  popMatrix();

  // Back to default settings
  //rect(0, 0, 150, 50);
}

hellocatfood

Thanks, this really helped!