18. Producto escalar y ángulo entre vectores

18.1 Introducción

En gráficos 2D necesitamos comparar direcciones: saber si un personaje mira hacia un objetivo, si dos trayectorias son perpendiculares o cuánto movimiento actúa a lo largo de un eje. El producto escalar responde estas preguntas con una sola operación.

Su resultado es un escalar, no otro vector. El signo y el tamaño de ese número contienen información geométrica sobre la relación entre las direcciones.

18.2 Definición por componentes

Dados u=(ux,uy) y v=(vx,vy), multiplicamos las componentes correspondientes y sumamos:

Si u=(4,1) y v=(2,3), entonces u·v=4·2+1·3=11.

18.3 Interpretación visual

18.4 Definición geométrica

El producto escalar también depende de las magnitudes y del coseno del menor ángulo θ entre los vectores:

Esta igualdad conecta el cálculo por componentes con la geometría. Cuando ambos vectores son unitarios, el producto escalar es directamente cos θ.

18.5 El signo y el tipo de ángulo

• u·v>0: θ es agudo; apuntan en direcciones parecidas.
• u·v=0: θ es de 90°; son perpendiculares, si ninguno es nulo.
• u·v<0: θ es obtuso; apuntan principalmente en sentidos opuestos.

El vector nulo produce producto cero con cualquier vector, pero no forma un ángulo definido porque no posee dirección.

18.6 Calcular el ángulo

Despejamos el coseno y aplicamos arcocoseno:

Para u=(4,1) y v=(2,3): |u|=√17, |v|=√13 y θ≈42.27°. JavaScript devuelve el ángulo en radianes.

18.7 Evitar errores numéricos

Por redondeo, el cociente puede quedar apenas fuera del intervalo [−1,1], donde Math.acos deja de estar definido. Debemos limitarlo:

También hay que comprobar que ninguna magnitud sea cero antes de dividir.

18.8 Vectores unitarios y similitud direccional

Si normalizamos ambos vectores, su producto queda entre −1 y 1:

Un resultado cercano a 1 indica direcciones casi iguales; cercano a 0, casi perpendiculares; y cercano a −1, casi opuestas. Esta comparación no depende de las longitudes originales.

18.9 Perpendicularidad

Dos vectores no nulos son perpendiculares si su producto escalar es cero. Por ejemplo, (3,2) y (−2,3):

En cálculos con decimales se utiliza una tolerancia, por ejemplo Math.abs(dot)<1e-9, en lugar de exigir igualdad exacta.

18.10 Delante, detrás y campo de visión

Sea f la dirección frontal normalizada de un personaje y d la dirección normalizada hacia un objetivo. Si f·d es positivo, el objetivo está en el semiplano frontal; si es negativo, está detrás.

Para un campo visual total α, el objetivo es visible cuando:

Así evitamos calcular acos en cada comprobación.

18.11 Simulación interactiva

Modifica ambos vectores. El laboratorio calcula el producto, el coseno y el ángulo, y clasifica su relación. La zona coloreada representa el menor ángulo entre ellos.

18.12 Producto escalar en JavaScript

function productoEscalar(u, v) {
  return u.x * v.x + u.y * v.y;
}

const u = { x: 4, y: 1 };
const v = { x: 2, y: 3 };
console.log(productoEscalar(u, v)); // 11

18.13 Ángulo entre vectores en JavaScript

function anguloEntre(u, v) {
  const divisor = Math.hypot(u.x,u.y) * Math.hypot(v.x,v.y);
  if (divisor === 0) return null;
  const dot = u.x*v.x + u.y*v.y;
  const coseno = Math.max(-1, Math.min(1, dot/divisor));
  return Math.acos(coseno);
}

const angulo = anguloEntre({x:4,y:1}, {x:2,y:3});
console.log((angulo*180/Math.PI).toFixed(2) + "°"); // 42.27°

18.14 Aplicaciones, errores y conclusión

El producto escalar se usa en iluminación, campos de visión, selección de caras, proyecciones, rebotes, componentes de velocidad y control de orientación.

• Confundir el resultado escalar con un vector.
• Intentar calcular un ángulo con un vector nulo.
• No limitar el coseno antes de usar acos.
• Comparar decimales exactamente con cero.
• Olvidar normalizar cuando se quiere comparar solo direcciones.
• Confundir producto escalar con producto componente a componente.

Recuerda: u·v=ux·vx+uy·vy; su signo clasifica el ángulo; y, con vectores unitarios, el resultado es cos θ.

En el próximo tema estudiaremos la proyección de vectores.