https://github.com/vasturiano/d3-force-surface
A multi-surface elastic collision force type for the d3-force simulation engine
https://github.com/vasturiano/d3-force-surface
d3js elastic-collision force force-directed-graphs graph-theory impact physics-simulation simulation surface
Last synced: 8 months ago
JSON representation
A multi-surface elastic collision force type for the d3-force simulation engine
- Host: GitHub
- URL: https://github.com/vasturiano/d3-force-surface
- Owner: vasturiano
- License: mit
- Created: 2017-05-05T18:36:46.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2025-06-05T23:05:57.000Z (9 months ago)
- Last Synced: 2025-07-23T10:29:37.008Z (8 months ago)
- Topics: d3js, elastic-collision, force, force-directed-graphs, graph-theory, impact, physics-simulation, simulation, surface
- Language: JavaScript
- Size: 135 KB
- Stars: 23
- Watchers: 3
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
d3.forceSurface
==============
[![NPM package][npm-img]][npm-url]
[![Build Size][build-size-img]][build-size-url]
[![NPM Downloads][npm-downloads-img]][npm-downloads-url]
A multi-surface elastic collision force type for the d3-force simulation engine.
It can be used, for example to [keep nodes within boundaries](https://observablehq.com/@vasturiano/entropy) or in a [game of Pong](https://observablehq.com/@vasturiano/quad-pong).
See also [d3.forceBounce](https://github.com/vasturiano/d3-force-bounce).
## Quick start
```js
import d3ForceSurface from 'd3-force-surface';
```
or using a *script* tag
```html
```
then
```js
d3.forceSimulation()
.nodes()
.force('surface', d3.forceSurface()
.surfaces()
);
```
## API reference
| Method | Description | Default |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------- | ------------- |
| surfaces([array]) | Getter/setter for the list of surface lines | [] |
| elasticity([number]) | Getter/setter for every collision's coefficient of restitution, aka elasticity. A value of `1` represents a purely elastic collision with no energy loss, while a `0` will fully eliminate the bounce in the collision direction. Values `>1` can be used to introduce acceleration at each collision. Values `<0` are not recommended. | 1 |
| radius([num or fn]) | Getter/setter for the node object radius accessor function (`fn(node)`) or a constant (`num`) for all nodes. | 1 |
| from([fn]) | Getter/setter for the surface object starting point accessor function `fn(surface)`. It should return a two coordinate object: `{x,y}` | `surface.from` |
| to([fn]) | Getter/setter for the surface object ending point accessor function `fn(surface)`. It should return a two coordinate object: `{x,y}` | `surface.to` |
| oneWay([bool or fn]) | Getter/setter for the surface object "one-way" flag accessor function (`fn(surface)`) or a constant for all surfaces. This flag indicates whether collisions of nodes against the surface should occur in both directions of movement or only in one (when the node is moving in a N>S orientation according to the W>E line axis), effectively ignoring collisions in the other direction. | false |
| onImpact([fn]) | Callback function triggered at every collision, with the signature `onImpact(node, surface)` ||
## ❤️ Support This Project
If you find this module useful and would like to support its development, you can [buy me a ☕](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8¤cy_code=USD&source=url). Your contributions help keep open-source sustainable!
[](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=L398E7PKP47E8¤cy_code=USD&source=url)
[npm-img]: https://img.shields.io/npm/v/d3-force-surface
[npm-url]: https://npmjs.org/package/d3-force-surface
[build-size-img]: https://img.shields.io/bundlephobia/minzip/d3-force-surface
[build-size-url]: https://bundlephobia.com/result?p=d3-force-surface
[npm-downloads-img]: https://img.shields.io/npm/dt/d3-force-surface
[npm-downloads-url]: https://www.npmtrends.com/d3-force-surface