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.
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.
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.
Una traslación conserva:
No posee punto fijo salvo cuando t=(0,0), caso en el que la transformación es la identidad.
Si un polígono tiene vértices V₀,…,Vₙ₋₁, se traslada cada uno:
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.
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:
Al trasladar el objeto solo cambia posiciónObjeto; sus vértices locales permanecen constantes. Esta organización evita modificar repetidamente todos los datos.
Dos traslaciones sucesivas se combinan sumando sus vectores:
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:
Si conocemos A y B, el desplazamiento necesario es:
Su longitud es la distancia recorrida en línea recta: |t|=√(tx²+ty²). La dirección puede obtenerse con atan2(ty,tx).
Una velocidad v expresa desplazamiento por unidad de tiempo. Durante un intervalo Δ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.
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:
Cuando la cámara avanza hacia la derecha, los objetos parecen desplazarse hacia la izquierda. La geometría mundial no necesita modificarse.
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.
Si geometría visual y colisión comparten la misma posición del objeto, permanecen sincronizadas.
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.
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.
La traslación aparece en movimiento, desplazamiento de cámaras, scroll, arrastre, interfaces, partículas, mapas y jerarquías de objetos.
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.
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.