12. Vectores en dos dimensiones

12.1 Introducción

Hasta ahora hemos utilizado puntos para indicar posiciones. Sin embargo, para describir un movimiento necesitamos otra idea: el desplazamiento entre una posición inicial y una posición final. Un vector representa ese desplazamiento.

Los vectores aparecen en velocidades, aceleraciones, fuerzas, direcciones de disparo, rebotes, trayectorias y transformaciones. Son una de las herramientas más importantes de la matemática aplicada a gráficos y videojuegos.

12.2 Punto, segmento dirigido y vector

Un punto P = (x, y) indica una ubicación. Si dibujamos una flecha desde P hasta Q, obtenemos un segmento dirigido. El vector asociado describe únicamente el cambio desde P hacia Q, sin quedar ligado a esa zona concreta del plano.

12.3 Componentes de un vector

En dos dimensiones escribimos un vector mediante sus componentes horizontal y vertical:

La componente vx expresa el cambio sobre el eje x y vy el cambio sobre el eje y. El vector v = (4, −3) significa avanzar cuatro unidades a la derecha y tres hacia abajo en el plano matemático.

Las componentes pueden ser positivas, negativas o cero. Un vector puede ser puramente horizontal, puramente vertical o diagonal.

12.4 De dos puntos a un vector

Dados un punto inicial A = (Ax, Ay) y un punto final B = (Bx, By), el vector que va de A hasta B se obtiene restando el inicio al final:

Para A = (2, 1) y B = (7, 4), el vector es AB = (5, 3). No es la posición de B: es el desplazamiento necesario para llegar desde A hasta B.

12.5 Aplicar un vector a una posición

Si aplicamos un vector v a un punto P, obtenemos un nuevo punto Q. Sumamos componente con componente:

Si P = (2, 1) y v = (3, −2), entonces Q = (5, −1). Esta operación es la base del movimiento por cuadros en una animación.

12.6 Dirección, sentido y longitud

Una flecha vectorial comunica tres propiedades relacionadas:

• Dirección: la línea sobre la que está orientada, por ejemplo diagonal noreste–suroeste.
• Sentido: hacia cuál de los dos lados de esa dirección apunta la flecha.
• Magnitud o longitud: el tamaño del desplazamiento.

En este tema introducimos estas propiedades para interpretar el dibujo. En los temas posteriores calcularemos longitud, normalización y ángulos con mayor detalle.

12.7 Vectores ligados y vectores libres

Un vector dibujado desde un punto concreto se denomina ligado cuando importa su punto de aplicación. Por ejemplo, una fuerza aplicada en un lugar distinto de una barra puede provocar un efecto diferente.

En la mayoría de los cálculos de movimiento utilizamos vectores libres: podemos trasladarlos sin cambiar su significado. Dos flechas son el mismo vector si poseen las mismas componentes, aunque estén dibujadas en lugares diferentes.

12.8 El vector cero

El vector cero no produce desplazamiento:

Se utiliza para representar reposo, ausencia de fuerza o una dirección todavía no calculada. Como no tiene longitud, no posee una dirección ni un sentido definidos.

12.9 Vectores horizontales y verticales

En coordenadas de pantalla la interpretación visual de la componente vertical se invierte si no transformamos el eje y: un valor de y positivo suele mover el objeto hacia abajo.

12.10 Vectores base

Los vectores básicos del plano son i = (1, 0) y j = (0, 1). Cualquier vector puede escribirse como combinación de ellos:

Por ejemplo, (4, −3) = 4i − 3j. Esta notación deja claro que un vector diagonal se obtiene combinando un cambio horizontal con uno vertical.

12.11 Simulación interactiva: crea y traslada un vector

Modifica las componentes y arrastra el punto amarillo que actúa como origen. La punta se mueve con él, mientras que el vector conserva sus componentes. Activa la copia para confirmar que la misma flecha puede dibujarse en otro punto del plano.

Prueba el vector cero y luego cambia solamente el origen. La primera acción elimina el desplazamiento; la segunda conserva exactamente la flecha, solo cambia dónde está aplicada.

12.12 Representación en JavaScript

Un objeto con propiedades x e y sirve tanto para puntos como para vectores. El nombre de la variable y el contexto indican qué representa:

const posicion = { x: 2, y: 1 };
const desplazamiento = { x: 3, y: -2 };

const nuevaPosicion = {
  x: posicion.x + desplazamiento.x,
  y: posicion.y + desplazamiento.y
};

console.log(nuevaPosicion);

El resultado es {"x":5,"y":-1}. La operación suma un vector a un punto y produce otro punto.

12.13 Obtener el vector entre dos posiciones

function vectorEntre(origen, destino) {
  return {
    x: destino.x - origen.x,
    y: destino.y - origen.y
  };
}

const jugador = { x: 3, y: 2 };
const objetivo = { x: 9, y: 5 };

console.log(vectorEntre(jugador, objetivo));

El vector resultante es (6, 3). Indica la dirección y el desplazamiento total desde el jugador hasta el objetivo, aunque todavía no especifica a qué velocidad se debe recorrer.

12.14 Vectores y movimiento por cuadros

En una animación se repite una actualización cada cuadro. Si la velocidad es un vector constante, el movimiento se formula así:

Si la velocidad es (2, 0), el objeto avanza dos unidades horizontales por cuadro. Si es (2, 1), avanza en diagonal. En los próximos temas veremos suma, escalado, longitud y normalización para controlar ese movimiento con precisión.

12.15 Aplicaciones en gráficos 2D

• Describir velocidades, aceleraciones, impulsos y fuerzas.
• Apuntar personajes, cámaras, proyectiles y partículas.
• Obtener la dirección desde un objeto hasta un objetivo.
• Expresar desplazamientos de teclado, puntero o controles táctiles.
• Calcular rebotes y respuestas a colisiones.
• Representar normales a superficies y bordes.
• Aplicar movimientos relativos dentro de jerarquías de objetos.

12.16 Errores comunes

• Confundir un vector con el punto donde se dibuja.
• Usar el punto final como si fuera una componente.
• Restar los puntos en orden inverso y obtener el vector opuesto.
• Olvidar que el vector cero no tiene dirección definida.
• Mezclar vectores expresados en sistemas de coordenadas o escalas distintas.
• Interpretar la componente y sin considerar la convención de pantalla.
• Modificar la posición cuando en realidad se quería cambiar una velocidad o desplazamiento.

12.17 Qué debes recordar de este tema

• Un vector describe un desplazamiento, no una ubicación.
• En 2D tiene componentes horizontal y vertical: v = (vx, vy).
• El vector de A hasta B es B − A.
• Aplicar v a P produce Q = P + v.
• Vectores iguales pueden dibujarse en posiciones diferentes.
• El vector cero no desplaza ni tiene una dirección definida.
• Los vectores son la base del movimiento, la dirección y muchas transformaciones 2D.

12.18 Conclusión

Los vectores separan el concepto de cambio del concepto de ubicación. Gracias a esa separación, una misma dirección puede aplicarse a cualquier objeto de una escena y reutilizarse para movimiento, orientación o cálculos geométricos.

En el próximo tema aprenderemos a sumar y restar vectores para combinar desplazamientos y comparar direcciones.