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

warp-field

v2.0.2

Published

Portal-casting field-of-view algorithm

Downloads

30

Readme

WarpField

Dependencies Node.js CI License

Portal-casting field-of-view algorithm

See the demo

This is an extension to the simpler WallyFOV shadow-casting algorithm.

Installation

npm install warp-field

Usage

Create a map:

const WarpField = require('warp-field');

const width = 5;
const height = 5;
const map1 = new WarpField.FieldOfViewMap('map1', width, height);

Add some walls and bodies:

map1.addWall(3, 2, WarpField.CardinalDirection.NORTH);
map1.addWall(3, 1, WarpField.CardinalDirection.WEST);
map1.addWall(3, 2, WarpField.CardinalDirection.SOUTH);
map1.addBody(4, 2);

Create another map:

const width = 5;
const height = 5;
const map2 = new WarpField.FieldOfViewMap('map2', width, height);
map2.addWall(3, 2, WarpField.CardinalDirection.SOUTH);
map2.addBody(2, 4);

Add a warp from one map to the other:

map1.addWarp(3, 2, WarpField.CardinalDirection.EAST, map2, 1, 2);

Compute the field of view:

const playerX = 2;
const playerY = 2;
const visionRadius = 2;
const fov = WarpField.computeFieldOfView(fovMap, playerX, playerY, visionRadius);

See which tiles are visible:

// NOTE: coordinates are relative to the player
fov.getVisible(2, 0); // -> true
fov.getVisible(1, -1); // -> false

Locate each visible tile:

fov.getTargetMap(1, 0); // -> map1
fov.getTargetOffset(1, 0); // -> {x: 3, y: 2}
fov.getTargetMap(2, 0); // -> map2
fov.getTargetOffset(2, 0); // -> {x: 1, y: 2}

Upgrading to version 2

Some API changes were made for version 2, here's what you need to do to upgrade:

  • The Direction enumeration has been renamed to CardinalDirection
  • Instead of calling fovMap.getFieldOfView(x, y, radius), call WarpField.computeFieldOfView(fovMap, x, y, radius)
  • Instead of calling fov.get(x, y), call fov.getVisible(dx, dy)
  • IMPORTANT: getVisible() takes coordinates relative to the player's position - not absolute map coordinates!

If you're using TypeScript, some of the type names have changed. For instance, the type for the field of view is now FieldOfView instead of MaskRectangle.

Details

WarpField works by scanning the four quadrants around the player, tracking the angles visible from the center of the player tile. A tile is considered visible if there exists an uninterrupted ray from the player center to any point in the tile. Bodies almost (but don't quite) fill the tile, to cover some conspicuous "corner" cases.

Example Image

In this example image, the shaded tiles are not seen. Blue lines represent edges of the shadows at various stages of the algorithm. Dashed lines indicate where a shadow edge is very slightly shifted because it was created by a body.

WarpField also supports warps (a.k.a. portals) from one map to another:

Example Image

This is an example of a "staircase" portal scenario. The red shared areas indicate the "second floor". There is a portal leading from the first floor to the second. The player walks around the wall enclosing the staircase, and can see the second floor through the portal. Passing through the portal, the player looks around the wall again to find a different map.

For more information, see the Algorithm Overview.