Apply changesets and update CHANGELOG

react18-tools · Jun 30, 2024 · 90dc7c3 · 90dc7c3
1 parent 5ffcb68
commit 90dc7c3
Showing 1 changed file with 50 additions and 73 deletions.
diff --git a/lib/README.md b/lib/README.md
@@ -1,10 +1,13 @@
 # Webgl Generative Particles <img src="https://github.com/react18-tools/webgl-generative-particles/blob/main/popper.png?raw=true" style="height: 40px"/>
 
-[![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/)
+> This library is a Work In Progress... Feel free to request features, report bugs or contribute.
+> We will try to keep the APIs stable, however, some APIs might change.
+
+[![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/)
 
 "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.
 
-✅ Fully Treeshakable (import from `webgl-generative-particles/client/loader-container`)
+✅ Fully Treeshakable (import from `webgl-generative-particles/react`)
 
 ✅ Fully TypeScript Supported
 
@@ -38,86 +41,60 @@ $ npm install webgl-generative-particles
 $ yarn add webgl-generative-particles
 ```
 
-## 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)
-
-```bash
-$ pnpm add webgl-generative-particles-lite
-```
-
-**or**
-
-```bash
-$ npm install webgl-generative-particles-lite
-```
-
-**or**
-
-```bash
-$ yarn add webgl-generative-particles-lite
-```
-
-> You need `r18gs` as a peer-dependency
-
-### Import Styles
+## Usage
 
-You can import styles globally or within specific components.
+```ts
+import { Particles } from "webgl-generative-particles/react";
 
-```css
-/* globals.css */
-@import "webgl-generative-particles/dist";
+<Particles
+  fullScreenOverlay
+  options={{
+    rgba: [0, 1, 0, 0.5],
+  }}
+/>
 ```
 
-```tsx
-// layout.tsx
-import "webgl-generative-particles/dist/index.css";
-```
-
-For selective imports:
-
-```css
-/* globals.css */
-@import "webgl-generative-particles/dist/client"; /** required if you are using LoaderContainer */
-@import "webgl-generative-particles/dist/server/bars/bars1";
-```
-
-### Usage
-
-Using loaders is straightforward.
-
-```tsx
-import { Bars1 } from "webgl-generative-particles/dist/server/bars/bars1";
-
-export default function MyComponent() {
-  return someCondition ? <Bars1 /> : <>Something else...</>;
+### Simulator Options
+
+```ts
+export interface ParticlesOptions {
+  /** particle Color @defaultValue [1, 0, 0, 1] -> red */
+  rgba?: [number, number, number, number];
+  /** @defaultValue 100_000 */
+  maxParticles?: number;
+  /** @defaultValue 0.5 */
+  generationRate?: number;
+  /** @defaultValue false */
+  overlay?: boolean;
+  /** @defaultValue false */
+  mouseOff?: boolean;
+  /** min and max Angles in radians: @defaultValue [-Math.PI, Math.PI] */
+  angleRage?: [number, number];
+  /** min and max age of particles in seconds */
+  ageRange?: [number, number];
+  /** [minSpeed, maxSpeed] */
+  speedRange?: [number, number];
+  /** Initial origin -> Will update as per mouse position when mouse moved if mouseOff is not set.
+   * @defaultValue [0, 0]
+   */
+  origin?: [number, number];
+  /** todo */
+  /** todo: WIP constant force [fx, fy] or a force field texture */
+  forceField?: Vector2D; //| Vector[][] | string;
 }
 ```
 
-For detailed API and options, refer to [the API documentation](https://react18-tools.github.io/webgl-generative-particles).
-
-**Using LoaderContainer**
-
-`LoaderContainer` is a fullscreen component. You can add this component directly in your layout and then use `useLoader` hook to toggle its visibility.
+## Creadits
 
-```tsx
-// layout.tsx
-<LoaderContainer />
-	 ...
-```
+I have learnt the concepts from the following blogs and tutorials.
 
-```tsx
-// some other page or component
-import { useLoader } from "webgl-generative-particles/dist/hooks";
-
-export default MyComponent() {
-	const { setLoading } = useLoader();
-	useCallback(()=>{
-		setLoading(true);
-		...do some work
-		setLoading(false);
-	}, [])
-	...
-}
-```
+- https://experiments.withgoogle.com/search?q=particles
+- https://nullprogram.com/blog/2014/06/29/
+- https://gpfault.net/posts/webgl2-particles.txt.html
+- https://umbcgaim.wordpress.com/2010/07/01/gpu-random-numbers/
+- https://www.youtube.com/playlist?list=PLjcVFFANLS5zH_PeKC6I8p0Pt1hzph_rt
+- https://stackoverflow.com/q/15215968/23175171
+- https://stackoverflow.com/q/71021772/23175171
 
 ## License