Distance between objects

Function ready to be used

const getDist = (a, b) => Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2)); 

The Pythagorean Theorem

The Pythagorean Theorem - a math rule written asa² + b² = c².

We have 2d coordinate system and two points in it. Points have their own coordinates A(x, y) and B(x, y).

Let's say point A has such coordinates (2, 2) and point B has such coordinates(8, 10).

const A = {
 x:2, 
 y:2
}; 
const B = {
 x:8, 
 y:10
}; 

console.log(A, B); // {x: 2, y: 2} {x: 8, y: 10}

The Pythagorean Theorem helps us with the lengths of the sides of a triangle. In our case, when we connect Point A and Point B and draw lines from Point A to B along the horizontal (x-axis) and vertical (y-axis) directions, it forms a triangle.

To find the lengths of these sides, we use the theorem. The longest side, called the hypotenuse, represents the distance between the two points.

Lengths between A and B

To find the distance between points A and B on the x-axis, we subtract their x-coordinates: A.x - B.x = 2 - 8 = -6. Similarly, the distance between A and B on the y-axis is calculated by subtracting their y-coordinates:(A.y - B.y) = (2 - 10) = -8.

const A = {
 x:2, 
 y:2
}; 
const B = {
 x:8, 
 y:10
}; 

const xLength = A.x - B.x; // 2 - 8 = -6
const yLength = A.y - B.y; // 2 - 10 = -8

console.log(xLength, yLength); // -6, -8

Working with negative distances can be tricky, so we can make them positive by using theMath.abs() method to get the absolute (positive) value of the number.

const A = {
 x:2, 
 y:2
}; 
const B = {
 x:8, 
 y:10
}; 

const xLength = Math.abs(A.x - B.x); // [2 - 8] = 6
const yLength = Math.abs(A.y - B.y); // [2 - 10] = 8

console.log(xLength, yLength); // 6 8

Get distance between points

Now, let's find the distance between two points using the Pythagorean Theorem. In our triangle, the lengths of the legs are a = 6 and b = 8.

We can use the Pythagorean Theorem, which is expressed as: a² + b² = c²So, 6² + 8² = 36 + 64 = 100 = c²

To make calculations easier, let's use the Math.pow() method from the Math class to raise numbers to the power of 2 (square them):

Math.pow(x, y) = x^y - returns the value of x to the power of y.

const A = {
 x:2, 
 y:2
}; 
const B = {
 x:8, 
 y:10
}; 

const xLength = Math.abs(A.x - B.x); // [2 - 8] = 6
const yLength = Math.abs(A.y - B.y); // [2 - 10] = 8

const PythagorasTheoremValue = Math.pow(xLength, 2) + Math.pow(yLength, 2); // (6 * 6) + (8 * 8) = 100

console.log(PythagorasTheoremValue); // 100

However, this result (100) is the length squared, so we need to find the square root of 100, which is the final distance.

To do this, we can use the Math.sqrt() method from the Math class:

Math.sqrt(x) - returns the square root of a x.

const A = {
 x:2, 
 y:2
}; 
const B = {
 x:8, 
 y:10
}; 

const xLength = Math.abs(A.x - B.x); // [2 - 8] = 6
const yLength = Math.abs(A.y - B.y); // [2 - 10] = 8

const PythagorasTheoremValue = Math.pow(xLength, 2) + Math.pow(yLength, 2); // (6 * 6) + (8 * 8) = 100
const distanceBetweenAandB = Math.sqrt(PythagorasTheoremValue); 

console.log(distanceBetweenAandB); // 10

The distance between two points A(2, 2) and A(8, 10) is 10 units.

Creating a Reusable Function

Let's make a function to reuse this in the future.

function getDist(a, b){
 const xLength = Math.abs(A.x - B.x); 
 const yLength = Math.abs(A.y - B.y); 

 const PythagorasTheoremValue = Math.pow(xLength, 2) + Math.pow(yLength, 2); 
 const distanceBetweenAandB = Math.sqrt(PythagorasTheoremValue); 

 return distanceBetweenAandB; 
}

const A = {
 x:2, 
 y:2
}; 
const B = {
 x:8, 
 y:10
}; 

const distance = getDist(A, B); 

console.log(distance); // 10

Simplified Function

Now we know how getDist() works inside. Let's make it smaller.

const getDist = (a, b) => Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2));