5. Distancia entre dos puntos

5.1 Introducción

Conocer las posiciones A y B no nos dice de inmediato qué tan lejos están. Para medir su separación necesitamos un valor que no dependa de la orientación: la distancia. Esta medida siempre es cero o positiva y se expresa en las mismas unidades que las coordenadas.

En una escena, la distancia puede decidir si un personaje alcanzó un objetivo, si el puntero está cerca de un control o si dos objetos circulares se tocan.

5.2 La idea geométrica

Dados A = (x₁, y₁) y B = (x₂, y₂), la diferencia horizontal y la diferencia vertical forman los catetos de un triángulo rectángulo. El segmento directo entre A y B es su hipotenusa.

5.3 Diferencias horizontal y vertical

Primero restamos las coordenadas correspondientes. El orden elegido no cambia la distancia final porque las diferencias se elevan al cuadrado.

Si A = (2, 1) y B = (7, 5), entonces Δx = 5 y Δy = 4. Estos valores describen cuánto habría que desplazarse horizontal y verticalmente para ir de A hasta B.

5.4 El teorema de Pitágoras

En un triángulo rectángulo, el cuadrado de la hipotenusa es igual a la suma de los cuadrados de los catetos:

Sustituyendo las diferencias obtenemos la fórmula general:

5.5 Ejemplo paso a paso

Calculemos la distancia entre A = (1, 2) y B = (5, 5):

Este es el conocido triángulo 3-4-5. Aunque A y B se encuentren en otros cuadrantes, el procedimiento es exactamente el mismo.

5.6 Propiedades de la distancia

• No es negativa: distancia(A, B) ≥ 0.
• Es cero solo al coincidir: distancia(A, B) = 0 si A = B.
• Es simétrica: distancia(A, B) = distancia(B, A).
• Es la ruta recta más corta: cualquier desvío entre A y B es igual o más largo.
• Respeta la escala: si duplicamos todas las coordenadas, la distancia también se duplica.

5.7 Simulación interactiva: mide y compara

Arrastra los puntos A y B. La simulación dibuja el triángulo rectángulo, calcula Δx, Δy y la distancia, y comprueba si B se encuentra dentro del alcance circular definido alrededor de A.

Intercambiar A y B cambia los signos de Δx y Δy, pero no modifica la distancia. Esto permite comprobar visualmente su propiedad simétrica.

5.8 Cálculo en JavaScript

Math.hypot calcula la raíz cuadrada de la suma de cuadrados y expresa directamente la intención del programa:

function distancia(a, b) {
  const dx = b.x - a.x;
  const dy = b.y - a.y;
  return Math.hypot(dx, dy);
}

const a = { x: 1, y: 2 };
const b = { x: 5, y: 5 };

console.log(distancia(a, b));

También podría escribirse Math.sqrt(dx * dx + dy * dy). Ambas expresiones producen el mismo resultado.

5.9 Comparar sin calcular la raíz

Cuando solo necesitamos saber si una distancia es menor que un límite, podemos comparar los cuadrados. Así evitamos calcular una raíz cuadrada en cada comprobación.

function estaDentroDelAlcance(a, b, alcance) {
  const dx = b.x - a.x;
  const dy = b.y - a.y;
  return dx * dx + dy * dy <= alcance * alcance;
}

console.log(
  estaDentroDelAlcance({ x: 0, y: 0 }, { x: 3, y: 4 }, 5)
);

Esta optimización resulta útil al comprobar miles de partículas, enemigos o puntos en cada cuadro.

5.10 Distancia en píxeles y en unidades del mundo

La fórmula funciona en cualquier unidad, pero ambos puntos deben pertenecer al mismo sistema. Si un punto está en metros del mundo y otro en píxeles de pantalla, el resultado no tendrá un significado válido.

Con una escala de 20 píxeles por unidad, una distancia de 5 unidades se muestra como 100 píxeles. El zoom altera el tamaño visual, pero no la distancia lógica del mundo.

5.11 Distancia euclídea y otras métricas

La fórmula estudiada calcula la distancia euclídea, es decir, la longitud de la línea recta. No es la única manera de medir separación.

La métrica correcta depende de los movimientos permitidos y de la geometría del problema.

5.12 Aplicaciones en gráficos 2D

• Comprobar si dos centros circulares están lo suficientemente cerca para colisionar.
• Determinar si un enemigo puede detectar o atacar al jugador.
• Seleccionar el punto o control más cercano al puntero.
• Medir cuánto falta para llegar a un destino.
• Ordenar objetos por proximidad.
• Limitar un objeto al interior de un radio.
• Calcular longitudes de segmentos y recorridos.

5.13 Errores comunes

• Sumar Δx y Δy sin elevarlos al cuadrado.
• Olvidar la raíz cuadrada cuando se necesita la distancia real.
• Comparar una distancia al cuadrado con un alcance sin elevarlo también al cuadrado.
• Mezclar coordenadas de sistemas o escalas diferentes.
• Utilizar valores absolutos como sustituto de la distancia euclídea.
• Redondear las coordenadas antes del cálculo y perder precisión.
• Confundir la distancia entre centros con la separación entre los bordes de dos figuras.

5.14 Qué debes recordar de este tema

• Las diferencias Δx y Δy forman los catetos de un triángulo rectángulo.
• La distancia es √(Δx² + Δy²).
• La distancia nunca es negativa y es igual en ambos sentidos.
• Math.hypot(dx, dy) implementa directamente el cálculo.
• Para comprobar alcance puede compararse la distancia al cuadrado.
• Los puntos deben estar expresados en el mismo sistema y unidad.
• La distancia euclídea mide el camino recto entre los puntos.

5.15 Conclusión

La distancia convierte dos posiciones en una medida única de separación. Su relación con Pitágoras permite comprender la fórmula y aplicarla correctamente en problemas de proximidad, alcance y movimiento.

En el próximo tema utilizaremos las coordenadas de dos extremos para encontrar el punto medio de un segmento.