Support Angle Range

Author: mayank1513

.tkb

@@ -1,41 +1,11 @@
 {
   "scope": "Workspace",
   "tasks": {
-    "G-1H47JpSI69kav1qZ-kp": {
-      "id": "G-1H47JpSI69kav1qZ-kp",
-      "description": "Star [this repository](https://github.com/react18-tools/turborepo-template/) for easy access and to show your support",
-      "columnId": "column-todo"
-    },
-    "gbzyhx0FwFfzRoE-iqVeu": {
-      "id": "gbzyhx0FwFfzRoE-iqVeu",
-      "description": "🌟 **Update `sripts/rebrand.config.json` if required.**",
-      "columnId": "column-todo"
-    },
-    "Y5__aEZl3Pbxp7r90HKpV": {
-      "id": "Y5__aEZl3Pbxp7r90HKpV",
-      "description": "Install `pnpm` using `npm i -g pnpm`",
-      "columnId": "column-todo"
-    },
-    "jcpymbi71e702p7n6fwvZ": {
-      "id": "jcpymbi71e702p7n6fwvZ",
-      "description": "Close this Kanban Board tab and install dependencies using `pnpm`\n  - Run `pnpm i` to install dependencies; the `rebrand` script will automatically rebrand the repo, adjust workflows, and create a commit",
-      "columnId": "column-todo"
-    },
-    "jdZxwLymOo7w2eZeNpvsN": {
-      "id": "jdZxwLymOo7w2eZeNpvsN",
-      "description": "Run `yarn plop`, and follow prompts to generate server or client components for your library",
-      "columnId": "column-todo"
-    },
     "RX4J5v4y5IOe_ucf8pMRT": {
       "id": "RX4J5v4y5IOe_ucf8pMRT",
       "description": "🌟 Enable [private vulnerability reporting](https://github.com/react18-tools/webgl-generative-particles/security) (For public repo - do this after updating visibility to public)",
       "columnId": "column-todo"
     },
-    "EdPbrbJLllUHfZmCS80f7": {
-      "id": "EdPbrbJLllUHfZmCS80f7",
-      "description": "Set up `CodeCov`\n  - Visit Codecov and set up your repo\n  - Create [repository secret]((https://github.com/react18-tools/webgl-generative-particles/settings/secrets/actions)) for `CODECOV_TOKEN`",
-      "columnId": "column-todo"
-    },
     "MLLUsAhCKaKxvEXFY0HSq": {
       "id": "MLLUsAhCKaKxvEXFY0HSq",
       "description": "Set up `CodeClimate`\n  - Visit CodeClimate and set up your repo\n  - Create [repository secret] for `CC_TEST_REPORTER_ID`\n  - Add `*.test.*` to ignore patterns on the website\n  - Update Code Climate badge",
@@ -96,40 +66,23 @@
       "description": "You can also fork the [`terborepo-template`](https://github.com/react18-tools/turborepo-template/fork) and add your package to `scripts/featured.json`\n  - If approved, your package will be automatically added to FEATURED.md and also published on the home page of this repo.",
       "columnId": "column-todo"
     },
-    "_JiH9RZLmUF5nxD7lBC5B": {
-      "id": "_JiH9RZLmUF5nxD7lBC5B",
-      "description": "Create a new GitHub repository using this template.\n  - Click the `Use this template` button at the top right -> `Create a new repository`\n  - Click `Create repository` and wait for the setup workflow to finish rebranding your repo.",
-      "columnId": "column-done"
-    },
-    "t5d22lVYbF7GuQHzv6DRO": {
-      "id": "t5d22lVYbF7GuQHzv6DRO",
-      "description": "Install and set up Node.js and your IDE (VSCode recommended)",
-      "columnId": "column-done"
-    },
-    "wkDDELNeOfYSVmWI1eWu0": {
-      "id": "wkDDELNeOfYSVmWI1eWu0",
-      "description": "Install the recommended VSCode extensions:\n  - [Trello Kanban](https://marketplace.visualstudio.com/items?itemName=mayank1513.trello-kanban-task-board)",
-      "columnId": "column-done"
+    "9-0sxOV9Cw-jVjngwbWKm": {
+      "id": "9-0sxOV9Cw-jVjngwbWKm",
+      "description": "Add colors",
+      "columnId": "column-KpcfQ3OwiDZ1c11EOpcsT"
     },
-    "J5lp9I5d12B4tpGKawaqF": {
-      "id": "J5lp9I5d12B4tpGKawaqF",
-      "description": "Run `node scripts/rebrand.js` to rebrand this repo.",
-      "columnId": "column-todo"
+    "GJ4z5bji9Cpt9LjmhSwkW": {
+      "id": "GJ4z5bji9Cpt9LjmhSwkW",
+      "description": "fix angles",
+      "columnId": "column-KpcfQ3OwiDZ1c11EOpcsT"
     }
   },
   "columns": [
     {
       "id": "column-todo",
       "title": "To do",
       "tasksIds": [
-        "G-1H47JpSI69kav1qZ-kp",
-        "gbzyhx0FwFfzRoE-iqVeu",
-        "Y5__aEZl3Pbxp7r90HKpV",
-        "jcpymbi71e702p7n6fwvZ",
-        "J5lp9I5d12B4tpGKawaqF",
-        "jdZxwLymOo7w2eZeNpvsN",
         "RX4J5v4y5IOe_ucf8pMRT",
-        "EdPbrbJLllUHfZmCS80f7",
         "MLLUsAhCKaKxvEXFY0HSq",
         "gMYfaAh2RABMP8uZRQgNx",
         "_BfuX7quWBANpDK1bI7YM",
@@ -144,19 +97,23 @@
         "IjuAtNquJ4-Ut874rHKIW"
       ]
     },
+    {
+      "id": "column-KpcfQ3OwiDZ1c11EOpcsT",
+      "title": "Backlog",
+      "tasksIds": [
+        "9-0sxOV9Cw-jVjngwbWKm",
+        "GJ4z5bji9Cpt9LjmhSwkW"
+      ]
+    },
     {
       "id": "column-doing",
       "title": "Doing",
       "tasksIds": []
     },
     {
-      "id": "column-done",
+      "id": "column-WTA-ZOqIlXE23ewJglzO0",
       "title": "Done",
-      "tasksIds": [
-        "_JiH9RZLmUF5nxD7lBC5B",
-        "t5d22lVYbF7GuQHzv6DRO",
-        "wkDDELNeOfYSVmWI1eWu0"
-      ]
+      "tasksIds": []
     }
   ]
-}
+}

lib/src/shaders/update-vert.glsl

@@ -3,30 +3,31 @@ precision mediump float;
 
 uniform float dt; /** time delta */
 uniform sampler2D rg; /** random rg */
-uniform vec2 g; /** gravity */
+uniform vec2 g; /** gravity - forceField */
 uniform vec2 o; /** origin*/
+uniform vec2 aR; /** Angle Range */
 
 in vec2 p; /** position */
-in float a; /** Age */
+in float l; /** Life */
 in vec2 v; /** Velocity */
 
 out vec2 oP;
-out float oA;
+out float oL;
 out vec2 oV;
 
 void main() {
-  if(a <= 0.0) {
+  if(l <= 0.0) {
     ivec2 ij = ivec2(gl_VertexID % 512, gl_VertexID / 512);
     vec2 rd = texelFetch(rg, ij, 0).rg;
-    float th = rd.r * 6.2832;
+    float th = aR.x + rd.r * (aR.y - aR.x);
     float x = cos(th);
     float y = sin(th);
     oP = o;
-    oA = rd.r + rd.g;
+    oL = rd.r + rd.g;
     oV = vec2(x, y) * rd.g;
   } else {
     oP = p + v * dt;
-    oA = a - dt;
+    oL = l - dt;
     oV = v + g * dt;
   }
 }

lib/src/simulator.ts

@@ -3,46 +3,53 @@ import updateFragmentShaderSource from "./shaders/update-frag.glsl?raw";
 import renderVertexShaderSource from "./shaders/render-vert.glsl?raw";
 import renderFragmentShaderSource from "./shaders/render-frag.glsl?raw";
 
+// constnats
+const PI = Math.PI;
 /** 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";
 
 // inputs
 const IN_POSITION = "p";
-const IN_AGE = "a";
+const IN_LIFE = "l";
 const IN_VELOCITY = "v";
 
 // outputs
 const OUT_POSITION = "oP";
-const OUT_AGE = "oA";
+const OUT_LIFE = "oL";
 const OUT_VELOCITY = "oV";
 
 /** module scoped global variables/constants */
 let mouseX = 0,
   mouseY = 0;
 
+type Vector2D = [number, number];
+
 export interface ParticlesOptions {
   maxParticles?: number;
   generationRate?: number;
   overlay?: boolean;
   mouseOff?: boolean;
+  /** min and max Angles in radians: -Math.PI to Math.PI */
+  angleRage?: [number, number];
   /** todo */
   /** min and max age of particles */
   ageRange?: [number, number];
   /** [minSpeed, maxSpeed] */
   speedRange?: [number, number];
-  /** min and max Angles in radians: -Math.PI to Math.PI */
-  angleRage?: [number, number];
-  /** todo: WIP constant force [fx, fy, fz] or a force field texture */
-  forceField?: [number, number, number] | number[][] | string;
+  /** todo: WIP constant force [fx, fy] or a force field texture */
+  forceField?: Vector2D; //| Vector[][] | string;
 }
 
 const defaultOptions: ParticlesOptions = {
   maxParticles: 100_000,
   generationRate: 0.5,
+  forceField: [0, -0.1],
+  angleRage: [-PI, PI],
 };
 
 const getInitialData = (maxParticles: number) => {
@@ -58,7 +65,9 @@ const randomRGData = (sizeX: number, sizeY: number): Uint8Array => {
 };
 
 /** Particles simulator */
-const simulate = (gl: WebGL2RenderingContext, options = defaultOptions) => {
+const simulate = (gl: WebGL2RenderingContext, options: ParticlesOptions) => {
+  /** Normalize options */
+  options.angleRage?.map(a => a % PI).sort();
   /** Create shader */
   const createShader = (type: number, source: string): WebGLShader => {
     const shader = gl.createShader(type);
@@ -107,7 +116,7 @@ const simulate = (gl: WebGL2RenderingContext, options = defaultOptions) => {
 
   const updateProgram = createProgram(updateVertexShaderSource, updateFragmentShaderSource, [
     OUT_POSITION,
-    OUT_AGE,
+    OUT_LIFE,
     OUT_VELOCITY,
   ]);
 
@@ -131,7 +140,7 @@ const simulate = (gl: WebGL2RenderingContext, options = defaultOptions) => {
       nVect: 2,
     },
     {
-      location: gl.getAttribLocation(updateProgram, IN_AGE),
+      location: gl.getAttribLocation(updateProgram, IN_LIFE),
       nVect: 1,
     },
     {
@@ -214,8 +223,11 @@ const simulate = (gl: WebGL2RenderingContext, options = defaultOptions) => {
     gl.useProgram(updateProgram);
 
     setUniform(U_DT, dt / 1000);
-    setUniform(U_FORCE_FIELD, 0, -0.1);
+    // skipcq: JS-0339 -- forcefield is always set by the default options
+    setUniform(U_FORCE_FIELD, ...options.forceField!);
     setUniform(U_ORIGIN, mouseX, mouseY);
+    // skipcq: JS-0339 -- set in default options
+    setUniform(U_ANGLE_RANGE, ...options.angleRage!);
     gl.activeTexture(gl.TEXTURE0);
     gl.bindTexture(gl.TEXTURE_2D, rgNoiseTexture);
     setUniform(U_RANDOM_RG, 0);