Cuando dibujas en p5.js no solo decides qué forma dibujar, también puedes decidir cómo se coloca en el espacio.
Las transformaciones te permiten mover, girar o cambiar de tamaño las figuras sin tener que recalcular todas sus coordenadas a mano.
La idea clave es esta:
👉 primero transformas el sistema de coordenadas,
👉 luego dibujas como siempre.
La traslación sirve para desplazar el origen de coordenadas.
function setup() {
createCanvas(400, 300);
background(220);
translate(200, 150);
rect(0, 0, 80, 40);
}📌 El rectángulo se dibuja desplazado al nuevo origen (200, 150).
💡 A partir de ese momento, (0,0) ya no está en la esquina del canvas.
El escalado agranda o reduce todo lo que se dibuje después.
function setup() {
createCanvas(400, 300);
background(220);
translate(200, 150);
rect(0, 0, 80, 40);
}📌 El círculo se dibuja al doble de tamaño.
La rotación gira el sistema de coordenadas. Los ángulos se indican en radianes.
function setup() {
createCanvas(400, 300);
background(220);
translate(200, 150);
rotate(PI / 4);
rect(0, 0, 80, 40);
}
Puedes usar varias transformaciones seguidas.
function setup() {
createCanvas(400, 300);
background(220);
translate(200, 150);
rotate(PI / 6);
scale(1.5);
rect(-40, -20, 80, 40);
}📌 El orden importa: cambiarlo produce resultados distintos.
Para que una transformación no afecte a todo el dibujo, se usan push() y pop().
function setup() {
createCanvas(400, 300);
background(220);
rect(50, 50, 80, 40);
push();
translate(300, 150);
rotate(PI / 4);
rect(0, 0, 80, 40);
pop();
rect(50, 200, 80, 40);
}📌 Solo el rectángulo del centro se ve transformado.
Obra publicada con Licencia Creative Commons Reconocimiento Compartir igual 4.0