codingtrain / quadtree

A QuadTree Example for JavaScript (with p5.js)

A QuadTree example (and almost sort of a JavaScript library) with p5.js.

QuadTree

• QuadTree on wikipedia
• QuadTree pseudo-code
• QuadTree video tutorial 1
• QuadTree video tutorial 2
• QuadTree video tutorial 3

How to use

• You can download and include quadtree.js in your p5 sketch or refer to it via this CDN link:

<script src="https://cdn.jsdelivr.net/gh/CodingTrain/QuadTree/quadtree.js"></script>

Once you've include the library you can create a QuadTree object a Rectangle boundary and maximum capacity:

const r = new Rectangle(0, 0, width, height);
const capacity = 4;
const quadtree = new QuadTree(r, capacity);

Testing

To run tests use one of the following commands

For continuous testing

npm run test-watch

For a single run test, with coverage

npm run test

This will output to the coverage folder where you can few test coverage by opening index.html

Other QuadTree libraries in JS

• quadtree-js
• d3-quadtree

Other Versions

Ports to other languages

• Carla de Beer (Processing port) - GitHub
• Alix Poulsen (Kit port) - Github

quadtree's Issues

bounding box

Hello
i have a question, well what if we are dealing with floating point (x,y) and floating (w,h) sometimes if we keep dividing we end up with points refusing to be inserted what is the solution for this??

Comments

Simply commenting the code to explain functions and classes, especially when they were changed from the tutorial (video) version.

Function to clear QuadTree

Rename main branch

Hey @shiffman! I was hoping I could ask for a second of your time to rename the primary branch of this repository. It's very easy to do in the settings of this repository, which I don't have access to.

The p5 repository has gone with main and I also like dev but I leave it up to you.

Thanks!

How I delete a point of the quadtree?

Hey, I'm using your quadtree project in my game, (btw is in my github is called 'rogue'), but sometimes I need to delete some objects but I'm not realizing how to do that, could you help me?

error in QuadTree.closest() function

in this function when, after the "Limit to number of points in this QuadTree" comment, the lines are:
if (this.length == 0) { return []; } if (this.length < count) { return this.points; }

But there is no this.length.

I think it should be
if (this.points.length == 0) { return []; } if (this.points.length < count) { return this.points; }

License?

What is the license for this project? Is it MIT, just as with the Coding Train coding challenge code? Could you add a license file, please?

Allow default boundary and capacity

In almost all cases the boundary is the size of the canvas so QuadTree could pick that up automatically. And we could also use a default capacity size of 8 (?).

Redistribute current points to children when subdividing

Although the Wiki implementation does not do it but the tree gets better when you move all the points in the current item to its children when subdividing (and redirect all further insert to its children).
In the end points will only reside in the leaves of the tree.

When using the current implementation there are many points being queried that are not even close to the searched range. For instance the points in the root element are always queried no matter where you search. When redistributing to the child nodes you can save about 50% off the points you need to query.

Project roadmap

Hello folks,

I know this is a project made after the 2 hours Daniel spent to make the QuadTree videos, but I think it could either benefit from either:

• Being renamed to QuadTreeExample (because it's definitely just a bunch of examples, at least for now 😄 )
• Split into smaller packages.

Just saying this because we have very common classes here (Point, Rectangle…) that could be used as simple geometry for any kind of project based on a canvas, and the QuadTree one that depends on the Geometry one.

Or then rename this project to Geometry and put everything in it in separate files 🤣 .

What do you think?

QuadTree operations

A list of all the possible operations that can be implemented

• Add point
• Get points in range
• Get all points (can be used to optimize the above) (forEach)
• Get the closest to a point (given point x will return the inserted point y with smallest distance(x, y))
• Remove point (#62)
• Remove points in range (#62)
• Move point see this comment
• Merge quadtrees

(open for more suggestions)

Crash (infinite loop?) in visualize_qtree

I don't know the cause of this yet but there is a crash in visualize_qtree.

I think it's hitting an infinite loop somewhere but I haven't been able to find where yet. It seems to happen near the top of the canvas when you only have one point near the edge of the circle.

Just adding this as a placeholder. Will continue looking for the infinite loop.

EDIT

OK, found it.

In quadtree.js, closest function.

If point has 0 points with the maxDistance then, during the binary search the inner radius will get asymptotically close to maxDistance but limit is never adjusted and so the search will never end.

Creating a PR for it now.

npm run testError: Cannot find module '...QuadTree\node'

fresh clone. node v10.18.0

logical problem in "intersect" function

original written function:

intersects(range) {
    return !(
      this.right < range.left || range.right < this.left ||
      this.bottom < range.top || range.bottom < this.top
    );
  }

when checking for intersection of top or bottom of two rectangles, in the function above, there can be some cases when two regions intersect from top or bottom.
what I think must be written instead:

 public boolean intersects(range) {
        return !(
                this.right < range.left || range.right < this.left ||
                       **this.bottom > range.top || range.bottom > this.top**
        );
    }

Repl.it Button

I want to look into adding a button or link to the README that opens up a Repl.it with p5 and this library reconfigured.

Example of this in another repository: Rustlings.

Boundary Check

I noticed that when you do the boundary check, you have placed "<=" or ">=" everywhere. This will make a point on the center of a quadtree being distributed to all its four subtrees.

Namespace QuadTree system

As suggested in #37
We should move QuadTree classes into namespaces
As recommended by @shiffman, one of

• QuadTree
• qt
• qt5

[QUESTION] Quadtree for pathfinding?

Hi, not really a bug here!
I'm kinda into pathfinding right now and trying to get good ways of improve performance of it...
well I know A* is largely used everywhere and I know how to use it. But I've only used it with grids... what about (nav)meshes or quad-trees? Is this possible? Could someone provide some guidance?

BTW: I don't know if there is a request section on CodeTraining :P but I wanted to know how could one implement such a thing... maybe quad-trees would be a simpler challenge to start with as creating meshes (even from a bunch of straight rectangles combined + holes in it would be extremely complex).

bundle and release as library?

As discussed in #4 I'm considering whether it makes sense to break this out into multiple classes and then bundle and release as a library? At the moment, I can access it via:

https://cdn.jsdelivr.net/gh/CodingTrain/QuadTree/quadtree.js

I'm going to make a p5 web editor example and reference it this way as a start...