24. Rotación de puntos alrededor del origen

24.1 Introducción

Una rotación mueve un punto a lo largo de una circunferencia centrada en el origen. El punto cambia de coordenadas, pero conserva la distancia a (0,0).

Esta operación es la base para girar vértices, figuras, sprites, direcciones y sistemas de coordenadas completos.

24.2 Elementos de una rotación

• Centro: en este tema es O=(0,0).
• Punto original: P=(x,y).
• Ángulo: θ indica cuánto y en qué sentido girar.
• Punto rotado: P′=(x′,y′).

En convención matemática, θ positivo gira en sentido antihorario y θ negativo en sentido horario.

24.3 Fórmulas de rotación

Las nuevas coordenadas se calculan combinando las componentes originales con seno y coseno:

El mismo ángulo debe usarse en ambas expresiones y debe estar en radianes al llamar a las funciones de JavaScript.

24.4 ¿De dónde surgen las fórmulas?

Un punto puede escribirse como P=(r cos α,r sen α), donde r es su distancia al origen y α su orientación. Después de girar θ, la nueva orientación es α+θ.

Al desarrollar cos(α+θ) y sen(α+θ) mediante identidades trigonométricas aparecen exactamente las fórmulas de rotación. Por eso conservan r y solo modifican el ángulo.

24.5 Interpretación visual

24.6 Ejemplo de 90 grados

Para P=(4,2) y θ=90°, cos θ=0 y sen θ=1:

Esta rotación permite recordar una regla especial: en 90° antihorario, (x,y) se transforma en (−y,x).

24.7 Rotaciones especiales

Estas reglas son atajos exactos; para cualquier otro ángulo utilizamos la fórmula general.

24.8 Matriz de rotación

Las dos fórmulas pueden agruparse en una matriz:

La matriz organiza la operación y permite combinar la rotación con otras transformaciones geométricas.

24.9 Propiedades importantes

• Conserva la distancia al origen.
• Conserva ángulos y forma.
• Su inversa es una rotación de −θ.
• Dos rotaciones sucesivas suman sus ángulos.
• Rotar el vector nulo no produce cambios.

24.10 Simulación interactiva

Modifica P y θ. La circunferencia confirma que el radio permanece constante y el arco muestra el sentido del giro.

24.11 Implementación en JavaScript

function rotarEnOrigen(punto, grados) {
  const angulo = grados * Math.PI / 180;
  const cos = Math.cos(angulo);
  const sen = Math.sin(angulo);
  return {
    x: punto.x * cos - punto.y * sen,
    y: punto.x * sen + punto.y * cos
  };
}

const punto = { x: 4, y: 2 };
const puntoRotado = rotarEnOrigen(punto, 90);

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

Al presionar Ejecutar, la llamada gira el punto (4,2) 90° y muestra como resultado (−2,4). Conviene devolver un punto nuevo para conservar el original.

24.12 Rotar una figura completa

Una figura poligonal se representa mediante varios vértices. Para girarla alrededor del origen aplicamos la misma función a cada punto.

function rotarEnOrigen(punto, grados) {
  const radianes = grados * Math.PI / 180;
  const cos = Math.cos(radianes);
  const sen = Math.sin(radianes);
  return {
    x: punto.x * cos - punto.y * sen,
    y: punto.x * sen + punto.y * cos
  };
}

const vertices = [
  { x: 0, y: 0 },
  { x: 4, y: 0 },
  { x: 2, y: 3 }
];
const angulo = 90;

const verticesRotados = vertices.map(
  punto => rotarEnOrigen(punto, angulo)
);

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

Al presionar Ejecutar, se muestran los tres vértices después de rotar el triángulo 90°. Las relaciones entre ellos se conservan, de modo que el polígono mantiene forma y tamaño.

24.13 Aplicaciones de la rotación

La rotación de puntos se utiliza para orientar sprites, girar polígonos, mover piezas mecánicas, construir efectos radiales y transformar figuras completas sin alterar su forma ni su tamaño.

Ejemplo animado: rotación de un polígono

En cada cuadro se aplica la misma matriz de rotación a todos los vértices. El contorno discontinuo representa la figura original y permite comprobar que las distancias al origen se conservan.

24.14 Coordenadas de pantalla y errores comunes

En Canvas el eje y está invertido. Podemos convertir entre sistemas o adaptar el signo del ángulo. También ctx.rotate trabaja en radianes y gira el sistema de dibujo.

• Pasar grados directamente a seno y coseno.
• Usar el valor nuevo de x para calcular y.
• Confundir giro horario y antihorario.
• Rotar alrededor del origen cuando se necesitaba otro centro.
• Redondear en cada cuadro y acumular errores.
• Olvidar que la rotación conserva el radio.

24.15 Qué debes recordar y conclusión

• x′=x cos θ−y sen θ.
• y′=x sen θ+y cos θ.
• Una rotación conserva distancia, forma y ángulos.
• θ positivo gira antihorariamente en matemáticas.
• La matriz reúne ambas ecuaciones.
• La inversa utiliza −θ.

Rotar alrededor del origen es la forma fundamental de giro 2D. Una vez comprendida, podremos trasladar temporalmente cualquier centro al origen y rotar alrededor de puntos arbitrarios.

Ese será el contenido del próximo tema.