Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/joshbrew/dynamicparticles.js

Dynamic particle rendering. Make groups of particles and set custom rulesets. Comes with efficient boids (20K rendered in ThreeJS @60fps) and a toggleable default canvas renderer built in for quick testing.
https://github.com/joshbrew/dynamicparticles.js

3d-graphics canvas particles vector-math

Last synced: about 2 months ago
JSON representation

Dynamic particle rendering. Make groups of particles and set custom rulesets. Comes with efficient boids (20K rendered in ThreeJS @60fps) and a toggleable default canvas renderer built in for quick testing.

Awesome Lists containing this project

README

        

## DynamicParticles.js

This is a little experimental particle vector calculator. It lets you quickly generate groups of particles with specified rulesets.

It comes with boids by default, they are very efficient and I had 10,000 on screen by reducing the group search count per boid, and the canvas was by far the limiting factor. will add more in time to replicate some stuff I saw on youtube. Just open the particleTest.html file to see and tinker with this:

https://user-images.githubusercontent.com/18196383/124330212-c9354200-db41-11eb-99c9-c73f86fdce3c.mp4

3D example
https://app.brainsatplay.com/#Boids

![birdmoney](https://user-images.githubusercontent.com/18196383/124544444-f735b300-dddb-11eb-84f9-647736994b45.png)

Example Usage:

`npm i dynamicparticles`

HTML:
```


```

JS:
```
import {DynamicParticles} from 'dynamicparticles'

let canvas = document.getElementById('canvas');

let Particles = new DynamicParticles(
[
['boids',1000],
['boids',300],
['boids',800]
],
canvas,
true
);

Particles.addRule( //See code for example functions
'newrule',
(particle,rule)=>{}, //groupRuleGen (called when a particle is created): particle format: See DynamicParticles.prototype (line 29); rule format: [type='type',count=500]
(group,timeStep)=>{}, //timestepFunc (called each frame): group format: [{particle0},{particle1},...{particleN}]; timeStep: seconds between frames
(particle)=>{} //animateParticle (called per particle per frame): particle format: See DynamicParticles.prototype (line 29)
);

Particles.addGroup(['newrule',300]);

```