Sort BoundingBoxes for Fun (in TypeScript)

There is no reason for this post other than that I wanted to code something fun again!

So come along and let us sort some boxes in a 2D-Plane based on their centers distance, shall we?

What Are We Doing?

We have boxes in a 2D-Plane. It looks a little bit like this:

 y
 ^
 |   __________
 |  |  Box 3   |
 |  |__________|
 |   __________
 |  |  Box 2   |
 |  |__________|
 |   __________
 |  |  Box 1   |
 |  |__________|
 |-----------------------------> x
Origin (0,0)

We want to sort them by their distance to the bottom left corner (0,0).

Define the Type

A BoundingBox has a name for better identification after sorting, a center and the coordinates of all four corners.

type BoundingBox = {
    name: string;
    center: {x: number; y: number};
    xmin: number;
    ymin: number;
    xmax: number;
    ymax: number;
}

// While we are at it: Define all the BoundingBoxes we need
let boundingBox0: BoundingBox = {
    name: "zero zero",
    center: {x: 0, y: 0},
    xmin: 0,
    ymin: 0,
    xmax: 0,
    ymax: 0
}

let boundingBox1: BoundingBox = {
    name: "first",
    center: {x: 0, y: 0},
    xmin: 0,
    ymin: 0,
    xmax: 6,
    ymax: 2
}

let boundingBox2: BoundingBox = {
    name: "second",
    center: {x: 0, y: 0},
    xmin: 0,
    ymin: 3,
    xmax: 6,
    ymax: 5
}

let boundingBox3: BoundingBox = {
    name: "third",
    center: {x: 0, y: 0},
    xmin: 0,
    ymin: 6,
    xmax: 6,
    ymax: 8
}

Calculate the Center of a BoundingBox

Now it is time to calculate the center of a BoundingBox.
The formula for x is ((xmax - xmin) / 2) + xmin.
Repeat for y.

function calculateCenter(bB: BoundingBox) {
    let c = {x: 0, y: 0};

    let xc = ((bB.xmax - bB.xmin) / 2) + bB.xmin;
    let yc = ((bB.ymax - bB.ymin) / 2) + bB.ymin;

    c.x = xc;
    c.y = yc;

    return c;
}

boundingBox1.center = calculateCenter(boundingBox1)
boundingBox2.center = calculateCenter(boundingBox2)
boundingBox3.center = calculateCenter(boundingBox3)

console.log(boundingBox1.center);
console.log(boundingBox2.center);
console.log(boundingBox3.center);

Calculate the Distance Between Two Points

Now we finally need some math knowledge. The distance between two points is defined by the square root of both the distances of x times two plus the distances of y times two.

function calculateDistance(bB1: BoundingBox, bB2: BoundingBox) {
    return Math.sqrt(Math.pow(bB1.center.x - bB2.center.x, 2) + Math.pow(bB1.center.y - bB2.center.y, 2))
}

console.log(calculateDistance(boundingBox1, boundingBox2));
console.log(calculateDistance(boundingBox1, boundingBox3));
console.log(calculateDistance(boundingBox2, boundingBox3));

You Said We Are Sorting!

We will use Array.prototype.sort() which needs a comparator-function.

This is not the most elegant one I could come up with, but it is straight forward and understandable!

We are sorting ascending based on the distance to our origin boundingBox0. So when we sort a random array of our three BoundingBoxes they should come out in the order first, second, third.

function comparator(b1: BoundingBox, b2: BoundingBox): number {
    let d1 = calculateDistance(boundingBox0, b1);
    let d2 = calculateDistance(boundingBox0, b2);

    if (d1 > d2) return 1;
    if (d1 < d2) return -1;
    return 0;
}

let sortMe = [boundingBox1, boundingBox2, boundingBox3]
let sortMe2 = [boundingBox2, boundingBox3, boundingBox1]
sortMe.sort(comparator);
sortMe2.sort(comparator);

console.log(sortMe)
console.log(sortMe2)

Did You Have Fun?

If not: Why read all of it ;).

Either way, I had a lot of fun coding this together and if you want to play around with the code. I got you covered: Playground Link

UPDATE: I changed the ASCII coordinate system to be more understandable.