17. Dirección y desplazamiento mediante vectores

17.1 Introducción

Un objeto en pantalla tiene una posición, por ejemplo P = (120, 80). Cuando se mueve, no necesitamos guardar todas las posiciones intermedias: basta con aplicar un vector que indique cuánto cambia horizontal y verticalmente.

El vector es una flecha: posee dirección, sentido y longitud. La posición es un punto: solo localiza un lugar. Distinguirlos evita muchos errores en animaciones y videojuegos.

17.2 Posición, desplazamiento y destino

17.3 El vector entre dos puntos

El desplazamiento desde A hasta B se obtiene restando origen a destino:

Con A = (2, 1) y B = (7, 5): AB = (7−2, 5−1) = (5, 4). El orden importa: B−A apunta a B; A−B apunta exactamente en sentido contrario.

17.4 Idea geométrica

La misma flecha puede trasladarse a cualquier lugar del plano sin cambiar sus componentes. Por eso el vector (5,4) describe el mismo cambio desde cualquier posición inicial.

17.5 Componentes del desplazamiento

La componente Δx expresa el avance horizontal y Δy el avance vertical.

Un Δx positivo apunta a la derecha; uno negativo a la izquierda. Un Δy positivo apunta arriba en coordenadas matemáticas. En la mayoría de los canvas de pantalla, y crece hacia abajo: esa inversión debe tratarse conscientemente.

17.6 Distancia recorrida en línea recta

La longitud del desplazamiento es la distancia directa entre las posiciones:

Para (5,4), la distancia es √41 ≈ 6.40. Esta longitud describe cuánto separa a los puntos, no la ruta con giros que podría tomar el objeto.

17.7 Dirección normalizada

Si solo necesitamos orientar el movimiento, normalizamos el desplazamiento:

El resultado mide uno. Al multiplicarlo por una rapidez elegida, obtenemos una velocidad con dirección correcta y tamaño controlado.

17.8 De dirección a velocidad

Esta secuencia separa claramente tres ideas: hacia dónde ir, con qué rapidez y durante cuánto tiempo se actualiza el movimiento.

17.9 Movimiento independiente de cuadros

Si una velocidad se expresa en píxeles por segundo, debemos multiplicarla por el tiempo transcurrido Δt en segundos. Así, una animación conserva su velocidad aunque el navegador dibuje más o menos cuadros por segundo.

Por ejemplo, una velocidad (120, 60) aplicada durante 0.25 segundos produce el desplazamiento (30, 15).

17.10 Simulación interactiva: ve hacia el objetivo

Arrastra o modifica la posición inicial y el objetivo. El laboratorio calcula el desplazamiento, su distancia y una dirección unitaria; puedes animar el objeto para observar cómo avanza hacia el destino a rapidez constante.

17.11 Obtener una dirección en JavaScript

function direccionHacia(origen, destino) {
  const dx = destino.x - origen.x;
  const dy = destino.y - origen.y;
  const longitud = Math.hypot(dx, dy);
  if (longitud === 0) return { x: 0, y: 0 };
  return { x: dx / longitud, y: dy / longitud };
}

const origen = { x: 2, y: 1 };
const destino = { x: 7, y: 5 };
const direccion = direccionHacia(origen, destino);

console.log(`Dirección: (${direccion.x.toFixed(3)}, ${direccion.y.toFixed(3)})`);
// Dirección: (0.781, 0.625)

La comprobación de longitud cero evita dividir por cero cuando el objeto ya está en el destino.

17.12 Actualizar una posición

function direccionHacia(origen, destino) {
  const dx = destino.x - origen.x;
  const dy = destino.y - origen.y;
  const longitud = Math.hypot(dx, dy);
  if (longitud === 0) return { x: 0, y: 0 };
  return { x: dx / longitud, y: dy / longitud };
}

const posicion = { x: 10, y: 20 };
const objetivo = { x: 40, y: 60 };
const direccion = direccionHacia(posicion, objetivo);
const rapidez = 160; // píxeles por segundo
const dt = 1 / 60;

posicion.x += direccion.x * rapidez * dt;
posicion.y += direccion.y * rapidez * dt;

console.log(`Nueva posición: (${posicion.x.toFixed(3)}, ${posicion.y.toFixed(3)})`);
// Nueva posición: (11.600, 22.133)

En coordenadas de pantalla, esta fórmula sigue siendo válida: el signo de y ya está contenido en el vector calculado.

17.13 Llegar sin sobrepasar el objetivo

Un objeto puede avanzar más de lo que falta durante el último cuadro. Para evitar que oscile alrededor del objetivo, comparamos el paso con la distancia restante. Si el paso es mayor o igual, asignamos directamente la posición objetivo.

17.14 Aplicaciones

• Personajes que se mueven hacia un clic o toque.
• Proyectiles que viajan de un origen a un destino.
• Cámaras que siguen suavemente a un objeto.
• Enemigos que persiguen o evitan objetivos.
• Flechas, indicadores y minimapas orientados.
• Corrección de posición después de una colisión.
• Gestos de arrastre e interfaces con desplazamiento.

17.15 Errores comunes

• Calcular A−B cuando se quería ir desde A hacia B.
• Confundir el destino con el desplazamiento.
• Usar el desplazamiento completo como velocidad y hacer que los objetos lejanos se muevan más rápido.
• No normalizar antes de aplicar una rapidez constante.
• No tratar el caso en que origen y destino coinciden.
• Mezclar milisegundos y segundos en Δt.
• Olvidar que la coordenada y de pantalla suele estar invertida.

17.16 Qué debes recordar

• Una posición es un punto; un desplazamiento es un vector.
• AB = B−A da el vector desde A hacia B.
• Su magnitud es la distancia entre los puntos.
• Normalizar conserva solo la dirección.
• dirección·rapidez·tiempo produce un desplazamiento de animación.
• El orden de la resta define el sentido.

17.17 Conclusión

La resta de posiciones convierte una pregunta geométrica —«¿cómo llego allí?»— en un vector utilizable. Al separar desplazamiento, dirección, rapidez y tiempo obtenemos movimientos controlables y consistentes.

17.18 Próximo paso

La dirección también puede expresarse mediante un ángulo. En el próximo tema estudiaremos grados y radianes, la unidad necesaria para rotar, orientar y recorrer curvas en gráficos 2D.