34. Transformaciones geométricas 2D

34.1 Introducción

Una transformación es una función que recibe un punto P=(x,y) y produce otro P'=(x',y'). Al aplicar la misma función a todos los vértices obtenemos una nueva versión del objeto.

En gráficos 2D estas operaciones controlan sprites, cámaras, interfaces, animaciones, jerarquías y sistemas de coordenadas. Separar la geometría original de su transformación simplifica el programa.

34.2 Qué puede cambiar y qué se conserva

Traslación, rotación y reflexión son isometrías porque conservan distancias.

34.3 Interpretación visual

34.4 Transformar puntos, vectores y objetos

Un objeto poligonal se transforma aplicando la regla a cada vértice. Las curvas pueden transformar sus puntos de control o dibujarse dentro de un contexto ya transformado.

Una posición representa un lugar y sí responde a una traslación. Un vector de dirección representa un desplazamiento y no debe recibir esa traslación; solo las partes lineales como rotación y escala.

34.5 Traslación

Una traslación suma el mismo desplazamiento t=(tx,ty) a todos los puntos:

No modifica tamaño, forma ni orientación. Su transformación inversa utiliza (−tx,−ty).

34.6 Rotación

Alrededor del origen y con ángulo θ en radianes:

Una rotación conserva distancias y áreas. Su inversa usa −θ. En pantalla debe considerarse que el eje y crece hacia abajo.

34.7 Escalado

Si sx=sy, el escalado es uniforme. Un factor mayor que 1 amplía; entre 0 y 1 reduce; cero aplasta una dimensión; un valor negativo escala y refleja.

El área se multiplica por |sx·sy|. La inversa existe solo si ambos factores son distintos de cero y utiliza 1/sx,1/sy.

34.8 Reflexión y simetría

Una reflexión invierte la orientación de los vértices. Aplicar dos veces la misma reflexión devuelve el objeto original.

34.9 Pivotes y coordenadas locales

Rotar o escalar alrededor de un pivote C requiere tres pasos: llevar C al origen, aplicar la operación y devolverlo a su posición:

En coordenadas locales, el objeto se modela alrededor de un origen conveniente. Su transformación lo lleva al espacio global. Esta separación facilita animaciones y jerarquías como brazo-mano o vehículo-rueda.

34.10 Composición y orden de aplicación

Varias transformaciones pueden componerse en una sola secuencia. Sin embargo, generalmente no conmutan:

Escalar y luego trasladar deja intacto el vector de traslación; trasladar y luego escalar también escala ese desplazamiento. Por eso el orden debe estar explícito.

34.11 Simulación interactiva

Modifica traslación, rotación y escala. El contorno blanco conserva la geometría original; el objeto coloreado muestra el resultado. Cambia el orden para comparar composiciones.

34.12 Transformar una figura completa

function transformar(p, posicion, escala, angulo) {
  const x = p.x * escala.x;
  const y = p.y * escala.y;
  return {
    x: posicion.x + x*Math.cos(angulo) - y*Math.sin(angulo),
    y: posicion.y + x*Math.sin(angulo) + y*Math.cos(angulo)
  };
}

const figura = [
  { x: 0, y: 0 }, { x: 4, y: 0 }, { x: 2, y: 3 }
];
const posicion = { x: 5, y: 2 };
const escala = { x: 2, y: 1.5 };
const angulo = 30 * Math.PI / 180;

figura.map(p => transformar(p, posicion, escala, angulo))
  .forEach((p, i) =>
    console.log(`V${i}: (${p.x.toFixed(2)}, ${p.y.toFixed(2)})`)
  );

Al presionar Ejecutar, se muestran los vértices después de aplicar escala, rotación y traslación, sin depender de un contexto gráfico.

34.13 Transformación manual reutilizable

function transformarPunto(p,{pos,escala,angulo}) {
  const x=p.x*escala.x;
  const y=p.y*escala.y;
  const cos=Math.cos(angulo);
  const sin=Math.sin(angulo);
  return {
    x:pos.x+x*cos-y*sin,
    y:pos.y+x*sin+y*cos
  };
}

const transformacion = {
  pos: { x: 3, y: 2 },
  escala: { x: 2, y: 0.5 },
  angulo: Math.PI / 2
};
const original = { x: 4, y: 2 };
const resultado = transformarPunto(original, transformacion);

console.log(`Original: (${original.x}, ${original.y})`);
console.log(`Transformado: (${resultado.x.toFixed(2)}, ${resultado.y.toFixed(2)})`);

Al presionar Ejecutar, se muestra el punto transformado. Esta función aplica escala, luego rotación y finalmente traslación.

34.14 Aplicaciones, errores y conclusión

Las transformaciones se utilizan en sprites, cámaras, esqueletos, escenas jerárquicas, herramientas de edición, efectos espejo, zoom y adaptación de interfaces.

Ejemplo animado: robot jerárquico y efecto espejo

El torso actúa como nodo padre. Cabeza, hombros, brazos y manos heredan su transformación, mientras cada articulación agrega su propio giro. La escena también aplica zoom de cámara y una reflexión horizontal completa.

Errores comunes

• Usar grados donde JavaScript espera radianes.
• Rotar o escalar alrededor del origen cuando se necesitaba un pivote.
• Confundir puntos con vectores y trasladar una dirección.
• Ignorar el orden de composición.
• Modificar directamente los puntos originales cuando debían conservarse.
• Intentar invertir una escala con factor cero.
• No detectar el cambio de orientación producido por una reflexión.

Recuerda: cada transformación es una función de puntos; un pivote se maneja trasladando temporalmente al origen; y el orden de aplicación forma parte del resultado.

En el próximo tema estudiaremos en profundidad la traslación de objetos.