Compare two x and y if they are in a valid range

Question

Today my mind is a little foggy, the right thing was for me to do it the other day, but I will not, I will continue today. XD I need some help to think and find a way that works without bugs.

What I'm trying to do is compare two vector2 which are nothing else in my implementation in javascript/nodejs than an array with two floats.

I want to be able to compare if oldVector2 has any of its float x or y values ​​in a range much different from floats x and y values ​​of newVector2.

Example:

// When newVector2 is in a valid range less than 10
oldVector [0] = 1.55; // This is x
oldVector [1] = 0.22; // This is y

newVector2 [0] = 2.55; // This is x
newVector2 [1] = 1.55; // This is y

// When newVector2 is not in a valid range less than 10
oldVector [0] = 1.55; // This is x
oldVector [1] = 0.22; // This is y

newVector2 [0] = 21.55; // This is x
newVector2 [1] = 1.55; // This is y


if (the x and y of newVector2 is in a valid range less than 10 compared to the x and y of the oldVector?) {
     // You are in a valid range
} else {
     // Not in a valid range
}

My question is this: and when there are signs? Negative and positive numbers, how would this comparison compare?

what I'm trying to do here I already use abs(), I've done this before, but I did differently, because it was in unity3D that I did once, it was like this:

var distance = (a-b).magnitude; 

where a and b are two 2D vectors, here is what magnitude does https://docs.unity3d.com/ScriptReference/Vector2-magnitude.html.

Then he compared

if(distance> 10)... 

I'm confused at why I did it that way.

And the Vector2 are the position of an entity, I want to verify that it is not going faster than the permitted.

Answer 1

You need the "absolute" method: abs(). This will return a value that is always greater than or equal to zero. This way, you only have to check once for each axis:

var range = 10;

if ( abs(oldVector[0] - newVector2[0]) < range && abs(oldVector[1] - newVector2[1]) < range ) {
  // valid
}
else {
  // not valid
}

This will allow you to check if the newVector2 is within the range of the oldVector in a square pattern.

To check if the newVector2 is within the range of the oldVector in a circle pattern, which is generally desired when you want to limit the movement of an entity, you have to check the distance, we do that by using the Pythagorean theorem and we need square root method (sqrt()).

var range = 10;
var diffVector = [newVector2[0] - oldVector[0], newVector2[1] - oldVector[1]];

var distance = sqrt(diffVector[0]*diffVector[0] + diffVector[1]*diffVector[1]);

if (distance < range) {
  // valid
}
else {
  // not valid
}

Now if you need to do that often, the square root operations are typically costly on computers, so you can take a shortcut, you compare to the squared range distance:

var range = 10;
var diffVector = [newVector2[0] - oldVector[0], newVector2[1] - oldVector[1]];

var squaredDistance = diffVector[0]*diffVector[0] + diffVector[1]*diffVector[1];

if (squaredDistance < (range * range)) {
  // valid
}
else {
  // not valid
}

The first method will give you the range covered by the light blue square in the image below, while the second will give you the fuchsia circle: