particle-system

example project using this library https://g-art.vercel.app/

``
npm install particle-system
yarn install particle-system

`

`
import import { GArt, GArtConfig } from "particle-system";


const container = document.getElementById("app")

const system = new LorenzAttractor();

const config: GArtConfig = {
system,
container: document.getElementById('app') as HTMLElement,
zoom: 100,
material: {
color: 'cyan',
sizeParticle: 0.01,
opacity: 0.1,
},
orbitConfig: {
autoRotate: true,
},
stats: true,
};

const gArt = new GArt(config);
const callbacks = gArt.load();
callbacks.start();

`

Create system (example lorenz attractor)

`
import { GArtParticle, GArtSystem } from "particle-system";

interface LorenzParticle extends GArtParticle {
a: number;
b: number;
c: number;
dt: number;
}

export class LorenzAttractor extends GArtSystem {
numberParticles = 4000000;
speed = 1;

make() {
return {
x: 1,
y: 1,
z: 1,
a: 10,
b: 39.99,
c: 8 / 3,
dt: this.random(0.001, 0.005),
};
}

update() {
for (let i = 0; i < this.numberParticles; i++) {
const particle = this.particles[i];

const dx = particle.a (particle.y - particle.x) particle.dt;

const dy =
(particle.x (particle.b - particle.z) - particle.y) particle.dt;

const dz =
(particle.x particle.y - particle.c particle.z) * particle.dt;

particle.x += dx * this.speed;
particle.y += dy * this.speed;
particle.z += dz * this.speed;

this.apply(i, particle.x, particle.y, particle.z);
}
}
}

export default LorenzAttractor;


`

$3

for create a ParticleSystem we need two necessary functions, make and update.

`
class ExampleSystem extends GArtSystem {

numberParticles = 10000 // define number of particles
speed = 0.8 // speed of particles

// define basic params for the particle and extra information
make(){
return {
x: 0,
y: 0,
z: 0
}
}


//function for update all particles
update(){

// iterate all particles
for (let index = 0; index < this.numberParticles; index++) {

const particle = this.particles[index];
// ... calculate

// function to apply changes
this.apply(index, particle.x,particle.y,particle.z);

}
}
}


`

GArt

Params
`
interface GArtConfig {
system: GArtSystem;
container: HTMLElement;
material: {
color: string;
opacity?: number;
sizeParticle?: number;
};
zoom?: number;
stats?: boolean;
orbitConfig?: GArtOrbitControlConfig;
}

interface GArtOrbitControlConfig {
enableDamping?: boolean;
dampingFactor?: number;
enableZoom?: boolean;
autoRotate?: boolean;
autoRotateSpeed?: number;
}
`

Callbacks

`

interface GArtCallbacks {
start: () => void;
stop: () => void;
changeColor: (color: number) => void;
changeOpacity: (opacity: number) => void;
takePhoto: () => void;
}
``