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

superquad

v1.2.2

Published

Superquad is yet another quadtree implementation for JavaScript that hopes to provide some additional functionality on top of standard quadtree implementations.

Downloads

5

Readme

NPM version Known Vulnerabilities npm NPM downloads Gitter

Install

Superquad is offered as both a Node package and an ES6 module. To download Superquad through npm, use:

$ npm install superquad

and to use it, you can either require it or import it if you're in a browser environment:

In Node.js:

const Superquad = require('superquad');

In a browser environment:

// Browser
import Superquad from 'node_modules/superquad/superquad.js';

// Webpack
import Superquad from 'superquad';

Usage

To create a new instance of Superquad, you have to supply at minimum the width and height of the quadtree:

const dimensions = {
  width: 1024,
  height: 768
};

const superquad = new Superquad(dimensions);

Now let's say you want to customize Superquad further and adjust the number of objects a quad can hold before it splits:

const dimensions = {
  width: 1024,
  height: 768
};

const options = {
  maxObjects: 20
};

const superquad = new Superquad(dimensions, options);

The complete layout of initialization parameters is as follows:

| param | type | description | default | |------------------- |-------- |--------------------------------------------------------------------------------------------------------------------------- |--------- | | bounds | Object | | | | bounds.x | number | The x position of the top left point of the quad. This should only be set if you're working with negative position values. | 0 | | bounds.y | number | The y position of the top left point of the quad. This should only be set if you're working with negative position values. | 0 | | bounds.width | number | The width of the quadtree. | | | bounds.height | number | The height of the quadtree. | | | options | | | | | options.maxObjects | number | The amount of objects a quad can hold before it splits into 4 sub-quads | 10 | | options.maxLevels | number | The number of sub-quads a quad can have. | 4 |

API

add

Adds an object to the quadtree by specifying the space that it occupies.

| param | type | description | default | |--------------- |-------- |--------------------------------- |--------- | | bounds | Object | The bounds of the object to add | | | bounds.x | number | The x position of the object | | | bounds.y | number | The y position of the object | | | bounds.width | number | The width of the object | | | bounds.height | number | The height of the object | |

So to add an object to the quadtree at (150, 200) with a width of 50 and a height of 75, you would do:

superquad.add({ x: 150, y: 200, width: 50, height: 75 });

Now because it takes an object of bounds specification, if your game objects automatically include this information you can just add the whole game object. However, when retrieving objects from the quadtree all of the extra data will not be present.

get

Gets any objects that are in the same sub-quad as the provided bounds. These are not guaranteed to be collisions so you will have to check for collisions manually.

| param | type | description | default | |--------------- |-------- |---------------------------------------- |--------- | | bounds | Object | The bounds to check for nearby objects | | | bounds.x | number | The x position of the bounds | | | bounds.y | number | The y position of the bounds | | | bounds.width | number | The width of the bounds | | | bounds.height | number | The height of the bounds | |

const possibleCollisions = superquad.get({ x: 5, y: 10, width: 50, height: 50 });

getIntersections

Gets any objects whose bounds intersect with the bounds provided. This does return objects that collide with the provided bounds but if your object is circular this is not very accurate as it checks for rectangular collision only.

| param | type | description | default | |--------------- |-------- |---------------------------------------- |--------- | | bounds | Object | The bounds to check for nearby objects | | | bounds.x | number | The x position of the bounds | | | bounds.y | number | The y position of the bounds | | | bounds.width | number | The width of the bounds | | | bounds.height | number | The height of the bounds | |

const intersections = superquad.getIntersections({ x: 5, y: 10, width: 50, height: 50 });

getPoints

Works in a similar fashion to getIntersections but instead it returns objects that collide with the bounds only if the objects are points (no width and no height).

| param | type | description | default | |--------------- |-------- |---------------------------------------- |--------- | | bounds | Object | The bounds to check for nearby points | | | bounds.x | number | The x position of the bounds | | | bounds.y | number | The y position of the bounds | | | bounds.width | number | The width of the bounds | | | bounds.height | number | The height of the bounds | |

const points = superquad.getPoints({ x: 5, y: 10, width: 50, height: 50 });

clear

Clears all objects from the each quad in the quadtree.

superquad.clear();

Acknowledgements

This package is based on Timo Hausmann Quadtree implementation and also JamesMilnerUK's Go Quadtree implementation.

License

MIT