feat: Add speed rannge and age range

Author: mayank1513

.tkb

@@ -16,11 +16,6 @@
       "description": "Add `NPM_AUTH_TOKEN` to repository secrets to automate package publishing\n  - Log in to your [`npm` account](https://www.npmjs.com/login) and create an automation token\n  - Create a new repository secret `NPM_AUTH_TOKEN`",
       "columnId": "column-todo"
     },
-    "_BfuX7quWBANpDK1bI7YM": {
-      "id": "_BfuX7quWBANpDK1bI7YM",
-      "description": "Update description in `lib/package.json`",
-      "columnId": "column-todo"
-    },
     "dC7QDBLH8BmHUfaYmIt81": {
       "id": "dC7QDBLH8BmHUfaYmIt81",
       "description": "(Optional) Add Repo Stats by visiting and setting up [repobeats](https://repobeats.axiom.co/)",
@@ -68,12 +63,7 @@
     },
     "9-0sxOV9Cw-jVjngwbWKm": {
       "id": "9-0sxOV9Cw-jVjngwbWKm",
-      "description": "Add colors",
-      "columnId": "column-KpcfQ3OwiDZ1c11EOpcsT"
-    },
-    "GJ4z5bji9Cpt9LjmhSwkW": {
-      "id": "GJ4z5bji9Cpt9LjmhSwkW",
-      "description": "fix angles",
+      "description": "Add multiple colors",
       "columnId": "column-KpcfQ3OwiDZ1c11EOpcsT"
     }
   },
@@ -85,7 +75,6 @@
         "RX4J5v4y5IOe_ucf8pMRT",
         "MLLUsAhCKaKxvEXFY0HSq",
         "gMYfaAh2RABMP8uZRQgNx",
-        "_BfuX7quWBANpDK1bI7YM",
         "dC7QDBLH8BmHUfaYmIt81",
         "P_NrSJQ8m91Odgz8E1fS6",
         "1dRWJhy45E1Rq5wZAmPHt",
@@ -101,8 +90,7 @@
       "id": "column-KpcfQ3OwiDZ1c11EOpcsT",
       "title": "Backlog",
       "tasksIds": [
-        "9-0sxOV9Cw-jVjngwbWKm",
-        "GJ4z5bji9Cpt9LjmhSwkW"
+        "9-0sxOV9Cw-jVjngwbWKm"
       ]
     },
     {

.vscode/settings.json

@@ -13,5 +13,8 @@
 	"editor.formatOnSave": true,
 	"editor.formatOnPaste": true,
 	"editor.formatOnSaveMode": "file",
-	"mayank1513.trello-kanban.Workspace.filePath": ".tkb"
+	"mayank1513.trello-kanban.Workspace.filePath": ".tkb",
+	"[glsl]": {
+		"editor.defaultFormatter": "circledev.glsl-canvas"
+	}
 }

examples/nextjs/src/app/layout.tsx

@@ -20,7 +20,18 @@ export default function RootLayout({ children }: { children: React.ReactNode }):
           {children}
         </Layout>
         <GlobalLoader />
-        <Particles fullScreenOverlay />
+        <Particles
+          fullScreenOverlay
+          options={{
+            speedRange: [200, 250],
+            maxParticles: 10000,
+            generationRate: 0.2,
+            angleRage: [Math.PI / 4, (3 * Math.PI) / 4],
+            forceField: [0, -0.02],
+            ageRange: [0.2, 0.5],
+          }}
+        />
+        <Particles style={{ height: "500px", width: "600px" }} />
       </body>
     </html>
   );

lib/src/shaders/render-frag.glsl

@@ -1,10 +1,10 @@
 #version 300 es
 precision mediump float;
 
-uniform vec4 c; /** Particle Color */
+uniform vec4 c;/** Particle Color */
 
 out vec4 oC;
 
-void main() {
-  oC = c;
+void main(){
+  oC=c;
 }

lib/src/shaders/render-vert.glsl

@@ -4,6 +4,6 @@ precision mediump float;
 in vec2 p;
 
 void main() {
-  gl_PointSize = 1.0;
-  gl_Position = vec4(p, 0.0, 1.0);
+  gl_PointSize = 1.f;
+  gl_Position = vec4(p, 0.f, 1.f);
 }

lib/src/shaders/update-vert.glsl

@@ -6,6 +6,8 @@ uniform sampler2D rg; /** random rg */
 uniform vec2 g; /** gravity - forceField */
 uniform vec2 o; /** origin*/
 uniform vec2 aR; /** Angle Range */
+uniform vec2 sR; /** scalar Speed Range pixels/sec */
+uniform vec2 lR; /** life range */
 
 in vec2 p; /** position */
 in float l; /** Life */
@@ -16,15 +18,15 @@ out float oL;
 out vec2 oV;
 
 void main() {
-  if(l <= 0.0) {
+  if(l <= 0.0f) {
     ivec2 ij = ivec2(gl_VertexID % 512, gl_VertexID / 512);
     vec2 rd = texelFetch(rg, ij, 0).rg;
     float th = aR.x + rd.r * (aR.y - aR.x);
     float x = cos(th);
     float y = sin(th);
     oP = o;
-    oL = rd.r + rd.g;
-    oV = vec2(x, y) * rd.g;
+    oL = lR.x + rd.r * (lR.y - lR.x);
+    oV = vec2(x, y) * (sR.x + (sR.y - sR.x) * rd.g);
   } else {
     oP = p + v * dt;
     oL = l - dt;

lib/src/simulator.ts

@@ -5,13 +5,16 @@ import renderFragmentShaderSource from "./shaders/render-frag.glsl?raw";
 
 // constnats
 const PI = Math.PI;
+const random = Math.random;
 /** shader names */
 // Uniforms
 const U_DT = "dt";
 const U_RANDOM_RG = "rg";
 const U_FORCE_FIELD = "g"; /** gravity */
 const U_ORIGIN = "o";
 const U_ANGLE_RANGE = "aR";
+const U_SPEED_RANGE = "sR";
+const U_LIFE_RANGE = "lR";
 const U_PARTICLE_COLOR = "c";
 
 // inputs
@@ -43,21 +46,23 @@ export interface ParticlesOptions {
   mouseOff?: boolean;
   /** min and max Angles in radians: @defaultValue [-Math.PI, Math.PI] */
   angleRage?: [number, number];
-  /** todo */
-  /** min and max age of particles */
+  /** min and max age of particles in seconds */
   ageRange?: [number, number];
   /** [minSpeed, maxSpeed] */
   speedRange?: [number, number];
+  /** todo */
   /** todo: WIP constant force [fx, fy] or a force field texture */
   forceField?: Vector2D; //| Vector[][] | string;
 }
 
 const defaultOptions: ParticlesOptions = {
   rgba: [1, 0, 0, 1],
-  maxParticles: 100_000,
-  generationRate: 0.5,
-  forceField: [0, -0.1],
+  maxParticles: 1000_000,
+  generationRate: 1,
+  forceField: [0, -0.25],
   angleRage: [-PI, PI],
+  speedRange: [0.5, 1],
+  ageRange: [2, 10],
 };
 
 const getInitialData = (maxParticles: number) => {
@@ -68,14 +73,20 @@ const getInitialData = (maxParticles: number) => {
 
 const randomRGData = (sizeX: number, sizeY: number): Uint8Array => {
   const data = [];
-  for (let i = 0; i < sizeX * sizeY; ++i) data.push(Math.random() * sizeX, Math.random() * sizeX);
+  for (let i = 0; i < sizeX * sizeY; i++) data.push(random() * 255.0, random() * 255.0);
   return new Uint8Array(data);
 };
 
 /** Particles simulator */
-const simulate = (gl: WebGL2RenderingContext, options: ParticlesOptions) => {
+const simulate = (
+  canvas: HTMLCanvasElement,
+  gl: WebGL2RenderingContext,
+  options: ParticlesOptions,
+) => {
   /** Normalize options */
   options.angleRage?.map(a => a % PI).sort();
+  options.ageRange?.sort();
+  options.speedRange?.sort();
   /** Create shader */
   const createShader = (type: number, source: string): WebGLShader => {
     const shader = gl.createShader(type);
@@ -237,6 +248,11 @@ const simulate = (gl: WebGL2RenderingContext, options: ParticlesOptions) => {
     setUpdateUniform(U_ORIGIN, mouseX, mouseY);
     // skipcq: JS-0339 -- set in default options
     setUpdateUniform(U_ANGLE_RANGE, ...options.angleRage!);
+    // skipcq: JS-0339 -- set in default options
+    setUpdateUniform(U_LIFE_RANGE, ...options.ageRange!);
+    // skipcq: JS-0339 -- set in default options
+    const speedRange = options.speedRange!;
+    setUpdateUniform(U_SPEED_RANGE, speedRange[0] / canvas.width, speedRange[1] / canvas.height);
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, rgNoiseTexture);
     setUpdateUniform(U_RANDOM_RG, 0);
@@ -285,7 +301,7 @@ export const renderParticles = (canvas: HTMLCanvasElement, options?: ParticlesOp
   const gl = canvas.getContext("webgl2");
   if (!gl) return undefined;
 
-  simulate(gl, { ...defaultOptions, ...options });
+  simulate(canvas, gl, { ...defaultOptions, ...options });
 
   /** Set up observer to observe size changes */
   const observer = new ResizeObserver(entries => {

lib/tsup.config.ts

@@ -21,7 +21,6 @@ export default defineConfig(
           setup(build) {
             if (!options.watch)
               build.onLoad({ filter: /simulator\.ts$/, namespace: "file" }, args => {
-                console.log("utils ----- >", args.path);
                 const text = fs.readFileSync(args.path, "utf8");
                 const contents = text
                   .replace(/if \(!gl\.[^}]*}/gm, "")