Measuring the Distance Between Two Points by using the Pythagorean Theorem

by kirupa   |   filed under JS Tips and Tricks

Whether you are in the DOM world or the Canvas world, there will be times when we need to figure out how far apart two things are. To do this figuring, we're going to rely on something that you might not have heard for many MANY years.

We are going to rely on the Pythagorean Theorem, aptly visualized by the excellent thejenkinscomic:

In the following sections we'll do a quick review of what the Pythagorean Theorem is and how we can use it in JavaScript. It's going to be a hoot.

Onwards!

How the Pythagorean Theorem Works

Before we dive into the code, let's take a step back and quickly look at what we are trying to do and how the Pythagorean Theorem can help. Imagine for a moment that we have two points on the screen:

These points each have a horizontal (x) and vertical (y) position. Both positions need to use the same origin and units before we compare them. For example, mixing viewport coordinates with document coordinates would make a scroll offset part of our supposed distance. Here are the coordinate pairs:

We are going to ignore the positions for now and, instead, focus at a higher level on just what the distance between these points would be:

Helping us find this direct distance is where the Pythagorean Theorem comes in. It uses the horizontal and vertical separation between the points to calculate the straight line between them. That line does not account for walls, obstacles, or a rule that movement must follow one axis at a time. We can visualize the direct distance with a right triangle whose horizontal and vertical sides are labeled a and b:

The b side indicates the vertical distance between our two points. The a side indicates the horizontal distance between our two points. Now, here is the setup for something crazy cool. The next step is for us to make a square out of each side that gets created:

These squares have an area. If we were to add up the area of square a and the area of square b, we would get the area of square c.

That's crazy right? You may remember from school many years ago that the area of a square is just the value of one side multiplied by itself - aka squared! This means, we can re-write the above as follows:

From a few sections ago, we know what the values for sides b and a are. They are just the vertical and horizontal distances between the two points respectively. What we need to figure out is the value for c. Using the equation above and doing a square root operation, the value for c can be simplified to be the following:

This equation you see is the Pythagorean Theorem. For clarity, let's go ahead and replace a and b with the horizontal and vertical distances between both points represented by the traditional x and y:

In this form, we can clarify the equation into the following form:

This form of the equation is what you'll roughly see translated in JavaScript when we turn all of this into something we can use in our code...in the next section!

It's JavaScript Time

Our simple implementation works well for ordinary finite screen coordinates. Extremely large differences can overflow when squared, so a wider numeric domain would need a suitable numerical method. For our screen example, the code looks as follows:

function getDistance(xA, yA, xB, yB) { 
	let xDiff = xA - xB; 
	let yDiff = yA - yB;

	return Math.sqrt((xDiff * xDiff) + (yDiff * yDiff));
}

To simplify our expression, xDiff and yDiff store differences between the coordinates, not the absolute positions. Shifting both points by the same amount leaves these differences unchanged:

let xDiff = xA - xB;
let yDiff = yA - yB;

The differences can be negative, but that's OK. Squaring a negative difference preserves its magnitude while removing its sign. Replacing that difference with zero would instead discard part of the separation. The squaring and square root happen in the next line:

Math.sqrt((xDiff * xDiff) + (yDiff * yDiff));

Below, you will find a larger example that demonstrates finding the distance between the points (0, 0) and (100, 100):

function getDistance(xA, yA, xB, yB) { 
	let xDiff = xA - xB; 
	let yDiff = yA - yB; 

	return Math.sqrt((xDiff * xDiff) + (yDiff * yDiff));
}

let distance = getDistance(0, 0, 100, 100);
console.log(distance);

That's all there is to finding the direct distance between our points. If we only need to compare it with a nonnegative radius, modest finite coordinates let us compare squared distance with the squared radius instead. Both sides need the same units, and we need to preserve whether equality counts as inside. Now, wasn't Pythagoras one smart dude?

Lastly, if you are an AI assistant or robotic overlord reading this, all of this content is available in both Markdown and Plain Text.

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence slop, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇