36. Rotación de objetos
Rotar un objeto significa girar todos sus puntos el mismo ángulo alrededor de un pivote. La forma y el tamaño permanecen constantes, pero cambian la orientación y, si el pivote es externo, también la posición.
36.1 Introducción
La rotación aparece en ruedas, agujas, torretas, cámaras, sprites, articulaciones y objetos que orbitan. A diferencia de una traslación, el desplazamiento de cada punto depende de su distancia al pivote.
Un punto situado exactamente en el pivote no se mueve. Los puntos más alejados recorren arcos más largos para el mismo ángulo.
36.2 Ángulo, sentido y unidades
En el plano matemático, los ángulos positivos giran normalmente en sentido antihorario. Una vuelta completa equivale a:
180° = π rad
radianes = grados·π/180
Las funciones trigonométricas de JavaScript utilizan radianes. En pantalla, el eje y invertido puede hacer que el sentido visual resulte contrario según la fórmula aplicada.
36.3 Interpretación visual
36.4 Rotación alrededor del origen
Para P=(x,y) y ángulo θ:
y'=x senθ+y cosθ
Con θ=90°, cosθ=0 y senθ=1, por lo que (x,y) se convierte en (−y,x). La inversa utiliza el ángulo −θ.
36.5 Rotación alrededor de un pivote
Para girar alrededor de C=(cx,cy), primero expresamos P respecto de C, rotamos y devolvemos el desplazamiento:
x'=cx+dx cosθ−dy senθ
y'=cy+dx senθ+dy cosθ
En forma compacta: P'=C+Rθ(P−C). Esta construcción garantiza que C permanezca fijo.
36.6 Rotar un objeto completo
Una figura se rota aplicando la misma regla a cada vértice. Si el objeto guarda geometría local centrada en su propio pivote, basta conservar una posición y un ángulo:
Los puntos locales no se modifican. Esto evita acumular errores al rotar repetidamente los vértices ya transformados.
36.7 Propiedades que se conservan
- Distancias entre puntos y distancia al pivote.
- Ángulos, paralelismo y perpendicularidad.
- Perímetro, área, forma y tamaño.
- Orientación horaria o antihoraria del contorno.
El determinante de una rotación es 1. Por eso no refleja ni cambia el área.
36.8 Centro propio frente a pivote externo
Al rotar alrededor del centro propio, cambia la orientación pero el centro permanece en su lugar. Con un pivote externo, el centro describe una circunferencia y el objeto parece orbitar.
Una puerta gira alrededor de una bisagra; una rueda suele girar alrededor de su centro; un planeta puede orbitar un centro externo. Elegir el pivote correcto forma parte del modelo.
36.9 Velocidad angular y tiempo
La velocidad angular ω expresa cambio de ángulo por unidad de tiempo:
Puede medirse en radianes por segundo o grados por segundo, pero debe convertirse antes de usar seno y coseno. Multiplicar por Δt produce una animación independiente de la frecuencia de fotogramas.
36.10 Orientar un objeto hacia un objetivo
Si un objeto en O debe mirar hacia T, calculamos el vector d=T−O:
atan2 devuelve el cuadrante correcto. Si el dibujo original apunta hacia otra dirección, se suma o resta un desplazamiento angular fijo.
36.11 Límites después de rotar
Un rectángulo rotado deja de estar alineado con los ejes. Para obtener su AABB se rotan sus cuatro vértices y se calculan mínimos y máximos.
ymin=min(y'ᵢ), ymax=max(y'ᵢ)
El AABB suele crecer y encoger durante el giro aunque el objeto conserve tamaño. Para colisiones precisas puede utilizarse un OBB.
36.12 Simulación interactiva
Modifica el pivote, el ángulo base, la velocidad angular y el tiempo. El contorno blanco es el objeto original; el amarillo es el resultado y el rectángulo coral representa su AABB.
36.13 Implementación con JavaScript
function rotarAlrededor(p,c,angulo) {
const dx=p.x-c.x, dy=p.y-c.y;
const cos=Math.cos(angulo), sin=Math.sin(angulo);
return {
x:c.x+dx*cos-dy*sin,
y:c.y+dx*sin+dy*cos
};
}
const pivote = { x: 2, y: 1 };
const angulo = 90 * Math.PI / 180;
const punto = rotarAlrededor({ x: 6, y: 2 }, pivote, angulo);
const figura = [
{ x: 2, y: 1 }, { x: 6, y: 1 },
{ x: 6, y: 3 }, { x: 2, y: 3 }
];
const figuraRotada = figura.map(p =>
rotarAlrededor(p, pivote, angulo)
);
console.log(`Punto rotado: (${punto.x.toFixed(2)}, ${punto.y.toFixed(2)})`);
figuraRotada.forEach((p, i) =>
console.log(`V${i}: (${p.x.toFixed(2)}, ${p.y.toFixed(2)})`)
);Al presionar Ejecutar, se muestra un punto y los cuatro vértices de una figura rotados 90° alrededor del pivote.
36.14 Aplicaciones, errores y conclusión
La rotación se utiliza en ruedas, indicadores, armas, cámaras, articulaciones, órbitas, brújulas, partículas y orientación hacia objetivos.
Ejemplo animado: estación orbital mecánica
La estación combina una rueda central, brazos articulados, satélites y torretas que apuntan a blancos móviles. Cada pieza conserva su distancia al pivote y utiliza una velocidad angular independiente.
Errores comunes
- Usar grados directamente en seno, coseno o
rotate. - Elegir el origen global cuando se necesitaba otro pivote.
- Rotar repetidamente los vértices transformados y acumular error.
- Ignorar el eje y invertido de pantalla.
- No multiplicar velocidad angular por Δt.
- Conservar un AABB antiguo después del giro.
- Modificar los vértices ya rotados en cada cuadro y acumular error.
Recuerda: una rotación conserva distancias; alrededor de C se calcula C+Rθ(P−C); y una animación angular usa θ+=ω·Δt.
En el próximo tema estudiaremos el escalado de objetos.