1️⃣ Empieza por una forma simple

Elige una figura fácil (rectángulo, triángulo o círculo).
Piensa en ella como la “pieza base” que vas a transformar.

2️⃣ Usa translate() para colocarla

Mueve el origen al centro del canvas o a la zona donde quieras trabajar.
Así evitas tener coordenadas complicadas.

3️⃣ Aplica rotaciones

Usa rotate() para girar la figura.
Puedes hacerlo una sola vez o dentro de un bucle para repetir el giro.

💡 Recuerda: los ángulos se expresan en radianes.

4️⃣ Cambia el tamaño con scale()

Aplica un escalado para variar el tamaño de la figura.
Puedes usar un valor fijo o cambiarlo poco a poco.

5️⃣ Aísla transformaciones con push() y pop()

Si repites la figura varias veces, usa push() y pop() para que cada transformación no afecte a las demás.

6️⃣ Comprueba el resultado

Pregúntate:

• ¿Se nota claramente cada transformación?
• ¿El dibujo es coherente?
• ¿Las figuras aparecen donde esperabas?

Ejemplo de Código:

function setup() {
  createCanvas(400, 400);
  background(220);

  // Colocamos el origen en el centro
  translate(width / 2, height / 2);

  // Dibujamos varias "pétalos" girando la misma forma
  for (let i = 0; i < 12; i++) {
    push();

    // Rotamos cada pétalo
    rotate((TWO_PI / 12) * i);

    // Escalamos ligeramente
    scale(1.2);

    // Color del pétalo
    fill(255, 100, 150);
    stroke(0);

    // Forma base (pétalo)
    ellipse(60, 0, 80, 30);

    pop();
  }

  // Centro de la flor
  fill(255, 200, 0);
  circle(0, 0, 60);
}