Skip to content

Commit 90dc7c3

Browse files
mayank1513mayank1513
committed
Apply changesets and update CHANGELOG
1 parent 5ffcb68 commit 90dc7c3

File tree

1 file changed

+50
-73
lines changed

1 file changed

+50
-73
lines changed

‎lib/README.md‎

Lines changed: 50 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
# Webgl Generative Particles <img src="https://github.com/react18-tools/webgl-generative-particles/blob/main/popper.png?raw=true" style="height: 40px"/>
22

3-
[![test](https://github.com/react18-tools/webgl-generative-particles/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/webgl-generative-particles/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/aa896ec14c570f3bb274/maintainability)](https://codeclimate.com/github/react18-tools/webgl-generative-particles/maintainability) [![codecov](https://codecov.io/gh/react18-tools/webgl-generative-particles/graph/badge.svg)](https://codecov.io/gh/react18-tools/webgl-generative-particles) [![Version](https://img.shields.io/npm/v/webgl-generative-particles.svg?colorB=green)](https://www.npmjs.com/package/webgl-generative-particles) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/webgl-generative-particles.svg)](https://www.npmjs.com/package/webgl-generative-particles) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/webgl-generative-particles) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
3+
> This library is a Work In Progress... Feel free to request features, report bugs or contribute.
4+
> We will try to keep the APIs stable, however, some APIs might change.
5+
6+
[![test](https://github.com/react18-tools/webgl-generative-particles/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/webgl-generative-particles/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/17e43ef7ca4593a18757/maintainability)](https://codeclimate.com/github/react18-tools/webgl-generative-particles/maintainability) [![codecov](https://codecov.io/gh/react18-tools/webgl-generative-particles/graph/badge.svg)](https://codecov.io/gh/react18-tools/webgl-generative-particles) [![Version](https://img.shields.io/npm/v/webgl-generative-particles.svg?colorB=green)](https://www.npmjs.com/package/webgl-generative-particles) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/webgl-generative-particles.svg)](https://www.npmjs.com/package/webgl-generative-particles) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/webgl-generative-particles) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
47

58
"webgl-generative-particles" is an efficient WebGL-based generative particle system simulator designed for both React and vanilla JS applications. This system follows the mouse pointer, providing interactive and dynamic visual effects. It offers seamless integration with React (including React 18 and beyond) and Next.js, making it an ideal choice for modern frontend development. The simulator is customizable, compatible with various frameworks, and delivers high performance and real-time rendering for progressive web development.
69

7-
✅ Fully Treeshakable (import from `webgl-generative-particles/client/loader-container`)
10+
✅ Fully Treeshakable (import from `webgl-generative-particles/react`)
811

912
✅ Fully TypeScript Supported
1013

@@ -38,86 +41,60 @@ $ npm install webgl-generative-particles
3841
$ yarn add webgl-generative-particles
3942
```
4043

41-
## Want Lite Version? [![npm bundle size](https://img.shields.io/bundlephobia/minzip/webgl-generative-particles-lite)](https://www.npmjs.com/package/webgl-generative-particles-lite) [![Version](https://img.shields.io/npm/v/webgl-generative-particles-lite.svg?colorB=green)](https://www.npmjs.com/package/webgl-generative-particles-lite) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/webgl-generative-particles-lite.svg)](https://www.npmjs.com/package/webgl-generative-particles-lite)
42-
43-
```bash
44-
$ pnpm add webgl-generative-particles-lite
45-
```
46-
47-
**or**
48-
49-
```bash
50-
$ npm install webgl-generative-particles-lite
51-
```
52-
53-
**or**
54-
55-
```bash
56-
$ yarn add webgl-generative-particles-lite
57-
```
58-
59-
> You need `r18gs` as a peer-dependency
60-
61-
### Import Styles
44+
## Usage
6245

63-
You can import styles globally or within specific components.
46+
```ts
47+
import { Particles } from "webgl-generative-particles/react";
6448

65-
```css
66-
/* globals.css */
67-
@import "webgl-generative-particles/dist";
49+
<Particles
50+
fullScreenOverlay
51+
options={{
52+
rgba: [0, 1, 0, 0.5],
53+
}}
54+
/>
6855
```
6956

70-
```tsx
71-
// layout.tsx
72-
import "webgl-generative-particles/dist/index.css";
73-
```
74-
75-
For selective imports:
76-
77-
```css
78-
/* globals.css */
79-
@import "webgl-generative-particles/dist/client"; /** required if you are using LoaderContainer */
80-
@import "webgl-generative-particles/dist/server/bars/bars1";
81-
```
82-
83-
### Usage
84-
85-
Using loaders is straightforward.
86-
87-
```tsx
88-
import { Bars1 } from "webgl-generative-particles/dist/server/bars/bars1";
89-
90-
export default function MyComponent() {
91-
return someCondition ? <Bars1 /> : <>Something else...</>;
57+
### Simulator Options
58+
59+
```ts
60+
export interface ParticlesOptions {
61+
/** particle Color @defaultValue [1, 0, 0, 1] -> red */
62+
rgba?: [number, number, number, number];
63+
/** @defaultValue 100_000 */
64+
maxParticles?: number;
65+
/** @defaultValue 0.5 */
66+
generationRate?: number;
67+
/** @defaultValue false */
68+
overlay?: boolean;
69+
/** @defaultValue false */
70+
mouseOff?: boolean;
71+
/** min and max Angles in radians: @defaultValue [-Math.PI, Math.PI] */
72+
angleRage?: [number, number];
73+
/** min and max age of particles in seconds */
74+
ageRange?: [number, number];
75+
/** [minSpeed, maxSpeed] */
76+
speedRange?: [number, number];
77+
/** Initial origin -> Will update as per mouse position when mouse moved if mouseOff is not set.
78+
* @defaultValue [0, 0]
79+
*/
80+
origin?: [number, number];
81+
/** todo */
82+
/** todo: WIP constant force [fx, fy] or a force field texture */
83+
forceField?: Vector2D; //| Vector[][] | string;
9284
}
9385
```
9486

95-
For detailed API and options, refer to [the API documentation](https://react18-tools.github.io/webgl-generative-particles).
96-
97-
**Using LoaderContainer**
98-
99-
`LoaderContainer` is a fullscreen component. You can add this component directly in your layout and then use `useLoader` hook to toggle its visibility.
87+
## Creadits
10088

101-
```tsx
102-
// layout.tsx
103-
<LoaderContainer />
104-
...
105-
```
89+
I have learnt the concepts from the following blogs and tutorials.
10690

107-
```tsx
108-
// some other page or component
109-
import { useLoader } from "webgl-generative-particles/dist/hooks";
110-
111-
export default MyComponent() {
112-
const { setLoading } = useLoader();
113-
useCallback(()=>{
114-
setLoading(true);
115-
...do some work
116-
setLoading(false);
117-
}, [])
118-
...
119-
}
120-
```
91+
- https://experiments.withgoogle.com/search?q=particles
92+
- https://nullprogram.com/blog/2014/06/29/
93+
- https://gpfault.net/posts/webgl2-particles.txt.html
94+
- https://umbcgaim.wordpress.com/2010/07/01/gpu-random-numbers/
95+
- https://www.youtube.com/playlist?list=PLjcVFFANLS5zH_PeKC6I8p0Pt1hzph_rt
96+
- https://stackoverflow.com/q/15215968/23175171
97+
- https://stackoverflow.com/q/71021772/23175171
12198

12299
## License
123100

0 commit comments

Comments
 (0)