Al dibujar utilizamos coordenadas para situar las formas en la pantalla. El origen de las coordenadas (0,0) está en la esquina superior izquierda. El dibujo de formas complejas puede simplificarse modificando este sistema de coordenadas: si trasladamos el origen al centro de la pantalla, por ejemplo, podemos dibujar una figura hacia uno y otro lado con las mismas coordenadas en positivo y negativo. 
Estas transformaciones del sistema de referencia provienen de OpenGL, un sistema de dibujo en 3D que se desarrolló para los ordenadores Silicon Graphics, únicos capaces de crear imágenes en 3D hace años, y que hoy es muy habitual gracias a los gráficos de videojuegos.
Podemos modificar nuestro sistema de coordenadas con las transformaciones espaciales básicas:

Translate

Rotate

Scale

Podemos imaginar que trasladamos en la mesa de dibujo el sistema de reglas que nos permite trazar rectas y perpendiculares. Al desplazarlas y girarlas, podemos dibujar figuras en otro punto del papel, utilizando las medidas desde el 0,0.

Para dibujar en el centro de la pantalla, trasladamos el sistema de coordenadas con:

translate (width / 2, height /2 );
de este modo una forma dibujada en el 0,0 se dibujará en el centro:

ellipseMode(CENTER);
ellipse(0,0,50,50);

 

 

Podemos girar nuestro sistema de referencia para dibujar formas inclinadas sin tener que recalcular todos los puntos del dibujo:

translate (width / 2, height /2 );

rotate(PI/3);
ellipseMode(CENTER);
rect(0,0,50,50);

 

 

El ángulo de rotación se expresa en Radianes. Un círculo completo equivale a 2 PI radianes, o sea 2 PI = 360º.
Tenemos variables fijas del sistema (constantes) que almacenan estos valores, facilitando el manejo de estas unidades. Las constantes pre-definidas son PI, TWO_PI, HALF_PI, QUARTER_PI, TAU. TAU es el equivalente a TWO_PI, o sea una vuelta completa, igual a 360º.
Podemos comprender mejor estas unidades si las utilizamos para dibujar unos arcos:

float x = width/2; float y = height/2;
float d = width * 0.8;
arc(x, y, d, d, 0, QUARTER_PI);
arc(x, y, d-20, d-20, 0, HALF_PI);
arc(x, y, d-40, d-40, 0, PI);
arc(x, y, d-60, d-60, 0, TAU);

 

 

Matrix
El sistema de coordenadas es en realidad una matriz tridimensional, un objeto matemático que se utiliza para almacenar este espacio transformado.

Las operaciones de transformación de la matriz de referencia se acumulan. 

translate(20,20);
rect(0,0,10,10);
translate(20,20);
rect(0,0,10,10);
translate(20,20);
rect(0,0,10,10);

 

 

De este modo es fácil perderse y no volver a recuperar el punto de origen inicial. Para poder recuperarlo, utilizamos las operaciones pushMatrix() y popMatrix, que almacenan la matriz en una pila, y la recuperan.
La pila (stack) es un sistema de almacenamiento que funciona como una pila de platos: puedo poner platos encima de los de la pila, pero sólo puedo coger el plato de encima. De este modo recupero siempre la última matriz almacenda, y vouelvo poco a poco hasta la matriz original.

pushMatrix();

translate(20,20);
rect(0,0,10,10);
translate(20,20);
rect(0,0,10,10);
translate(20,20);
rect(0,0,10,10);

popMatrix();

 

rect(0,0,5,5);

 

El último cuadrado se dibuja en la esquina, el 0,0 inicial.


Orden de transformaciones

El orden en que realizamos las operaciones de traslado, rotación y escala son importantes. No es lo mismo trasladarnos al centro de pantalla y luego girar 45 grados para dibujar un cuadrado, lo que nos daría un rombo en el centro de la pantalla, que girar primero y luego traladarse para dibujar el cuadrado. Con esta segunda operación nos trasladamos hacia arriba y dibujamos el cuadrado lejos del centro de la pantalla.


Dibujando en el 0,0

Gracias a estas operaciones de transformación, puedo planear mis dibujos alrededor de su propio centro, su propio 0,0. Resulta fácil dibujar una figura alrededor de su centro. Luego podemos dibujarla en cualquier posición, giro y tamaño mediante las operaciones de transformación de la matriz.