CorentinTh/quadtree-js — 82★ on GitHub (TypeScript). A simple quadtree implementation for javascript and typescript (nodejs or browser).
Snapshot summary built from the project's own GitHub metadata — there's no written TopGit review yet. The page will update automatically when a full review is published.
WHY NO REVIEW YET
TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then — see the READ ME tab for the original README in full.
// Create the bounding area of the quadtree (x, y, width, height)
const boundingArea = new Box(0, 0, 1000, 1000);
// Instantiate the new quadtree
const quadtree = new QuadTree(boundingArea);
You can also specify the following optional parameters:
// Create the bounding area of the quadtree (x, y, width, height)
const boundingArea = new Box(0, 0, 1000, 1000);
const config = {
capacity: 10, // Specify the maximum amount of point per node (default: 4)
removeEmptyNodes: true, // Specify if the quadtree has to remove subnodes if they are empty (default: false).
maximumDepth: 5, // Specify the maximum depth of the quadtree. -1 for no limit (default: -1).
// Specify a custom method to compare point for removal (default: (point1, point2) => point1.x === point2.x && point1.y === point2.y).
arePointsEqual: (point1, point2) => point1.data.foo === point2.data.foo
};
// An array of point to insert directly (same as quadtree.insert(points) )
const points = [new Point(10, 10), new Point(52, 64)];
const quadtree = new QuadTree(boundingArea, config, points);
Insert
You can insert a Point element, an array of Point element, your own element as long as it has an x and a y property or an array of custom element.
const point = new Point(10, 25);
const pointArray = [
new Point(45, 22),
new Point(30, 60),
new Point(14, 12)
];
const customPoint = {
x: 94,
y: 23,
customField:{}
};
quadtree.insert(point);
quadtree.insert(pointArray);
quadtree.insert(customPoint);
You can add your data in a Point element:
const myData = {
foo: 'bar'
};
const point = new Point(50, 50, myData);
console.log(point.data.foo); // 'bar'
Remove
As the insert method, you can remove a Point element, an array of Point element, your own element as long as it has an x and a y property or an array of custom element.
By default, points having the same x and y values will be removed. To override this behavior, add a method under arePointsEqual in the config of the quadtree that takes two points in parameters and return a boolean if the points are equal.
Example: const quadtree = new QuadTree(boundingArea, {arePointsEqual: (point1, point2) => point1.data.foo === point2.data.foo});
const point = new Point(10, 25);
const pointArray = [
new Point(45, 22),
new Point(30, 60),
new Point(14, 12)
];
const customPoint = {
x: 94,
y: 23
};
quadtree.remove(point);
quadtree.remove(pointArray);
quadtree.remove(customPoint);
Note: it doesn't have to be the same object, the test is done with the coordinates.
Query
Use the query method to get all the point within a range.
// This will return all the points in the given Box (x, y, width, height)
const points = quadtree.query(new Box(10, 10, 100, 100));
// This will return all the points in the given Circle (x, y, radius)
const points = quadtree.query(new Circle(10, 10, 100));
You can use a Box or a Circle as a range or even your own range element as long as it has the following methods:
contains: return true if a point is within this range, false otherwise.
intersects: return true if a Box intersects with this range, false otherwise.
See the Box definition for a good example.
Get all the point
If want to retrieve all the point, you can use this method:
const points = quadtree.getAllPoints();
Note: you may want to store your points in a side array since, it have to look trough all the child nodes.
Get Tree
You can get the amount of points by nodes with the getTree() method.
How does CorentinTh/quadtree-js compare to other Frontend projects?
CorentinTh/quadtree-js is tracked by TopGit in the Frontend category, with 82 GitHub stars and written in TypeScript. Browse the Frontend topic page on TopGit to compare it against similar projects by stars and activity.
Is CorentinTh/quadtree-js open source?
Yes — CorentinTh/quadtree-js ships under the MIT license, which makes its source code freely readable (and, depending on license terms, forkable and reusable). Source: github.com/CorentinTh/quadtree-js.
What else is in the Frontend space?
CorentinTh/quadtree-js is tracked by TopGit under the Frontend category, alongside 9 GitHub-tagged topics. Trending and Topics pages list peer repositories of comparable stars and language.
What is CorentinTh/quadtree-js?
CorentinTh/quadtree-js (CorentinTh/quadtree-js) is a TypeScript project on GitHub. From the project's own README: A simple quadtree implementation for javascript and typescript (nodejs or browser).
Where do I read more about CorentinTh/quadtree-js?
This TopGit page is a snapshot — the READ ME tab shows the project's own README content (links stripped, images preserved). The GitHub repository at github.com/CorentinTh/quadtree-js is the definitive source.
Why is CorentinTh/quadtree-js categorized under Frontend?
TopGit places CorentinTh/quadtree-js in the Frontend category based on its GitHub topics and description (tagged: "intersects", "javascript", "js"). Categories are assigned from real repository metadata, not editorial guesswork.
Read full README in the tab above.
Curious whether quadtree-js is right for you?
Let ChatGPT, Claude, or Perplexity look into it — click below and see what AI actually says about quadtree-js.
/quadtree-js
