25. Rotación alrededor de un punto arbitrario

25.1 Introducción

La fórmula del tema anterior gira siempre alrededor de (0,0). Sin embargo, los objetos reales suelen girar alrededor de su centro, una esquina, una articulación o un punto externo.

El punto que permanece fijo se llama pivote o centro de rotación. El procedimiento general reduce el nuevo problema a la rotación alrededor del origen.

25.2 El pivote

Sea C=(cx,cy) el pivote y P=(x,y) el punto que deseamos girar. Después de la rotación obtenemos P′, pero C no cambia.

El punto describe una circunferencia centrada en C. Su radio es la distancia inicial entre C y P.

25.3 Las tres operaciones

1. Trasladar: restar C para llevar el pivote al origen.
2. Rotar: aplicar la fórmula de rotación al punto relativo.
3. Regresar: sumar C para volver al sistema original.

El orden es esencial. Rotar primero y trasladar después describe una transformación diferente.

25.4 Fórmulas desarrolladas

Primero calculamos dx=x−cx y dy=y−cy. Después rotamos ese desplazamiento y sumamos el pivote:

Estas fórmulas son equivalentes a trasladar, rotar y regresar, pero condensan el proceso en una sola expresión.

25.5 Interpretación visual

25.6 Ejemplo paso a paso

Sea C=(2,1), P=(6,2) y θ=90°. El punto relativo es P−C=(4,1). Al rotarlo 90° obtenemos (−1,4). Finalmente sumamos C:

Las distancias son iguales: |P−C|=√17 y |P′−C|=√17.

25.7 Matrices y composición

Con matrices homogéneas, la transformación completa se expresa como:

Al aplicarse a un punto, la operación más a la derecha ocurre primero. La composición evita recalcular pasos separados para cada vértice de una figura.

25.8 Pivotes dentro y fuera del objeto

Modificar solamente el pivote cambia la trayectoria, aunque el ángulo sea idéntico.

25.9 Rotar una figura completa

Para girar un polígono alrededor de C aplicamos la fórmula a cada vértice. Todas las distancias y ángulos internos se conservan.

Si los vértices están almacenados en coordenadas locales respecto del pivote, basta rotarlos y luego sumar la posición global del objeto.

25.10 Simulación interactiva

Modifica P, C y θ. El arco y la circunferencia muestran la trayectoria; los paneles detallan el punto relativo y la posición final.

25.11 JavaScript

function rotarAlrededor(p, centro, grados) {
  const a = grados * Math.PI / 180;
  const dx = p.x - centro.x;
  const dy = p.y - centro.y;
  return {
    x: centro.x + dx * Math.cos(a) - dy * Math.sin(a),
    y: centro.y + dx * Math.sin(a) + dy * Math.cos(a)
  };
}

const centro = { x: 2, y: 1 };
const punto = { x: 6, y: 2 };
const resultado = rotarAlrededor(punto, centro, 90);

console.log(`Centro: (${centro.x}, ${centro.y})`);
console.log(`Punto original: (${punto.x}, ${punto.y})`);
console.log(`Punto rotado: (${resultado.x.toFixed(2)}, ${resultado.y.toFixed(2)})`);

Al presionar Ejecutar, el punto (6,2) gira 90° alrededor de (2,1) y se obtiene (1,5). Guardar dx y dy antes de calcular evita que una componente ya modificada contamine la otra.

25.12 Transformar una figura sin Canvas

La misma operación puede aplicarse directamente a todos los vértices de una figura, sin depender de un contexto gráfico.

function rotarAlrededor(p, centro, grados) {
  const a = grados * Math.PI / 180;
  const dx = p.x - centro.x;
  const dy = p.y - centro.y;
  return {
    x: centro.x + dx * Math.cos(a) - dy * Math.sin(a),
    y: centro.y + dx * Math.sin(a) + dy * Math.cos(a)
  };
}

const pivote = { x: 2, y: 1 };
const vertices = [
  { x: 2, y: 1 },
  { x: 6, y: 1 },
  { x: 6, y: 3 },
  { x: 2, y: 3 }
];

const verticesRotados = vertices.map(
  punto => rotarAlrededor(punto, pivote, 90)
);

verticesRotados.forEach((punto, indice) => {
  console.log(
    `Vértice ${indice + 1}: (${punto.x.toFixed(2)}, ${punto.y.toFixed(2)})`
  );
});

Al presionar Ejecutar, se muestran las coordenadas del rectángulo después de girarlo 90° alrededor del pivote (2,1). El pivote permanece fijo y la figura conserva su forma y tamaño.

25.13 Aplicaciones y errores comunes

Se utiliza en puertas, brazos articulados, cámaras orbitales, ruedas, manecillas, satélites, partículas y editores gráficos.

Ejemplo animado: mecanismo orbital articulado

Cada elemento usa un pivote y una velocidad independientes. Los satélites orbitan el núcleo, los engranajes giran sobre su centro y el extremo del brazo se convierte en el pivote de una segunda articulación.

Errores comunes

• Olvidar restar el pivote antes de rotar.
• No volver a sumar el pivote.
• Aplicar las transformaciones en orden inverso.
• Confundir el centro geométrico con el pivote elegido.
• Mezclar coordenadas locales y globales.
• Pasar grados a funciones que esperan radianes.
• Acumular redondeos modificando vértices en cada cuadro.

25.14 Qué debes recordar y conclusión

• P′=C+R(θ)(P−C).
• El pivote permanece fijo.
• La distancia entre P y C se conserva.
• La secuencia es trasladar, rotar y regresar.
• Con matrices: T(C)R(θ)T(−C).
• La misma fórmula se aplica a todos los vértices.

La rotación arbitraria combina dos ideas simples: traslación y rotación alrededor del origen. Comprender la secuencia permite controlar con precisión dónde y cómo gira cualquier objeto.

En el próximo tema estudiaremos circunferencias y círculos.