Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anuraghazra/verly.js
:red_circle::wavy_dash::large_blue_circle::wavy_dash::black_circle: Easy to integrate Verlet physics engine. :link:
https://github.com/anuraghazra/verly.js
2d-physics-simulations engine physics-2d physics-engine verlet verlet-engine verlet-integration verlet-physics verlyjs
Last synced: 12 days ago
JSON representation
:red_circle::wavy_dash::large_blue_circle::wavy_dash::black_circle: Easy to integrate Verlet physics engine. :link:
- Host: GitHub
- URL: https://github.com/anuraghazra/verly.js
- Owner: anuraghazra
- License: mit
- Created: 2019-03-17T08:02:59.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-02-10T20:58:37.000Z (9 months ago)
- Last Synced: 2024-10-11T13:31:06.938Z (about 1 month ago)
- Topics: 2d-physics-simulations, engine, physics-2d, physics-engine, verlet, verlet-engine, verlet-integration, verlet-physics, verlyjs
- Language: JavaScript
- Homepage: https://anuraghazra.github.io/Verly.js
- Size: 416 KB
- Stars: 663
- Watchers: 11
- Forks: 45
- Open Issues: 9
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Verly.js
Easy to integrate verlet physics engine.
> - Yet another physics engine? really?
> - Yes because i love physics :heart:.
**Read my article on medium about [Making a Verlet Physics Engine in JavaScript](https://medium.com/better-programming/making-a-verlet-physics-engine-in-javascript-1dff066d7bc5)**
## cool things made with Verly.js
- [VerlyRangeSlider](https://anuraghazra.github.io/VerlyRangeSlider/)
- [Ship](https://anuraghazra.github.io/Verly.js/examples/ship/)
- [Parasites](https://anuraghazra.github.io/parasites/)
- [Swingy Text](https://anuraghazra.github.io/Verly.js/examples/text/)
- [Happy Holi](https://anuraghazra.github.io/Verly.js/examples/typography/)
- **See more [examples](https://anuraghazra.github.io/Verly.js/examples/)**
---
### want more info? Check out the API **[documentation](https://anuraghazra.github.io/Verly.js/docs)**
#### *Experimental Reactjs Integration - check out the [sandbox](https://codesandbox.io/s/verlyjs-react-w5kfr)*
## Installation
```bash
git clone https://github.com/anuraghazra/Verly.js.git
```
## local development
after cloning the repo in command line run to build
```bash
npm install && npm run build
```
# Usage
## import CDN link
```html
```
```js
window.onload = function () {
let canvas = document.getElementById('c');
let ctx = canvas.getContext('2d');
let width = 600;
let height = 600;
canvas.width = width;
canvas.height = height;
// iteration, canvas, ctx
let verly = new Verly(16, canvas, ctx);
// x, y, w, h
verly.createBox(20, 100, 100, 100);
// x, y, segments, radius
verly.createHexagon(200, 200, 16, 50);
// x, y, w, h, segments, pinOffset
verly.createCloth(300, 200, 300, 300, 15, 2);
// x, y, segments, gap, pin
verly.createRope(500, 150, 20, 15, 0);
// x, y
verly.createRagdoll(300, 200);
function animate() {
ctx.clearRect(0, 0, width, height);
verly.update();
verly.render();
// for interacting with points
verly.interact();
requestAnimationFrame(animate);
}
animate();
}
```
----------
## Author
- https://anuraghazra.github.io
- [email protected]
Contributions Are Welcomed.
Made with :heart: and JavaScript