@serbanghita-gamedev/quadtree
v1.0.2
Published
Quadtree
Readme
Quadtree
Quadtree implementation & demos
Usage
const area = new Rectangle(640, 480, new Point(640/2, 480/2));
const quadtree = new QuadTree(area, 3, 3);
const queryArea = new Rectangle(120, 120, new Point(randomInt(0, 640), randomInt(0, 480)));
const pointsFound = quadtree.query(queryArea);Interactive Demo
Run the interactive canvas demo:
npm run demoThis will start a Vite dev server and open your browser to http://localhost:5173/
Features:
- Click and drag to draw points on the canvas
- Watch the quadtree subdivide in real-time as you add points
- Points are displayed as red circles
- Quadtree boundaries are shown as grey lines
- View live stats showing total points and quadrants
- Clear button to reset the visualization
Available Scripts
Build
npm run buildBundles the library using esbuild.
Test
npm run testRun the test suite with Vitest.
For coverage:
npx vitest --coverageLint
npm run lintRun ESLint on the source code (requires ESLint configuration).
Demo
npm run demoLaunch the interactive quadtree visualization demo.
Benchmarks
npx vitest bench --run --testNamePattern=queryArea QuadTree.bench.tsExamples
Quadtree line example

Quadtree with maxDepth=3

Query on quadtree with maxDepth=10 (3000 points)

