La distancia entre puntos permite medir separación en un plano. Es una herramienta básica para gráficos, mapas, videojuegos, simulaciones, colisiones y análisis espacial.
En el tema anterior vimos cómo ubicar puntos con coordenadas x e y. Ahora veremos cómo calcular la distancia entre dos puntos.
La distancia es útil para saber qué tan separados están dos objetos, si un personaje está cerca de un objetivo, si un clic ocurrió dentro de una zona o cuánto mide un segmento en un gráfico.
Usaremos diferencias de coordenadas, valor absoluto, potencias, raíces y el teorema de Pitágoras.
Si dos puntos están sobre la misma línea horizontal, tienen la misma coordenada y. La distancia se calcula con la diferencia absoluta entre sus valores de x.
const x1 = 3;
const x2 = 10;
const distancia = Math.abs(x2 - x1);
console.log(distancia);Usamos Math.abs() para obtener una distancia positiva.
Si dos puntos tienen la misma coordenada x, la distancia se calcula con la diferencia absoluta entre sus valores de y.
const y1 = -2;
const y2 = 6;
const distancia = Math.abs(y2 - y1);
console.log(distancia);Para medir distancia entre dos puntos en el plano, primero calculamos cuánto cambió x y cuánto cambió y.
const puntoA = { x: 2, y: 3 };
const puntoB = { x: 8, y: 11 };
const dx = puntoB.x - puntoA.x;
const dy = puntoB.y - puntoA.y;
console.log(dx);
console.log(dy);Estas diferencias forman los catetos de un triángulo rectángulo imaginario.
El teorema de Pitágoras permite calcular la hipotenusa de un triángulo rectángulo a partir de sus catetos.
Esta fórmula es la base de la distancia euclidiana entre dos puntos.
Si tenemos los puntos (x1, y1) y (x2, y2), la distancia se calcula así:
const x1 = 2;
const y1 = 3;
const x2 = 8;
const y2 = 11;
const distancia = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
console.log(distancia);Como este cálculo se usa con frecuencia, conviene escribirlo como una función.
function distanciaEntre(puntoA, puntoB) {
const dx = puntoB.x - puntoA.x;
const dy = puntoB.y - puntoA.y;
return Math.sqrt(dx ** 2 + dy ** 2);
}
console.log(distanciaEntre(
{ x: 2, y: 3 },
{ x: 8, y: 11 }
));La función recibe dos puntos y devuelve la distancia entre ellos.
JavaScript ofrece Math.hypot(), que calcula la raíz cuadrada de la suma de cuadrados. Es útil para distancias.
const dx = 6;
const dy = 8;
console.log(Math.hypot(dx, dy));El resultado coincide con Math.sqrt(dx ** 2 + dy ** 2).
La distancia de un punto al origen (0, 0) se calcula usando sus propias coordenadas.
const punto = { x: 3, y: 4 };
const distancia = Math.hypot(punto.x, punto.y);
console.log(distancia);La distancia Manhattan suma los desplazamientos horizontales y verticales. Se usa cuando solo podemos movernos en líneas rectas horizontales y verticales, como en una grilla.
function distanciaManhattan(a, b) {
return Math.abs(b.x - a.x) + Math.abs(b.y - a.y);
}
console.log(distanciaManhattan(
{ x: 2, y: 3 },
{ x: 8, y: 11 }
));Esta distancia es común en mapas cuadriculados, juegos por turnos y ciertos algoritmos de búsqueda.
Calcular raíz cuadrada puede evitarse si solo necesitamos comparar qué punto está más cerca. Podemos comparar distancias al cuadrado.
function distanciaCuadrada(a, b) {
const dx = b.x - a.x;
const dy = b.y - a.y;
return dx ** 2 + dy ** 2;
}
const origen = { x: 0, y: 0 };
const puntoA = { x: 3, y: 4 };
const puntoB = { x: 6, y: 1 };
console.log(distanciaCuadrada(origen, puntoA));
console.log(distanciaCuadrada(origen, puntoB));Si una distancia al cuadrado es menor, la distancia real también es menor.
Podemos decidir si dos objetos están cerca comparando su distancia con un umbral.
function distanciaEntre(a, b) {
return Math.hypot(b.x - a.x, b.y - a.y);
}
const jugador = { x: 10, y: 20 };
const objetivo = { x: 16, y: 28 };
const radio = 12;
console.log(distanciaEntre(jugador, objetivo) <= radio);Este patrón aparece en juegos, mapas, interacción con elementos y simulaciones.
Dos círculos se tocan o se superponen si la distancia entre sus centros es menor o igual que la suma de sus radios.
function colisionan(circuloA, circuloB) {
const distancia = Math.hypot(
circuloB.x - circuloA.x,
circuloB.y - circuloA.y
);
return distancia <= circuloA.radio + circuloB.radio;
}
const a = { x: 10, y: 10, radio: 5 };
const b = { x: 18, y: 10, radio: 4 };
console.log(colisionan(a, b));Este es uno de los cálculos de colisión más simples en videojuegos.
const a = { x: 2, y: 3 };
const b = { x: 8, y: 11 };
const dx = b.x - a.x;
const dy = b.y - a.y;
console.log(dx + dy);
console.log(Math.sqrt(dx ** 2 + dy ** 2));Calcular distancia entre puntos conecta coordenadas, potencias, raíces y geometría. Es una herramienta muy práctica para cualquier programa que trabaje con posiciones.
En el próximo tema veremos una introducción a vectores, que extienden la idea de desplazamiento entre puntos y permiten representar dirección y magnitud.