webgl-plot - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

package.json

 {
   "name": "webgl-plot",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "High-performance 2D plotting framework based on native WebGL",
-  "main": "./src/index.js",
+  "main": "./dist/index.js",
   "dependencies": {},
-  "devDependencies": {},
+  "devDependencies": {
+    "typescript": "^3.7.2"
+  },
   "scripts": {
-    "build": "tsc ./src/index.ts"
+    "build": "tsc"
   },
@@ -11,0 +13,0 @@ "repository": {

src/index.ts

 /**
  * Author Danial Chitnis 2019
- * 
+ *
  * inspired by:
@@ -9,166 +9,82 @@ * https://codepen.io/AzazelN28
 
+import {ColorRGBA} from "./ColorRGBA";
+import {WebglLine} from "./WbglLine";
+import {WebglStep} from "./WbglStep";
+import {WebglBaseLine} from "./WebglBaseLine";
 
+export {WebglLine, ColorRGBA, WebglStep};
 
-export class color_rgba {
-   r: number;
-   g: number;
-   b: number;
-   a: number;
 
-   constructor(r:number, g:number, b:number, a:number) {
-      this.r = r;
-      this.g = g;
-      this.b = b;
-      this.a = a;
-   }
-}
+export class WebGLplot {
 
+   public webgl: WebGLRenderingContext;
 
-export class lineGroup {
-   num_points: number;
-   xy: Float32Array;
-   color: color_rgba;
-   intenisty: number;
-   vbuffer: WebGLBuffer;
-   prog: WebGLProgram;
-   coord: number;
-   visible: boolean;
+   public scaleX: number;
+   public scaleY: number;
 
-   private _present_color: color_rgba;
+   public lines: WebglBaseLine[];
 
-   constructor(c: color_rgba, num:number) {
-      this.num_points = num;
-      this.color = c;
-      this.intenisty = 1;
-      this.xy = new Float32Array(2*this.num_points);
-      this.vbuffer = 0;
-      this.prog = 0;
-      this.coord = 0;
-      this.visible = true;
-   }
 
-   setX(index:number, x:number) {
-      this.xy[index*2] = x;
-   }
 
-   setY(index:number, y:number) {
-      this.xy[index*2 + 1] = y;
-   }
+    /**
+     *
+     * @param canv
+     * @param array
+     */
+    constructor(canv: HTMLCanvasElement) {
 
-   getX(index:number):number {
-      return this.xy[index*2];
-   }
+      const devicePixelRatio = window.devicePixelRatio || 1;
 
-   getY(index:number):number {
-      return this.xy[index*2 + 1];
-   }
-   
-   linespaceX() {
-      for (let i=0; i<this.num_points; i++) {
-         //set x to -num/2:1:+num/2
-         this.setX(i, 2*i/this.num_points-1);
-       }
-   }
-
-   constY(c:number) {
-      for (let i=0; i<this.num_points; i++) {
-         //set x to -num/2:1:+num/2
-         this.setY(i, c);
-       }
-   }
-
-   shift_add(data:Float32Array) {
-      let shift_size = data.length;
-
-      for (let i=0; i<this.num_points-shift_size; i++) {
-         this.setY(i, this.getY(i+shift_size));
-      }
-       
-      for (let i=0;i<shift_size;i++) {
-         this.setY(i+this.num_points-shift_size, data[i]);
-      }
-
-   }
-
-
-   present_color():color_rgba {
-      return this.color;
-   }
-}
-
-
-export class webGLplot {
-
-    gl:WebGLRenderingContext;
-
-    scaleX: number;
-    scaleY: number;
-
-    linegroups: lineGroup[];
-
-
-
-    /**
-     * 
-     * @param canv 
-     * @param array 
-     */
-    constructor(canv:HTMLCanvasElement) {
-       
-      let devicePixelRatio = window.devicePixelRatio || 1;
- 
       // set the size of the drawingBuffer based on the size it's displayed.
       canv.width = canv.clientWidth * devicePixelRatio;
       canv.height = canv.clientHeight * devicePixelRatio;
- 
-      const gl = <WebGLRenderingContext>canv.getContext("webgl", {
+
+      const webgl =  canv.getContext("webgl", {
          antialias: true,
-         transparent: false
-      });
+         transparent: false,
+      }) as WebGLRenderingContext;
 
-      this.linegroups = [];
+      this.lines = [];
 
-      this.gl = gl;
+      this.webgl = webgl;
 
       this.scaleX = 1;
       this.scaleY = 1;
-      
- 
- 
+
+
+
       // Clear the canvas  //??????????????????
-      //gl.clearColor(0.1, 0.1, 0.1, 1.0);
-      gl.clearColor(0.1, 0.1, 0.1, 1.0);
+      // gl.clearColor(0.1, 0.1, 0.1, 1.0);
+      webgl.clearColor(0.1, 0.1, 0.1, 1.0);
 
       // Enable the depth test
-      gl.enable(gl.DEPTH_TEST);
+      webgl.enable(webgl.DEPTH_TEST);
 
       // Clear the color and depth buffer
-      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+      webgl.clear(webgl.COLOR_BUFFER_BIT || webgl.DEPTH_BUFFER_BIT);
 
       // Set the view port
-      gl.viewport(0,0,canv.width,canv.height);
+      webgl.viewport(0, 0, canv.width, canv.height);
 
     }
 
-   /**
-   * update
-   */
-   update() {
-      let gl = this.gl;
 
-      this.linegroups.forEach(lg => {
-         if (lg.visible) {
-            gl.useProgram(lg.prog);
+   public update() {
+      const webgl = this.webgl;
 
-            let uscale = gl.getUniformLocation(lg.prog, 'uscale');
-            gl.uniformMatrix2fv(uscale, false, new Float32Array([this.scaleX,0, 0,this.scaleY]));
+      this.lines.forEach((line) => {
+         if (line.visible) {
+            webgl.useProgram(line.prog);
 
-            let uColor = gl.getUniformLocation(lg.prog,'uColor');
-            gl.uniform4fv(uColor, [lg.present_color().r, lg.present_color().g, lg.present_color().b, lg.present_color().a]);
+            const uscale = webgl.getUniformLocation(line.prog, "uscale");
+            webgl.uniformMatrix2fv(uscale, false, new Float32Array([this.scaleX, 0, 0, this.scaleY]));
 
-            gl.bufferData(gl.ARRAY_BUFFER, <ArrayBuffer>lg.xy, gl.STREAM_DRAW);
+            const uColor = webgl.getUniformLocation(line.prog,"uColor");
+            webgl.uniform4fv(uColor, [line.color.r, line.color.g, line.color.b, line.color.a]);
 
-            gl.drawArrays(gl.LINE_STRIP, 0, lg.num_points);
+            webgl.bufferData(webgl.ARRAY_BUFFER, line.xy as ArrayBuffer, webgl.STREAM_DRAW);
+
+            webgl.drawArrays(webgl.LINE_STRIP, 0, line.webglNumPoints);
          }
-         
+
       });
@@ -178,15 +94,15 @@
 
-   clear() {
+   public clear() {
       // Clear the canvas  //??????????????????
-      this.gl.clearColor(0.1, 0.1, 0.1, 1.0);
-      this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+      this.webgl.clearColor(0.1, 0.1, 0.1, 1.0);
+      this.webgl.clear(this.webgl.COLOR_BUFFER_BIT || this.webgl.DEPTH_BUFFER_BIT);
    }
 
-   add_line(line:lineGroup) {
-      
-      line.vbuffer = <WebGLBuffer>this.gl.createBuffer();
-      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, line.vbuffer);
-      this.gl.bufferData(this.gl.ARRAY_BUFFER, <ArrayBuffer>line.xy, this.gl.STREAM_DRAW);
+   public add_line(line: WebglBaseLine) {
 
-      let vertCode = `
+      line.vbuffer = ( this.webgl.createBuffer() as WebGLBuffer);
+      this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line.vbuffer);
+      this.webgl.bufferData(this.webgl.ARRAY_BUFFER,  line.xy as ArrayBuffer, this.webgl.STREAM_DRAW);
+
+      const vertCode = `
       attribute vec2 coordinates;
@@ -199,12 +115,12 @@ uniform mat2 uscale;
       // Create a vertex shader object
-      let vertShader = this.gl.createShader(this.gl.VERTEX_SHADER);
+      const vertShader = this.webgl.createShader(this.webgl.VERTEX_SHADER);
 
       // Attach vertex shader source code
-      this.gl.shaderSource(<WebGLShader>vertShader, vertCode);
+      this.webgl.shaderSource( vertShader as WebGLShader, vertCode);
 
       // Compile the vertex shader
-      this.gl.compileShader(<WebGLShader>vertShader);
+      this.webgl.compileShader( vertShader as WebGLShader);
 
       // Fragment shader source code
-      let fragCode = `
+      const fragCode = `
          precision mediump float;
@@ -215,34 +131,23 @@ uniform highp vec4 uColor;
          }`;
-      
 
-      let fragShader = this.gl.createShader(this.gl.FRAGMENT_SHADER);
-      this.gl.shaderSource(<WebGLShader>fragShader, fragCode);
-      this.gl.compileShader(<WebGLShader>fragShader);
-      line.prog = <WebGLProgram>this.gl.createProgram();
-      this.gl.attachShader(line.prog, <WebGLShader>vertShader);
-      this.gl.attachShader(line.prog, <WebGLShader>fragShader);
-      this.gl.linkProgram(line.prog);
 
-      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, line.vbuffer);
-      
-      line.coord = this.gl.getAttribLocation(line.prog, "coordinates");
-      this.gl.vertexAttribPointer(line.coord, 2, this.gl.FLOAT, false, 0, 0);
-      this.gl.enableVertexAttribArray(line.coord);
+      const fragShader = this.webgl.createShader(this.webgl.FRAGMENT_SHADER);
+      this.webgl.shaderSource( fragShader as WebGLShader, fragCode);
+      this.webgl.compileShader( fragShader as WebGLShader);
+      line.prog = ( this.webgl.createProgram() as WebGLProgram);
+      this.webgl.attachShader(line.prog,  vertShader as WebGLShader);
+      this.webgl.attachShader(line.prog,  fragShader as WebGLShader);
+      this.webgl.linkProgram(line.prog);
 
-      this.linegroups.push(line);
-   }
+      this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line.vbuffer);
 
-   viewport(a:number, b:number, c:number, d:number) {
-      this.gl.viewport(a, b, c, d);
+      line.coord = this.webgl.getAttribLocation(line.prog, "coordinates");
+      this.webgl.vertexAttribPointer(line.coord, 2, this.webgl.FLOAT, false, 0, 0);
+      this.webgl.enableVertexAttribArray(line.coord);
+
+      this.lines.push(line);
    }
 
-   private combine_xy(x:Float32Array, y:Float32Array):Float32Array {
-      let xy = new Float32Array(2*y.length);
-      let j=0;
-      for (let i=0;i<y.length;i++) {
-         xy[j] = x[i];
-         xy[j+1] = y[i];
-         j=j+2;
-      }
-      return xy;
+   public viewport(a: number, b: number, c: number, d: number) {
+      this.webgl.viewport(a, b, c, d);
    }
@@ -253,4 +158,1 @@
  }
-
-
- 

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37599

increased by123.84%

Number of package files

22

increased by214.29%

Lines of code

656

increased by90.7%

Worsened metrics

Dev dependency count

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes