Coordinate system transformations

Sometimes we need to translate, rotate, and resize drawings. For example, arcade games are based on the characters moving across the screen.

When we perform drawing using control points, the straightforward solution for translating, rotating, and resizing graphics is in applying desired transformations to control points using corresponding mathematical formulas. Such idea works, but sometimes leads to complicated formulas in the code (especially when we need to rotate graphics). The more elegant solution is in using coordinate system transformations. This is a method of temporarily changing the coordinate system during drawing, which lets you translate, rotate, and resize drawings without changing the drawing algorithm.

Coordinate system transformations are managed in openFrameworks with the following functions:

All transformations can be applied in any sequence; for example, translating, scaling, rotating, translating again, and so on.

The typical usage of these functions is the following:

For example, for moving the origin of the coordinate system to the center of the screen, use the following code in testApp::draw():

ofPushMatrix();
ofTranslate( ofGetWidth() / 2, ofGetHeight() / 2 );
//Draw something
ofPopMatrix();

If you replace the //Draw something comment to ofCircle( 0, 0, 100 );, you will see the circle in the center of the screen.

Now let's use coordinate system transformation for adding triangular petals to the flower.

Flower with petals example

In this example, we draw petals to the flower from the 02-2D/03-FlowerControlPoints example, described in the Using control points example section.

Note

This is example 02-2D/04-FlowerWithPetals.

We want to draw unfilled shapes here, so add the following lines at the beginning of testApp::draw():

ofNoFill();        //Draw shapes unfilled

Now add the following code to the end of testApp::draw() for drawing the petals:

ofPushMatrix();    //Store the coordinate system

//Translate the coordinate system center to stem0
ofTranslate( stem0 );

//Rotate the coordinate system depending on the time
float angle = ofGetElapsedTimef() * 30;
ofRotate( angle );

int petals = 15;  //Number of petals
for (int i=0; i<petals; i++) {
  //Rotate the coordinate system
  ofRotate( 360.0 / petals );

  //Draw petal as a triangle
  ofPoint p1( 0, 20 );
  ofPoint p2( 80, 0 );
  ofTriangle( p1, -p1, p2 );
}

//Restore the coordinate system
ofPopMatrix();

This code moves the coordinate system origin to the point stem0 (the blossom's center) and rotates it depending on the current time. Then it rotates the coordinate system on a fixed angle and draws a triangle petals times. As a result, we obtain a number of triangles that slowly rotate around the point stem0.