Processing/JS

Transformaciones

Trasnslaciones

Transformaciones en el sistema de coordenadas.

translate(), pushMatrix(), popMatrix()

Las coordenadas pueden ser trasladadas, rotadas y escaladas, para modificar su posición, orientación y tamaño.

Translación
La función translate() mueve el origen, el vértice superior izquierdo. Tiene dos parámetros las coordenadas x e y.

translate(x, y)

En los siguientes ejemplos se puede ver como funciona, el mismo rectángulo dibujado antes y después de la translación:.

Trans

rect(0, 5, 70, 30);
translate(10, 30); // Transladamos 10 px a la derecha y 30 hacia abajo
rect(0, 5, 70, 30);

La translación es aditva:

rect(0, 5, 70, 30);
translate(10, 30);
rect(0, 5, 70, 30);
translate(10, 30);
rect(0, 5, 70, 30);

Controlando las transformaciones

La matriz de transformación es un grupo de números que define como se dibuja la geometría en la pantalla.

Las funciones de transformación como es translate() que se guarda usando la función pushMatrix() cuando queramos volver a usar esta transformación usaremos popMatrix().

transformaciones

pushMatrix();
translate(33, 30);
rect(0, 0, 66, 30);
popMatrix();
rect(0, 0, 66, 30);

Rotación

En este tema veremos la rotación y el escalado.

rotate(), scale()

Las transformaciones son muy simples, pero para hacer combinaciones de ellas se debe comprender bien como trabajan.

La function rotate() frota las coordenadas de las superficies un ángulo definido en los parámetros de la rotación.

rotate(angle)

El ángulo debe ser especificado en radianes, Los valores positivos giran a favor del reloj y los negativos en contra.

En el siguiente ejemplo se muestra como funciona la función rotación.

Rotación

smooth();
rect(55, 0, 30, 45);
rotate(PI/8);
rect(55, 0, 30, 45);

Para rotar un objeto en una posición diferente alrededor de su origen es necesario usar  translate() seguido de rotate(). Como veremos más adelante.

Escala

La function scale() se emplea para modificar el tamaño del objeto.

scale(size)
scale(xsize, ysize)

Usaremos un parámetro para escalar el tamaño en todas sus dimensiones y dos parámetros para escalar en las dos dimensiones.

La escala se expresa en porcentajes, en los siguientes ejemplos se muestra como funciona.

Escala

smooth();
ellipse(32, 32, 30, 30);
scale(1.8);
ellipse(32, 32, 30, 30);

escalado diferente según el eje:

smooth();
ellipse(32, 32, 30, 30);
scale(2.8, 1.8);
ellipse(32, 32, 30, 30);

Para evitar el escalado de la línea, dividimos el ancho de la línea por la escala aplicada usando la función strokeWeight().

float s = 1.8;
smooth();
ellipse(32, 32, 30, 30);
scale(s);
strokeWeight(1.0 / s);
ellipse(32, 32, 30, 30);

Al igual que en translate() y rotate(), los efectos de scale() son acumulativos.

rect(10, 20, 70, 20);
scale(1.7);
rect(10, 20, 70, 20);
scale(1.7);
rect(10, 20, 70, 20);

Combinando transformaciones

Cuando las superficies se dibujan en la pantalla, las funciones transform(), rotate(), y scale() afectan teniendo en cuenta el origen en el dibujo siguiente se muestra como afecta la rotación a un rectángulo.

El objeto rota desde el eje de coordenadas (0,0) igualmente ocurre con la traslación a l ejecutar una rotación la superficie rota con respecto al eje superior izquierdo, el origen del sistema local de coordenadas.

Hay dos maneras de pensar sobre las transformaciones, ver como se modifica el sistema de coordenadas en uno Nuevo. El orden en que se aplican las transformaciones afecta al resultado. La otra forma de verlo es aplicando las transformaciones directamente a las superficies.

En los siguientes ejemplos vemos como afecta el orden en que se hacen las transformaciones de translate() y rotate():

translate(width/2, height/2);
rotate(PI/8);
rect(-25, -25, 50, 50);

Vemos el ejemplo analizado desde las dos perspectivas:

 

rotate(PI/8);
translate(width/2, height/2);
rect(-25, -25, 50, 50);

Estos efectos pueden ser amplificados usando estructuras for.

background(0);
smooth();
stroke(255, 120);
translate(66, 33);
for (int i = 0; i < 18; i++) {
strokeWeight(i); // Incrementa el grosor
rotate(PI/12); // Acumula la rotación
line(0, 0, 55, 0);
}

background(0);
smooth();
noStroke();
fill(255, 48);
translate(33, 66);
for (int i = 0; i < 12; i++) {
scale(1.2); // Acumula la escala
ellipse(4, 2, 20, 20);
}

Nuevas coordenadas

El origen de coordenadas (0,0) por defecto esta la parte superior izquierda de la ventana, las transformaciones pueden cambiar las coordenadas del sistema.