Computation and Visualization in the Earth Sciences

Lesson 5: Translating the coordinate system


New syntax introduced: translate(), pushMatrix(), popMatrix()

You know that the default coordinate system has (0,0) in the upper left corner and increases to the right and downwards. You can change this system by calling the function translate(). The translate() function takes two arguments: the number of pixels added to x and the number of pixels added to y. All shapes drawn after translate() will adhere to the new coordinate structure.

Example 5.6

Here is an example. Notice how translation is cumulative and can be negative, too.

// Demonstrate Translation

size(200, 200);
rect(10, 10, 50, 20); // Draw a rectangle 
translate(100, 100);  // Move the origin to (100, 100)
rect(10, 10, 50, 20); // Draw the same rectangle, but now it is shifted
translate(50, 50);    // Move the origin to (150, 150)
rect(10, 10, 50, 20); // Same rectangle shifted more
translate(0, -75);    // Translations can be negative
fill(255, 0, 0);    
rect(10, 10, 50, 20); // Same rectangle shifted up and colored red
screenshot of program output from example 5.6. a variety of rectangles on a grey background
Example of cumulative and negative translation
E. Richardson

To change the coordinate system temporarily and then have it go back to the way it was before you made a transformation without having to manually make a negative translation, use pushMatrix() and popMatrix(). These functions always have to be used together. The way it works is that you stick in a pushMatrix() before you write the transformation and then you stick in a popMatrix() just before you want to revert back. The coordinate system will revert back to the way it was before pushMatrix().

Example 5.7

// Use pushMatrix and popMatrix to revert the translation

size(200, 200);


for (int i = 1; i < 200; i++) {
   translate(i, i);
   rect(1, 1, 50, 20); // Draw a rectangle

ellipse(100, 100, 20, 20);
screenshot of output from example program 5.7. rectangles and a circle on a grey background
Demonstration of pushMatrix() and popMatrix().
E. Richardson

Note how in the code in Example 5.7 the circle draws in the center of the screen because the for loop was enclosed by a pushMatrix() popMatrix() pair, meaning that all those accumulated translations didn’t affect the circle. And here's a question for you. Why aren't the rectangles evenly spaced? Why does the spacing increase as they move diagonally downward?


5.5: Experiment with translations. See what happens when you make multiple translations and use more than one pushMatrix() popMatrix() pair