npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@slatham/quadtree

v1.0.5

Published

Basic quadtree data structure

Downloads

11

Readme

Quadtree

A simple javascript implementation of a quadtree data structure for storing 2d objects - Quadtree

For use in node or browser based projects.

Usage

Install

Use your node package manager to install, or if you're just using it in the browser, skip this.

npm install @slatham/quadtree

Import

Include in your node project

// import the module
const qt = require('@slatham/quadtree');

Or, if it is a browser-based project, include the file found in the build folder in your HTML

<html>
  <head>
    <title>My Quadtree</title>
    <script src="/path/to/build/index.js"></script>
  </head>

Define the properties of the quadtree

Set up the required properties of the quadtree

// define the area of the quadtree
// qt.Rectangle(x, y, w, h)
const area = new qt.Rectangle(0, 0, 100, 100);

// define how many points each node should hold before sub-dividing
const maxPointsPerNode = 10;

Create the quadtree

Will create a new quadtree

// create the quadtree
const qtree = new qt.Quadtree(area, maxPointsPerNode);

Insert points

Will insert a valid point into the quadtree

// define a Point object
// qt.Point(x, y, data)
const point = new qt.Point(50, 50, 'Some test data');
// insert point
qtree.insertPoint(point);

Query points

Will return a Set of Point objects for the area defined

// define an area to query
// qt.Rectangle(x, y, w, h)
const queryArea = new qt.Rectangle(25, 25, 50, 50);
// query the quadtree
const points = qtree.queryPoints(queryArea);

Get all points

Will return all points in the quadtree

// get all points simply by omitting the query area parameter on queryPoints()
const allPoints = qtree.queryPoints(); 

Examples

Two working examples can be found in the folders web_example and node_example. To run the node example, navigate to the node_example folder and run

node index.js

To run the web example that uses p5 to visualise the quadtree, open up web_example/index.html with your browser.