35. Traslación de objetos

Trasladar un objeto significa desplazar todos sus puntos mediante el mismo vector. Su forma, tamaño y orientación permanecen intactos; solamente cambia su posición en el plano.

35.1 Introducción

La traslación es la transformación geométrica más directa. Si queremos mover un objeto cuatro unidades a la derecha y tres hacia arriba, sumamos el vector t=(4,3) a cada uno de sus puntos.

En gráficos se usa para posicionar sprites, desplazar interfaces, seguir trayectorias, mover cámaras y convertir coordenadas locales en globales.

35.2 Regla de la traslación

P'=P+t
x'=x+tx
y'=y+ty

tx indica el desplazamiento horizontal y ty el vertical. Sus signos determinan el sentido según el sistema de coordenadas utilizado.

La diferencia entre la posición final y la inicial recupera el vector aplicado: t=P'−P.

35.3 Interpretación visual

Objeto inicial y objeto trasladado con vectores de desplazamiento iguales, componentes y coordenadas locales
Cada punto recorre exactamente la misma distancia y dirección; por eso el objeto conserva forma y orientación.

35.4 Propiedades e invariantes

Una traslación conserva:

  • Distancias entre cualquier par de puntos.
  • Ángulos, paralelismo y perpendicularidad.
  • Perímetro, área, forma y tamaño.
  • Orientación horaria o antihoraria de los vértices.

No posee punto fijo salvo cuando t=(0,0), caso en el que la transformación es la identidad.

35.5 Trasladar una figura completa

Si un polígono tiene vértices V₀,…,Vₙ₋₁, se traslada cada uno:

Vᵢ'=Vᵢ+t   para i=0,…,n−1

No es necesario alterar la geometría local si el objeto almacena una propiedad posición. Al dibujar, se suma esa posición o se traslada el contexto.

35.6 Coordenadas locales y globales

Las coordenadas locales describen los puntos respecto del origen propio del objeto. La posición global indica dónde se encuentra ese origen dentro de la escena:

Pglobal=posiciónObjeto+Plocal
Plocal=Pglobal−posiciónObjeto

Al trasladar el objeto solo cambia posiciónObjeto; sus vértices locales permanecen constantes. Esta organización evita modificar repetidamente todos los datos.

35.7 Composición e inversa

Dos traslaciones sucesivas se combinan sumando sus vectores:

Tᵤ(Tₜ(P))=P+t+u=Tₜ₊ᵤ(P)

Las traslaciones sí conmutan entre sí: aplicar t y después u produce lo mismo que u y después t. La inversa utiliza el vector opuesto:

t⁻¹=(−tx,−ty)

35.8 De posición inicial a posición final

Si conocemos A y B, el desplazamiento necesario es:

t=B−A=(Bx−Ax, By−Ay)

Su longitud es la distancia recorrida en línea recta: |t|=√(tx²+ty²). La dirección puede obtenerse con atan2(ty,tx).

35.9 Movimiento, velocidad y tiempo

Una velocidad v expresa desplazamiento por unidad de tiempo. Durante un intervalo Δt:

desplazamiento=v·Δt
posición nueva=posición anterior+v·Δt

Multiplicar por Δt hace que el movimiento dependa del tiempo transcurrido y no de la cantidad de fotogramas. Las unidades deben ser compatibles, por ejemplo píxeles/segundo y segundos.

35.10 Cámara y desplazamiento del mundo

Una cámara 2D puede interpretarse mediante una traslación inversa. Si la cámara está en C, un punto del mundo W se convierte a pantalla restando C:

Ppantalla=Pmundo−posiciónCámara+centroViewport

Cuando la cámara avanza hacia la derecha, los objetos parecen desplazarse hacia la izquierda. La geometría mundial no necesita modificarse.

35.11 Límites y colisiones trasladadas

Un AABB trasladado conserva ancho y alto; se suman tx,ty a sus límites mínimos y máximos. Un círculo conserva su radio y solo mueve el centro.

AABB': min'=min+t, max'=max+t
Círculo: C'=C+t, r'=r

Si geometría visual y colisión comparten la misma posición del objeto, permanecen sincronizadas.

35.12 Simulación interactiva

Combina una traslación directa t con el desplazamiento v·tiempo. El contorno blanco es el objeto original y el amarillo su posición final.

posición inicialposición final
Traslación directa(3, 2)
v·tiempo(1, 0)
Desplazamiento total(4, 2)
Distancia4.47

35.13 Implementación en JavaScript

function trasladarPunto(p,t) {
  return {x:p.x+t.x, y:p.y+t.y};
}

const objeto = {
  posicion: { x: 2, y: 1 },
  velocidad: { x: 3, y: -1 }
};
const deltaTime = 0.5;

objeto.posicion.x += objeto.velocidad.x*deltaTime;
objeto.posicion.y += objeto.velocidad.y*deltaTime;

const punto = trasladarPunto({ x: 4, y: 2 }, { x: 3, y: -1 });
console.log(`Punto trasladado: (${punto.x}, ${punto.y})`);
console.log(`Posición del objeto: (${objeto.posicion.x.toFixed(2)}, ${objeto.posicion.y.toFixed(2)})`);

Al presionar Ejecutar, se muestran un punto trasladado y la nueva posición de un objeto después de medio segundo. Mantener la geometría en coordenadas locales permite obtener los puntos globales sumando la posición cuando sean necesarios.

35.14 Aplicaciones, errores y conclusión

La traslación aparece en movimiento, desplazamiento de cámaras, scroll, arrastre, interfaces, partículas, mapas y jerarquías de objetos.

Ejemplo animado: caravana espacial y cámara con parallax

La nave avanza en coordenadas del mundo mientras la cámara la mantiene dentro del visor. Los drones conservan posiciones locales respecto de la nave, las partículas heredan su traslación y las capas del fondo se desplazan a velocidades diferentes.

VISOR DE CÁMARAposición mundo → posición pantalla
Mundo x=0 · Cámara x=0

Errores comunes

  • Aplicar el vector solo a algunos puntos de la figura.
  • Confundir posición final con desplazamiento.
  • Sumar una posición absoluta en cada fotograma como si fuera velocidad.
  • Olvidar multiplicar la velocidad por Δt.
  • Mezclar unidades o coordenadas locales y globales.
  • Mover el dibujo pero no su región de colisión.
  • Usar el signo vertical incorrecto entre plano matemático y pantalla.

Recuerda: todos los puntos reciben el mismo vector; las traslaciones se componen sumando desplazamientos; y el movimiento uniforme utiliza posición+=velocidad·tiempo.

En el próximo tema estudiaremos la rotación de objetos.