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

verlet-system

v1.0.15

Published

2D and 3D verlet integration

Downloads

16

Readme

verlet-system

stable

img

A tiny 2D/3D verlet physics system.

var Point = require('verlet-point')
var array = require('array-range')
var random = require('randf')

//create a world where points stay within window bounds
var world = require('verlet-system')({ 
    gravity: [0, 500],
    min: [0, 0],
    max: [width, height]
})

//create 500 points scattered around page
var points = array(500).map(function() {
    return Point({ 
        position: [ random(0, width), random(0, height) ]
    })
})

//draw our scene
fuction render() {
    //step the physics
    world.integrate(points, dt)
    
    drawPoints(points)
}

Typically used alongside verlet-constraint and verlet-point.

By default, assumes 2D and points with [x, y]. You can require an explicit dimension like so:

var World2D = require('verlet-system/2d') //points [x, y]
var World3D = require('verlet-system/3d') //points [x, y, z]

PRs for fixes/improvements welcome.

demos

See the demos folder. The demos are run with beefy.

points

You can use verlet-point, or just bare objects with the following structure:

var point = {
    position: [x, y],     //required
    previous: [x, y],     //required
    acceleration: [x, y], //required
    mass: 1               //optional, will default to 1.0
    radius: 25            //optional, will default to 0.0
}

Points with a mass of 0 are considered "unmovable". radius is used for collision testing against min and max, but different applications may choose to ignore this.

bounded collisions

Collisions are ignored unless you set a min and/or max vector on the system (with the same number of components as the rest of your points). This will lead to particles 'bouncing' off the collision box. If a component is not a number, it will be ignored (i.e. act as infinity). For example, to allow particles to flow freely horizontally, but restrict them to the 2D window vertically, you might do this:

world.min = [null, 0]
world.max = [null, height]

You can also specify a radius on points which will get used in the collision testing. See demo/bounce.js. By default, min and max are null objects, and no collisions are computed.

Usage

NPM

system = require('verlet-system')([opt])

Creates a new system with the specified options.

  • gravity a vector describing the gravity of this system, defaults to a zero vector
  • min the minimum bounds vector, defaults to null (i.e. negative infinity)
  • max the maximum bounds vector, defaults to null (i.e. positive infinity)
  • friction the air friction, defaults to 0.98
  • bounce the friction with collision edges, i.e. "bounciness", defaults to 1.0

system.integrate(points, step)

Integrates the list of "points" with the given step (typically in seconds).

system.integratePoint(point, step)

Integrates a single "point".

running demos

git clone https://github.com/mattdesl/verlet-system.git
cd verlet-system
npm install

# if you haven't got these tools,
# install them globally
npm install browserify beefy uglify-js -g

# now run or build any of the demos
npm run line 
npm run triangulate

npm run build-line
npm run build-triangulate

Should work with any tool that consumes CommonJS (i.e. jspm, DuoJS, browserify, webpack).

comparisons

This is not meant to be as feature-complete as choices like verlet-js, PhysicsJS, or matter-js. Some novel goals of this project:

  • works in 2D or 3D
  • no assumptions about rendering (i.e. works in WebGL, SVG, etc)
  • no assumptions about interactions or geometries
  • tiny and modular (3kb-6kb depending on what you require), e.g. you may not need constraints (as in the triangulate demo)
  • works on bare objects and arrays, easy to build your own systems on top of
  • uses a bounding box rather than just a Y value for "floor"

License

MIT, see LICENSE.md for details.