Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

webgl-plot

Package Overview
Dependencies
Maintainers
1
Versions
42
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

webgl-plot - npm Package Compare versions

Comparing version 0.2.9 to 0.3.0

215

dist/bundle.js

@@ -13,3 +13,9 @@ var webglplotBundle = (function (exports) {

/**
* Baseline class
*/
class WebglBaseLine {
/**
* @internal
*/
constructor() {

@@ -21,21 +27,24 @@ this.scaleX = 1;

this.loop = false;
this._vbuffer = 0;
this._prog = 0;
this._coord = 0;
this.visible = true;
this.intensity = 1;
}
}
/**
* The standard Line class
*/
class WebglLine extends WebglBaseLine {
//public numPoints: number;
//public xy: Float32Array;
//public color: ColorRGBA;
//public intenisty: number;
//public visible: boolean;
//public coord: number;
/**
* Create a new line
* @param c :the color of the line
* @param numPoints : number of data pints
* @param c - the color of the line
* @param numPoints - number of data pints
* @example
* ```
* ```typescript
* x= [0,1]
* y= [1,2]
* line = new WebglLine( new ColorRGBA(0.1,0.1,0.1,1), 2);
* ```
*/

@@ -47,13 +56,8 @@ constructor(c, numPoints) {

this.color = c;
this.intensity = 1;
this.xy = new Float32Array(2 * this.webglNumPoints);
this.vbuffer = 0;
this.prog = 0;
this.coord = 0;
this.visible = true;
}
/**
*
* @param index : the index of the data point
* @param x : the horizontal value of the data point
* Set the X value at a specific index
* @param index - the index of the data point
* @param x - the horizontal value of the data point
*/

@@ -64,3 +68,3 @@ setX(index, x) {

/**
*
* Set the Y value at a specific index
* @param index : the index of the data point

@@ -72,14 +76,38 @@ * @param y : the vertical value of the data point

}
/**
* Get an X value at a specific index
* @param index - the index of X
*/
getX(index) {
return this.xy[index * 2];
}
/**
* Get an Y value at a specific index
* @param index - the index of Y
*/
getY(index) {
return this.xy[index * 2 + 1];
}
linespaceX(start, stepsize) {
/**
* Make an equally spaced array of X points
* @param start - the start of the series
* @param stepSize - step size between each data point
*
* @example
* ```typescript
* //x = [-1, -0.8, -0.6, -0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8]
* const numX = 10;
* line.lineSpaceX(-1, 2 / numX);
* ```
*/
lineSpaceX(start, stepSize) {
for (let i = 0; i < this.numPoints; i++) {
// set x to -num/2:1:+num/2
this.setX(i, start + stepsize * i);
this.setX(i, start + stepSize * i);
}
}
/**
* Set a constant value for all Y values in the line
* @param c - constant value
*/
constY(c) {

@@ -91,2 +119,12 @@ for (let i = 0; i < this.numPoints; i++) {

}
/**
* Add a new Y values to the end of current array and shift it, so that the total number of the pair remains the same
* @param data - the Y array
*
* @example
* ```typescript
* yArray = new Float32Array([3, 4, 5]);
* line.shiftAdd(yArray);
* ```
*/
shiftAdd(data) {

@@ -103,3 +141,17 @@ const shiftSize = data.length;

/**
* The step based line plot
*/
class WebglStep extends WebglBaseLine {
/**
* Create a new step line
* @param c - the color of the line
* @param numPoints - number of data pints
* @example
* ```typescript
* x= [0,1]
* y= [1,2]
* line = new WebglStep( new ColorRGBA(0.1,0.1,0.1,1), 2);
* ```
*/
constructor(c, num) {

@@ -110,9 +162,9 @@ super();

this.color = c;
this.intensity = 1;
this.xy = new Float32Array(2 * this.webglNumPoints);
this.vbuffer = 0;
this.prog = 0;
this.coord = 0;
this.visible = true;
}
/**
* Set the Y value at a specific index
* @param index - the index of the data point
* @param y - the vertical value of the data point
*/
setY(index, y) {

@@ -125,12 +177,32 @@ this.xy[index * 4 + 1] = y;

}
/**
* Get an X value at a specific index
* @param index - the index of X
*/
getY(index) {
return this.xy[index * 4 + 1];
}
linespaceX(start, stepsize) {
/**
* Make an equally spaced array of X points
* @param start - the start of the series
* @param stepSize - step size between each data point
*
* @example
* ```typescript
* //x = [-1, -0.8, -0.6, -0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8]
* const numX = 10;
* line.lineSpaceX(-1, 2 / numX);
* ```
*/
lineSpaceX(start, stepsize) {
for (let i = 0; i < this.numPoints; i++) {
// set x to -num/2:1:+num/2
this.xy[i * 4] = start + (i * stepsize);
this.xy[i * 4] = start + i * stepsize;
this.xy[i * 4 + 2] = start + (i * stepsize + stepsize);
}
}
/**
* Set a constant value for all Y values in the line
* @param c - constant value
*/
constY(c) {

@@ -142,2 +214,12 @@ for (let i = 0; i < this.numPoints; i++) {

}
/**
* Add a new Y values to the end of current array and shift it, so that the total number of the pair remains the same
* @param data - the Y array
*
* @example
* ```typescript
* yArray = new Float32Array([3, 4, 5]);
* line.shiftAdd(yArray);
* ```
*/
shiftAdd(data) {

@@ -162,5 +244,5 @@ const shiftSize = data.length;

this.xy = new Float32Array(2 * this.webglNumPoints);
this.vbuffer = 0;
this.prog = 0;
this.coord = 0;
this._vbuffer = 0;
this._prog = 0;
this._coord = 0;
this.visible = true;

@@ -177,4 +259,4 @@ this.offsetTheta = 0;

//const thetaA = theta % 360;
const x = r * Math.cos(2 * Math.PI * (theta + this.offsetTheta) / 360);
const y = r * Math.sin(2 * Math.PI * (theta + this.offsetTheta) / 360);
const x = r * Math.cos((2 * Math.PI * (theta + this.offsetTheta)) / 360);
const y = r * Math.sin((2 * Math.PI * (theta + this.offsetTheta)) / 360);
//const index = Math.round( ((theta % 360)/360) * this.numPoints );

@@ -214,9 +296,14 @@ this.setX(index, x);

/**
* The main class for the webgl-plot framework
* The main class for the webgl-plot library
*/
class WebGLplot {
//public backgroundColor: ColorRGBA;
class WebGLPlot {
/**
* Create a webgl-plot instance
* @param canv: the canvas in which the plot appears
* @param canv - the HTML canvas in which the plot appears
*
* @example
* ```typescript
* const canv = dcoument.getEelementbyId("canvas");
* const webglp = new WebGLplot(canv);
* ```
*/

@@ -247,3 +334,3 @@ constructor(canv) {

/**
* update and redraws the content
* updates and redraws the content of the plot
*/

@@ -254,11 +341,16 @@ update() {

if (line.visible) {
webgl.useProgram(line.prog);
const uscale = webgl.getUniformLocation(line.prog, "uscale");
webgl.uniformMatrix2fv(uscale, false, new Float32Array([line.scaleX * this.gScaleX, 0, 0, line.scaleY * this.gScaleY * this.gXYratio]));
const uoffset = webgl.getUniformLocation(line.prog, "uoffset");
webgl.useProgram(line._prog);
const uscale = webgl.getUniformLocation(line._prog, "uscale");
webgl.uniformMatrix2fv(uscale, false, new Float32Array([
line.scaleX * this.gScaleX,
0,
0,
line.scaleY * this.gScaleY * this.gXYratio,
]));
const uoffset = webgl.getUniformLocation(line._prog, "uoffset");
webgl.uniform2fv(uoffset, new Float32Array([line.offsetX + this.gOffsetX, line.offsetY + this.gOffsetY]));
const uColor = webgl.getUniformLocation(line.prog, "uColor");
const uColor = webgl.getUniformLocation(line._prog, "uColor");
webgl.uniform4fv(uColor, [line.color.r, line.color.g, line.color.b, line.color.a]);
webgl.bufferData(webgl.ARRAY_BUFFER, line.xy, webgl.STREAM_DRAW);
webgl.drawArrays((line.loop) ? webgl.LINE_LOOP : webgl.LINE_STRIP, 0, line.webglNumPoints);
webgl.drawArrays(line.loop ? webgl.LINE_LOOP : webgl.LINE_STRIP, 0, line.webglNumPoints);
}

@@ -274,7 +366,13 @@ });

* adds a line to the plot
* @param line : this could be any of line, linestep, histogram, or polar
* @param line - this could be any of line, linestep, histogram, or polar
*
* @example
* ```typescript
* const line = new line(color, numPoints);
* wglp.addLine(line);
* ```
*/
addLine(line) {
line.vbuffer = this.webgl.createBuffer();
this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line.vbuffer);
line._vbuffer = this.webgl.createBuffer();
this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line._vbuffer);
this.webgl.bufferData(this.webgl.ARRAY_BUFFER, line.xy, this.webgl.STREAM_DRAW);

@@ -305,12 +403,19 @@ const vertCode = `

this.webgl.compileShader(fragShader);
line.prog = this.webgl.createProgram();
this.webgl.attachShader(line.prog, vertShader);
this.webgl.attachShader(line.prog, fragShader);
this.webgl.linkProgram(line.prog);
this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line.vbuffer);
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);
line._prog = this.webgl.createProgram();
this.webgl.attachShader(line._prog, vertShader);
this.webgl.attachShader(line._prog, fragShader);
this.webgl.linkProgram(line._prog);
this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line._vbuffer);
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);
}
/**
* Change the WbGL viewport
* @param a
* @param b
* @param c
* @param d
*/
viewport(a, b, c, d) {

@@ -322,6 +427,6 @@ this.webgl.viewport(a, b, c, d);

exports.ColorRGBA = ColorRGBA;
exports.WebGLplot = WebGLplot;
exports.WebglLine = WebglLine;
exports.WebglPolar = WebglPolar;
exports.WebglStep = WebglStep;
exports.default = WebGLPlot;

@@ -328,0 +433,0 @@ return exports;

54

dist/WbglLine.d.ts
import { ColorRGBA } from "./ColorRGBA";
import { WebglBaseLine } from "./WebglBaseLine";
/**
* The standard Line class
*/
export declare class WebglLine extends WebglBaseLine {
/**
* Create a new line
* @param c :the color of the line
* @param numPoints : number of data pints
* @param c - the color of the line
* @param numPoints - number of data pints
* @example
* ```
* ```typescript
* x= [0,1]
* y= [1,2]
* line = new WebglLine( new ColorRGBA(0.1,0.1,0.1,1), 2);
* ```
*/
constructor(c: ColorRGBA, numPoints: number);
/**
*
* @param index : the index of the data point
* @param x : the horizontal value of the data point
* Set the X value at a specific index
* @param index - the index of the data point
* @param x - the horizontal value of the data point
*/
setX(index: number, x: number): void;
/**
*
* Set the Y value at a specific index
* @param index : the index of the data point

@@ -27,8 +31,42 @@ * @param y : the vertical value of the data point

setY(index: number, y: number): void;
/**
* Get an X value at a specific index
* @param index - the index of X
*/
getX(index: number): number;
/**
* Get an Y value at a specific index
* @param index - the index of Y
*/
getY(index: number): number;
linespaceX(start: number, stepsize: number): void;
/**
* Make an equally spaced array of X points
* @param start - the start of the series
* @param stepSize - step size between each data point
*
* @example
* ```typescript
* //x = [-1, -0.8, -0.6, -0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8]
* const numX = 10;
* line.lineSpaceX(-1, 2 / numX);
* ```
*/
lineSpaceX(start: number, stepSize: number): void;
/**
* Set a constant value for all Y values in the line
* @param c - constant value
*/
constY(c: number): void;
/**
* Add a new Y values to the end of current array and shift it, so that the total number of the pair remains the same
* @param data - the Y array
*
* @example
* ```typescript
* yArray = new Float32Array([3, 4, 5]);
* line.shiftAdd(yArray);
* ```
*/
shiftAdd(data: Float32Array): void;
}
//# sourceMappingURL=WbglLine.d.ts.map

67

dist/WbglLine.js
import { WebglBaseLine } from "./WebglBaseLine";
/**
* The standard Line class
*/
export class WebglLine extends WebglBaseLine {
//public numPoints: number;
//public xy: Float32Array;
//public color: ColorRGBA;
//public intenisty: number;
//public visible: boolean;
//public coord: number;
/**
* Create a new line
* @param c :the color of the line
* @param numPoints : number of data pints
* @param c - the color of the line
* @param numPoints - number of data pints
* @example
* ```
* ```typescript
* x= [0,1]
* y= [1,2]
* line = new WebglLine( new ColorRGBA(0.1,0.1,0.1,1), 2);
* ```
*/

@@ -24,13 +22,8 @@ constructor(c, numPoints) {

this.color = c;
this.intensity = 1;
this.xy = new Float32Array(2 * this.webglNumPoints);
this.vbuffer = 0;
this.prog = 0;
this.coord = 0;
this.visible = true;
}
/**
*
* @param index : the index of the data point
* @param x : the horizontal value of the data point
* Set the X value at a specific index
* @param index - the index of the data point
* @param x - the horizontal value of the data point
*/

@@ -41,3 +34,3 @@ setX(index, x) {

/**
*
* Set the Y value at a specific index
* @param index : the index of the data point

@@ -49,14 +42,38 @@ * @param y : the vertical value of the data point

}
/**
* Get an X value at a specific index
* @param index - the index of X
*/
getX(index) {
return this.xy[index * 2];
}
/**
* Get an Y value at a specific index
* @param index - the index of Y
*/
getY(index) {
return this.xy[index * 2 + 1];
}
linespaceX(start, stepsize) {
/**
* Make an equally spaced array of X points
* @param start - the start of the series
* @param stepSize - step size between each data point
*
* @example
* ```typescript
* //x = [-1, -0.8, -0.6, -0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8]
* const numX = 10;
* line.lineSpaceX(-1, 2 / numX);
* ```
*/
lineSpaceX(start, stepSize) {
for (let i = 0; i < this.numPoints; i++) {
// set x to -num/2:1:+num/2
this.setX(i, start + stepsize * i);
this.setX(i, start + stepSize * i);
}
}
/**
* Set a constant value for all Y values in the line
* @param c - constant value
*/
constY(c) {

@@ -68,2 +85,12 @@ for (let i = 0; i < this.numPoints; i++) {

}
/**
* Add a new Y values to the end of current array and shift it, so that the total number of the pair remains the same
* @param data - the Y array
*
* @example
* ```typescript
* yArray = new Float32Array([3, 4, 5]);
* line.shiftAdd(yArray);
* ```
*/
shiftAdd(data) {

@@ -70,0 +97,0 @@ const shiftSize = data.length;

10

dist/WbglPolar.js

@@ -10,5 +10,5 @@ import { WebglBaseLine } from "./WebglBaseLine";

this.xy = new Float32Array(2 * this.webglNumPoints);
this.vbuffer = 0;
this.prog = 0;
this.coord = 0;
this._vbuffer = 0;
this._prog = 0;
this._coord = 0;
this.visible = true;

@@ -25,4 +25,4 @@ this.offsetTheta = 0;

//const thetaA = theta % 360;
const x = r * Math.cos(2 * Math.PI * (theta + this.offsetTheta) / 360);
const y = r * Math.sin(2 * Math.PI * (theta + this.offsetTheta) / 360);
const x = r * Math.cos((2 * Math.PI * (theta + this.offsetTheta)) / 360);
const y = r * Math.sin((2 * Math.PI * (theta + this.offsetTheta)) / 360);
//const index = Math.round( ((theta % 360)/360) * this.numPoints );

@@ -29,0 +29,0 @@ this.setX(index, x);

51

dist/WbglStep.d.ts
import { ColorRGBA } from "./ColorRGBA";
import { WebglBaseLine } from "./WebglBaseLine";
/**
* The step based line plot
*/
export declare class WebglStep extends WebglBaseLine {
/**
* Create a new step line
* @param c - the color of the line
* @param numPoints - number of data pints
* @example
* ```typescript
* x= [0,1]
* y= [1,2]
* line = new WebglStep( new ColorRGBA(0.1,0.1,0.1,1), 2);
* ```
*/
constructor(c: ColorRGBA, num: number);
/**
* Set the Y value at a specific index
* @param index - the index of the data point
* @param y - the vertical value of the data point
*/
setY(index: number, y: number): void;
getX(index: number): number;
/**
* Get an X value at a specific index
* @param index - the index of X
*/
getY(index: number): number;
linespaceX(start: number, stepsize: number): void;
/**
* Make an equally spaced array of X points
* @param start - the start of the series
* @param stepSize - step size between each data point
*
* @example
* ```typescript
* //x = [-1, -0.8, -0.6, -0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8]
* const numX = 10;
* line.lineSpaceX(-1, 2 / numX);
* ```
*/
lineSpaceX(start: number, stepsize: number): void;
/**
* Set a constant value for all Y values in the line
* @param c - constant value
*/
constY(c: number): void;
/**
* Add a new Y values to the end of current array and shift it, so that the total number of the pair remains the same
* @param data - the Y array
*
* @example
* ```typescript
* yArray = new Float32Array([3, 4, 5]);
* line.shiftAdd(yArray);
* ```
*/
shiftAdd(data: Float32Array): void;
}
//# sourceMappingURL=WbglStep.d.ts.map

58

dist/WbglStep.js
import { WebglBaseLine } from "./WebglBaseLine";
/**
* The step based line plot
*/
export class WebglStep extends WebglBaseLine {
/**
* Create a new step line
* @param c - the color of the line
* @param numPoints - number of data pints
* @example
* ```typescript
* x= [0,1]
* y= [1,2]
* line = new WebglStep( new ColorRGBA(0.1,0.1,0.1,1), 2);
* ```
*/
constructor(c, num) {

@@ -8,9 +22,9 @@ super();

this.color = c;
this.intensity = 1;
this.xy = new Float32Array(2 * this.webglNumPoints);
this.vbuffer = 0;
this.prog = 0;
this.coord = 0;
this.visible = true;
}
/**
* Set the Y value at a specific index
* @param index - the index of the data point
* @param y - the vertical value of the data point
*/
setY(index, y) {

@@ -23,12 +37,32 @@ this.xy[index * 4 + 1] = y;

}
/**
* Get an X value at a specific index
* @param index - the index of X
*/
getY(index) {
return this.xy[index * 4 + 1];
}
linespaceX(start, stepsize) {
/**
* Make an equally spaced array of X points
* @param start - the start of the series
* @param stepSize - step size between each data point
*
* @example
* ```typescript
* //x = [-1, -0.8, -0.6, -0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8]
* const numX = 10;
* line.lineSpaceX(-1, 2 / numX);
* ```
*/
lineSpaceX(start, stepsize) {
for (let i = 0; i < this.numPoints; i++) {
// set x to -num/2:1:+num/2
this.xy[i * 4] = start + (i * stepsize);
this.xy[i * 4] = start + i * stepsize;
this.xy[i * 4 + 2] = start + (i * stepsize + stepsize);
}
}
/**
* Set a constant value for all Y values in the line
* @param c - constant value
*/
constY(c) {

@@ -40,2 +74,12 @@ for (let i = 0; i < this.numPoints; i++) {

}
/**
* Add a new Y values to the end of current array and shift it, so that the total number of the pair remains the same
* @param data - the Y array
*
* @example
* ```typescript
* yArray = new Float32Array([3, 4, 5]);
* line.shiftAdd(yArray);
* ```
*/
shiftAdd(data) {

@@ -42,0 +86,0 @@ const shiftSize = data.length;

60

dist/WebglBaseLine.d.ts
import { ColorRGBA } from "./ColorRGBA";
/**
* Baseline class
*/
export declare class WebglBaseLine {
vbuffer: WebGLBuffer;
prog: WebGLProgram;
webglNumPoints: number;
intensity: number;
visible: boolean;
coord: number;
/**
* The number of data point pairs in the line
*/
numPoints: number;
/**
* The data ponits for webgl array
* @internal
*/
xy: Float32Array;
/**
* The Color of the line
*/
color: ColorRGBA;
/**
* The horizontal scale of the line
* @default = 1
*/
scaleX: number;
/**
* The vertical sclae of the line
* @default = 1
*/
scaleY: number;
/**
* The horixontal offset of the line
* @default = 0
*/
offsetX: number;
/**
* the vertical offset of the line
* @default = 0
*/
offsetY: number;
/**
* if this is a close loop line or not
* @default = false
*/
loop: boolean;
/**
* total webgl number of points
* @internal
*/
webglNumPoints: number;
/**
* @private
* @internal
*/
_vbuffer: WebGLBuffer;
/**
* @private
* @internal
*/
_prog: WebGLProgram;
/**
* @private
* @internal
*/
_coord: number;
/**
* @internal
*/
constructor();
}
//# sourceMappingURL=WebglBaseLine.d.ts.map

11

dist/WebglBaseLine.js

@@ -0,2 +1,8 @@

/**
* Baseline class
*/
export class WebglBaseLine {
/**
* @internal
*/
constructor() {

@@ -8,4 +14,9 @@ this.scaleX = 1;

this.loop = false;
this._vbuffer = 0;
this._prog = 0;
this._coord = 0;
this.visible = true;
this.intensity = 1;
}
}
//# sourceMappingURL=WebglBaseLine.js.map

32

dist/webglplot.d.ts

@@ -15,5 +15,8 @@ /**

/**
* The main class for the webgl-plot framework
* The main class for the webgl-plot library
*/
export declare class WebGLplot {
export default class WebGLPlot {
/**
* @private
*/
private webgl;

@@ -51,7 +54,13 @@ /**

* Create a webgl-plot instance
* @param canv: the canvas in which the plot appears
* @param canv - the HTML canvas in which the plot appears
*
* @example
* ```typescript
* const canv = dcoument.getEelementbyId("canvas");
* const webglp = new WebGLplot(canv);
* ```
*/
constructor(canv: HTMLCanvasElement);
/**
* update and redraws the content
* updates and redraws the content of the plot
*/

@@ -62,7 +71,20 @@ update(): void;

* adds a line to the plot
* @param line : this could be any of line, linestep, histogram, or polar
* @param line - this could be any of line, linestep, histogram, or polar
*
* @example
* ```typescript
* const line = new line(color, numPoints);
* wglp.addLine(line);
* ```
*/
addLine(line: WebglBaseLine): void;
/**
* Change the WbGL viewport
* @param a
* @param b
* @param c
* @param d
*/
viewport(a: number, b: number, c: number, d: number): void;
}
//# sourceMappingURL=webglplot.d.ts.map

67

dist/webglplot.js

@@ -14,9 +14,14 @@ /**

/**
* The main class for the webgl-plot framework
* The main class for the webgl-plot library
*/
export class WebGLplot {
//public backgroundColor: ColorRGBA;
export default class WebGLPlot {
/**
* Create a webgl-plot instance
* @param canv: the canvas in which the plot appears
* @param canv - the HTML canvas in which the plot appears
*
* @example
* ```typescript
* const canv = dcoument.getEelementbyId("canvas");
* const webglp = new WebGLplot(canv);
* ```
*/

@@ -47,3 +52,3 @@ constructor(canv) {

/**
* update and redraws the content
* updates and redraws the content of the plot
*/

@@ -54,11 +59,16 @@ update() {

if (line.visible) {
webgl.useProgram(line.prog);
const uscale = webgl.getUniformLocation(line.prog, "uscale");
webgl.uniformMatrix2fv(uscale, false, new Float32Array([line.scaleX * this.gScaleX, 0, 0, line.scaleY * this.gScaleY * this.gXYratio]));
const uoffset = webgl.getUniformLocation(line.prog, "uoffset");
webgl.useProgram(line._prog);
const uscale = webgl.getUniformLocation(line._prog, "uscale");
webgl.uniformMatrix2fv(uscale, false, new Float32Array([
line.scaleX * this.gScaleX,
0,
0,
line.scaleY * this.gScaleY * this.gXYratio,
]));
const uoffset = webgl.getUniformLocation(line._prog, "uoffset");
webgl.uniform2fv(uoffset, new Float32Array([line.offsetX + this.gOffsetX, line.offsetY + this.gOffsetY]));
const uColor = webgl.getUniformLocation(line.prog, "uColor");
const uColor = webgl.getUniformLocation(line._prog, "uColor");
webgl.uniform4fv(uColor, [line.color.r, line.color.g, line.color.b, line.color.a]);
webgl.bufferData(webgl.ARRAY_BUFFER, line.xy, webgl.STREAM_DRAW);
webgl.drawArrays((line.loop) ? webgl.LINE_LOOP : webgl.LINE_STRIP, 0, line.webglNumPoints);
webgl.drawArrays(line.loop ? webgl.LINE_LOOP : webgl.LINE_STRIP, 0, line.webglNumPoints);
}

@@ -74,7 +84,13 @@ });

* adds a line to the plot
* @param line : this could be any of line, linestep, histogram, or polar
* @param line - this could be any of line, linestep, histogram, or polar
*
* @example
* ```typescript
* const line = new line(color, numPoints);
* wglp.addLine(line);
* ```
*/
addLine(line) {
line.vbuffer = this.webgl.createBuffer();
this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line.vbuffer);
line._vbuffer = this.webgl.createBuffer();
this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line._vbuffer);
this.webgl.bufferData(this.webgl.ARRAY_BUFFER, line.xy, this.webgl.STREAM_DRAW);

@@ -105,12 +121,19 @@ const vertCode = `

this.webgl.compileShader(fragShader);
line.prog = this.webgl.createProgram();
this.webgl.attachShader(line.prog, vertShader);
this.webgl.attachShader(line.prog, fragShader);
this.webgl.linkProgram(line.prog);
this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line.vbuffer);
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);
line._prog = this.webgl.createProgram();
this.webgl.attachShader(line._prog, vertShader);
this.webgl.attachShader(line._prog, fragShader);
this.webgl.linkProgram(line._prog);
this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line._vbuffer);
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);
}
/**
* Change the WbGL viewport
* @param a
* @param b
* @param c
* @param d
*/
viewport(a, b, c, d) {

@@ -117,0 +140,0 @@ this.webgl.viewport(a, b, c, d);

16

package.json
{
"name": "webgl-plot",
"version": "0.2.9",
"version": "0.3.0",
"description": "High-performance 2D plotting framework based on native WebGL",
"main": "./dist/webglplot.js",
"typings": "./dist/webgl-plot.d.ts",
"types": "./dist/webgl-plot.d.ts",
"typings": "./dist/webglplot.d.ts",
"types": "./dist/webglplot.d.ts",
"dependencies": {},
"devDependencies": {
"@microsoft/api-documenter": "^7.7.12",
"@microsoft/api-extractor": "^7.7.8",
"rollup": "^1.31.1",
"typedoc": "^0.16.10",
"typedoc-plugin-markdown": "^2.2.16",
"typescript": "^3.8.2"
"rollup": "^2.6.1",
"typedoc": "^0.17.4",
"typedoc-plugin-markdown": "^2.2.17",
"typescript": "^3.8.3"
},

@@ -17,0 +15,0 @@ "scripts": {

184

src/WbglLine.ts

@@ -0,95 +1,113 @@

import { ColorRGBA } from "./ColorRGBA";
import { WebglBaseLine } from "./WebglBaseLine";
import {ColorRGBA} from "./ColorRGBA";
import {WebglBaseLine} from "./WebglBaseLine";
/**
* The standard Line class
*/
export class WebglLine extends WebglBaseLine {
/**
* Create a new line
* @param c - the color of the line
* @param numPoints - number of data pints
* @example
* ```typescript
* x= [0,1]
* y= [1,2]
* line = new WebglLine( new ColorRGBA(0.1,0.1,0.1,1), 2);
* ```
*/
constructor(c: ColorRGBA, numPoints: number) {
super();
this.webglNumPoints = numPoints;
this.numPoints = numPoints;
this.color = c;
//public numPoints: number;
//public xy: Float32Array;
//public color: ColorRGBA;
//public intenisty: number;
//public visible: boolean;
//public coord: number;
this.xy = new Float32Array(2 * this.webglNumPoints);
}
/**
* Set the X value at a specific index
* @param index - the index of the data point
* @param x - the horizontal value of the data point
*/
public setX(index: number, x: number): void {
this.xy[index * 2] = x;
}
/**
* Create a new line
* @param c :the color of the line
* @param numPoints : number of data pints
* @example
* ```typescript
* x= [0,1]
* y= [1,2]
* line = new WebglLine( new ColorRGBA(0.1,0.1,0.1,1), 2);
* ```
*/
constructor(c: ColorRGBA, numPoints: number) {
super();
this.webglNumPoints = numPoints;
this.numPoints = numPoints;
this.color = c;
this.intensity = 1;
this.xy = new Float32Array(2 * this.webglNumPoints);
this.vbuffer = 0;
this.prog = 0;
this.coord = 0;
this.visible = true;
}
/**
* Set the Y value at a specific index
* @param index : the index of the data point
* @param y : the vertical value of the data point
*/
public setY(index: number, y: number): void {
this.xy[index * 2 + 1] = y;
}
/**
*
* @param index : the index of the data point
* @param x : the horizontal value of the data point
*/
public setX(index: number, x: number): void {
this.xy[index * 2] = x;
}
/**
* Get an X value at a specific index
* @param index - the index of X
*/
public getX(index: number): number {
return this.xy[index * 2];
}
/**
*
* @param index : the index of the data point
* @param y : the vertical value of the data point
*/
public setY(index: number, y: number): void {
this.xy[index * 2 + 1] = y;
}
/**
* Get an Y value at a specific index
* @param index - the index of Y
*/
public getY(index: number): number {
return this.xy[index * 2 + 1];
}
public getX(index: number): number {
return this.xy[index * 2];
}
/**
* Make an equally spaced array of X points
* @param start - the start of the series
* @param stepSize - step size between each data point
*
* @example
* ```typescript
* //x = [-1, -0.8, -0.6, -0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8]
* const numX = 10;
* line.lineSpaceX(-1, 2 / numX);
* ```
*/
public lineSpaceX(start: number, stepSize: number): void {
for (let i = 0; i < this.numPoints; i++) {
// set x to -num/2:1:+num/2
this.setX(i, start + stepSize * i);
}
}
public getY(index: number): number {
return this.xy[index * 2 + 1];
}
/**
* Set a constant value for all Y values in the line
* @param c - constant value
*/
public constY(c: number): void {
for (let i = 0; i < this.numPoints; i++) {
// set x to -num/2:1:+num/2
this.setY(i, c);
}
}
public linespaceX(start: number, stepsize: number): void {
for (let i = 0; i < this.numPoints; i++) {
// set x to -num/2:1:+num/2
this.setX(i, start + stepsize * i);
}
}
/**
* Add a new Y values to the end of current array and shift it, so that the total number of the pair remains the same
* @param data - the Y array
*
* @example
* ```typescript
* yArray = new Float32Array([3, 4, 5]);
* line.shiftAdd(yArray);
* ```
*/
public shiftAdd(data: Float32Array): void {
const shiftSize = data.length;
public constY(c: number): void {
for (let i = 0; i < this.numPoints; i++) {
// set x to -num/2:1:+num/2
this.setY(i, c);
}
}
for (let i = 0; i < this.numPoints - shiftSize; i++) {
this.setY(i, this.getY(i + shiftSize));
}
public shiftAdd(data: Float32Array): void {
const shiftSize = data.length;
for (let i = 0; i < this.numPoints - shiftSize; i++) {
this.setY(i, this.getY(i + shiftSize));
}
for (let i = 0; i < shiftSize; i++) {
this.setY(i + this.numPoints - shiftSize, data[i]);
}
}
}
for (let i = 0; i < shiftSize; i++) {
this.setY(i + this.numPoints - shiftSize, data[i]);
}
}
}

129

src/WbglPolar.ts

@@ -0,75 +1,69 @@

import { ColorRGBA } from "./ColorRGBA";
import { WebglBaseLine } from "./WebglBaseLine";
import {ColorRGBA} from "./ColorRGBA";
import {WebglBaseLine} from "./WebglBaseLine";
export class WebglPolar extends WebglBaseLine {
public numPoints: number;
public xy: Float32Array;
public color: ColorRGBA;
public intenisty: number;
public visible: boolean;
public coord: number;
public offsetTheta: number;
public numPoints: number;
public xy: Float32Array;
public color: ColorRGBA;
public intenisty: number;
public visible: boolean;
public coord: number;
public offsetTheta: number;
constructor(c: ColorRGBA, numPoints: number) {
super();
this.webglNumPoints = numPoints;
this.numPoints = numPoints;
this.color = c;
this.intenisty = 1;
this.xy = new Float32Array(2 * this.webglNumPoints);
this._vbuffer = 0;
this._prog = 0;
this._coord = 0;
this.visible = true;
this.offsetTheta = 0;
}
/**
* @param index: index of the line
* @param theta : angle in deg
* @param r : radius
*/
public setRtheta(index: number, theta: number, r: number): void {
//const rA = Math.abs(r);
//const thetaA = theta % 360;
const x = r * Math.cos((2 * Math.PI * (theta + this.offsetTheta)) / 360);
const y = r * Math.sin((2 * Math.PI * (theta + this.offsetTheta)) / 360);
//const index = Math.round( ((theta % 360)/360) * this.numPoints );
this.setX(index, x);
this.setY(index, y);
}
public getTheta(index: number): number {
//return Math.tan
return 0;
}
constructor(c: ColorRGBA, numPoints: number) {
super();
this.webglNumPoints = numPoints;
this.numPoints = numPoints;
this.color = c;
this.intenisty = 1;
this.xy = new Float32Array(2 * this.webglNumPoints);
this.vbuffer = 0;
this.prog = 0;
this.coord = 0;
this.visible = true;
public getR(index: number): number {
//return Math.tan
return Math.sqrt(Math.pow(this.getX(index), 2) + Math.pow(this.getY(index), 2));
}
this.offsetTheta = 0;
}
/**
* @param index: index of the line
* @param theta : angle in deg
* @param r : radius
*/
public setRtheta(index: number, theta: number, r: number): void {
//const rA = Math.abs(r);
//const thetaA = theta % 360;
const x = r * Math.cos(2 * Math.PI * (theta + this.offsetTheta) / 360);
const y = r * Math.sin(2 * Math.PI * (theta + this.offsetTheta) / 360);
//const index = Math.round( ((theta % 360)/360) * this.numPoints );
this.setX(index, x);
this.setY(index, y);
}
private setX(index: number, x: number): void {
this.xy[index * 2] = x;
}
public getTheta(index: number): number {
//return Math.tan
return 0;
}
public getR(index: number): number {
//return Math.tan
return Math.sqrt( Math.pow(this.getX(index),2) + Math.pow(this.getY(index),2) );
}
private setX(index: number, x: number): void {
this.xy[index * 2] = x;
}
private setY(index: number, y: number): void {
this.xy[index * 2 + 1] = y;
}
private setY(index: number, y: number): void {
this.xy[index * 2 + 1] = y;
}
public getX(index: number): number {
return this.xy[index * 2];
}
public getX(index: number): number {
return this.xy[index * 2];
}
public getY(index: number): number {
return this.xy[index * 2 + 1];
}
public getY(index: number): number {
return this.xy[index * 2 + 1];
}
/*public linespaceTheta(start: number, stepsize: number): void {
/*public linespaceTheta(start: number, stepsize: number): void {
for (let i = 0; i < this.numPoints; i++) {

@@ -81,3 +75,3 @@ // set x to -num/2:1:+num/2

/*public constR(c: number): void {
/*public constR(c: number): void {
for (let i = 0; i < this.numPoints; i++) {

@@ -89,3 +83,3 @@ // set x to -num/2:1:+num/2

/*public shiftAdd(data: Float32Array): void {
/*public shiftAdd(data: Float32Array): void {
const shiftSize = data.length;

@@ -102,5 +96,2 @@

}*/
}
}

151

src/WbglStep.ts

@@ -0,71 +1,102 @@

import { ColorRGBA } from "./ColorRGBA";
import { WebglBaseLine } from "./WebglBaseLine";
import {ColorRGBA} from "./ColorRGBA";
import {WebglBaseLine} from "./WebglBaseLine";
/**
* The step based line plot
*/
export class WebglStep extends WebglBaseLine {
/**
* Create a new step line
* @param c - the color of the line
* @param numPoints - number of data pints
* @example
* ```typescript
* x= [0,1]
* y= [1,2]
* line = new WebglStep( new ColorRGBA(0.1,0.1,0.1,1), 2);
* ```
*/
constructor(c: ColorRGBA, num: number) {
super();
this.webglNumPoints = num * 2;
this.numPoints = num;
this.color = c;
this.xy = new Float32Array(2 * this.webglNumPoints);
}
/**
* Set the Y value at a specific index
* @param index - the index of the data point
* @param y - the vertical value of the data point
*/
public setY(index: number, y: number): void {
this.xy[index * 4 + 1] = y;
this.xy[index * 4 + 3] = y;
}
public getX(index: number): number {
return this.xy[index * 4];
}
constructor(c: ColorRGBA, num: number) {
super();
this.webglNumPoints = num * 2;
this.numPoints = num;
this.color = c;
this.intensity = 1;
this.xy = new Float32Array(2 * this.webglNumPoints);
this.vbuffer = 0;
this.prog = 0;
this.coord = 0;
this.visible = true;
}
/**
* Get an X value at a specific index
* @param index - the index of X
*/
public getY(index: number): number {
return this.xy[index * 4 + 1];
}
/**
* Make an equally spaced array of X points
* @param start - the start of the series
* @param stepSize - step size between each data point
*
* @example
* ```typescript
* //x = [-1, -0.8, -0.6, -0.4, -0.2, 0, 0.2, 0.4, 0.6, 0.8]
* const numX = 10;
* line.lineSpaceX(-1, 2 / numX);
* ```
*/
public lineSpaceX(start: number, stepsize: number): void {
for (let i = 0; i < this.numPoints; i++) {
// set x to -num/2:1:+num/2
this.xy[i * 4] = start + i * stepsize;
this.xy[i * 4 + 2] = start + (i * stepsize + stepsize);
}
}
public setY(index: number, y: number): void {
this.xy[index * 4 + 1] = y;
this.xy[index * 4 + 3] = y;
}
/**
* Set a constant value for all Y values in the line
* @param c - constant value
*/
public constY(c: number): void {
for (let i = 0; i < this.numPoints; i++) {
// set x to -num/2:1:+num/2
this.setY(i, c);
}
}
public getX(index: number): number {
return this.xy[index * 4];
}
/**
* Add a new Y values to the end of current array and shift it, so that the total number of the pair remains the same
* @param data - the Y array
*
* @example
* ```typescript
* yArray = new Float32Array([3, 4, 5]);
* line.shiftAdd(yArray);
* ```
*/
public shiftAdd(data: Float32Array): void {
const shiftSize = data.length;
public getY(index: number): number {
return this.xy[index * 4 + 1];
}
for (let i = 0; i < this.numPoints - shiftSize; i++) {
this.setY(i, this.getY(i + shiftSize));
}
public linespaceX(start: number, stepsize: number): void {
for (let i = 0; i < this.numPoints; i++) {
// set x to -num/2:1:+num/2
this.xy[i * 4] = start + (i * stepsize);
this.xy[i * 4 + 2] = start + (i * stepsize + stepsize);
}
}
public constY(c: number): void {
for (let i = 0; i < this.numPoints; i++) {
// set x to -num/2:1:+num/2
this.setY(i, c);
}
}
public shiftAdd(data: Float32Array): void {
const shiftSize = data.length;
for (let i = 0; i < this.numPoints - shiftSize; i++) {
this.setY(i, this.getY(i + shiftSize));
}
for (let i = 0; i < shiftSize; i++) {
this.setY(i + this.numPoints - shiftSize, data[i]);
}
}
}
for (let i = 0; i < shiftSize; i++) {
this.setY(i + this.numPoints - shiftSize, data[i]);
}
}
}

109

src/WebglBaseLine.ts

@@ -1,34 +0,97 @@

import {ColorRGBA} from "./ColorRGBA";
import { ColorRGBA } from "./ColorRGBA";
/**
* Baseline class
*/
export class WebglBaseLine {
public intensity: number;
public visible: boolean;
public vbuffer: WebGLBuffer;
public prog: WebGLProgram;
/**
* The number of data point pairs in the line
*/
public numPoints: number;
public webglNumPoints: number;
/**
* The data ponits for webgl array
* @internal
*/
public xy: Float32Array;
public intensity: number;
public visible: boolean;
public coord: number;
/**
* The Color of the line
*/
public color: ColorRGBA;
public numPoints: number;
public xy: Float32Array;
public color: ColorRGBA;
/**
* The horizontal scale of the line
* @default = 1
*/
public scaleX: number;
public scaleX: number;
public scaleY: number;
public offsetX: number;
public offsetY: number;
/**
* The vertical sclae of the line
* @default = 1
*/
public scaleY: number;
public loop: boolean;
/**
* The horixontal offset of the line
* @default = 0
*/
public offsetX: number;
constructor() {
this.scaleX = 1;
this.scaleY = 1;
this.offsetX = 0;
this.offsetY = 0;
/**
* the vertical offset of the line
* @default = 0
*/
public offsetY: number;
this.loop = false;
}
/**
* if this is a close loop line or not
* @default = false
*/
public loop: boolean;
}
/**
* total webgl number of points
* @internal
*/
public webglNumPoints: number;
/**
* @private
* @internal
*/
public _vbuffer: WebGLBuffer;
/**
* @private
* @internal
*/
public _prog: WebGLProgram;
/**
* @private
* @internal
*/
public _coord: number;
/**
* @internal
*/
constructor() {
this.scaleX = 1;
this.scaleY = 1;
this.offsetX = 0;
this.offsetY = 0;
this.loop = false;
this._vbuffer = 0;
this._prog = 0;
this._coord = 0;
this.visible = true;
this.intensity = 1;
}
}

295

src/webglplot.ts

@@ -9,142 +9,156 @@ /**

import {ColorRGBA} from "./ColorRGBA";
import {WebglLine} from "./WbglLine";
import {WebglStep} from "./WbglStep";
import {WebglPolar} from "./WbglPolar";
import {WebglBaseLine} from "./WebglBaseLine";
import { ColorRGBA } from "./ColorRGBA";
import { WebglLine } from "./WbglLine";
import { WebglStep } from "./WbglStep";
import { WebglPolar } from "./WbglPolar";
import { WebglBaseLine } from "./WebglBaseLine";
export {WebglLine, ColorRGBA, WebglStep, WebglPolar};
export { WebglLine, ColorRGBA, WebglStep, WebglPolar };
/**
* The main class for the webgl-plot framework
* The main class for the webgl-plot library
*/
export class WebGLplot {
export default class WebGLPlot {
/**
* @private
*/
private webgl: WebGLRenderingContext;
private webgl: WebGLRenderingContext;
/**
* Global horizontal scale factor
* @default = 1.0
*/
public gScaleX: number;
/**
* Global horizontal scale factor
* @default = 1.0
*/
public gScaleX: number;
/**
* Global vertical scale factor
* @default = 1.0
*/
public gScaleY: number;
/**
* Global vertical scale factor
* @default = 1.0
*/
public gScaleY: number;
/**
* Global X/Y scale ratio
* @default = 1
*/
public gXYratio: number;
/**
* Global X/Y scale ratio
* @default = 1
*/
public gXYratio: number;
/**
* Global horizontal offset
* @default = 0
*/
public gOffsetX: number;
/**
* Global horizontal offset
* @default = 0
*/
public gOffsetX: number;
/**
* Global vertical offset
* @default = 0
*/
public gOffsetY: number;
/**
* Global vertical offset
* @default = 0
*/
public gOffsetY: number;
/**
* collection of lines in the plot
*/
public lines: WebglBaseLine[];
//public backgroundColor: ColorRGBA;
/**
* collection of lines in the plot
*/
public lines: WebglBaseLine[];
/**
* Create a webgl-plot instance
* @param canv - the HTML canvas in which the plot appears
*
* @example
* ```typescript
* const canv = dcoument.getEelementbyId("canvas");
* const webglp = new WebGLplot(canv);
* ```
*/
constructor(canv: HTMLCanvasElement) {
const 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;
/**
* Create a webgl-plot instance
* @param canv: the canvas in which the plot appears
*/
constructor(canv: HTMLCanvasElement) {
const webgl = canv.getContext("webgl", {
antialias: true,
transparent: false,
}) as WebGLRenderingContext;
const devicePixelRatio = window.devicePixelRatio || 1;
this.lines = [];
// set the size of the drawingBuffer based on the size it's displayed.
canv.width = canv.clientWidth * devicePixelRatio;
canv.height = canv.clientHeight * devicePixelRatio;
this.webgl = webgl;
const webgl = canv.getContext("webgl", {
antialias: true,
transparent: false,
}) as WebGLRenderingContext;
this.gScaleX = 1;
this.gScaleY = 1;
this.gXYratio = 1;
this.gOffsetX = 0;
this.gOffsetY = 0;
this.lines = [];
// Enable the depth test
webgl.enable(webgl.DEPTH_TEST);
this.webgl = webgl;
// Clear the color and depth buffer
webgl.clear(webgl.COLOR_BUFFER_BIT || webgl.DEPTH_BUFFER_BIT);
this.gScaleX = 1;
this.gScaleY = 1;
this.gXYratio = 1;
this.gOffsetX = 0;
this.gOffsetY = 0;
// Set the view port
webgl.viewport(0, 0, canv.width, canv.height);
}
// Enable the depth test
webgl.enable(webgl.DEPTH_TEST);
/**
* updates and redraws the content of the plot
*/
public update(): void {
const webgl = this.webgl;
// Clear the color and depth buffer
webgl.clear(webgl.COLOR_BUFFER_BIT || webgl.DEPTH_BUFFER_BIT);
this.lines.forEach((line) => {
if (line.visible) {
webgl.useProgram(line._prog);
// Set the view port
webgl.viewport(0, 0, canv.width, canv.height);
const uscale = webgl.getUniformLocation(line._prog, "uscale");
webgl.uniformMatrix2fv(
uscale,
false,
new Float32Array([
line.scaleX * this.gScaleX,
0,
0,
line.scaleY * this.gScaleY * this.gXYratio,
])
);
}
const uoffset = webgl.getUniformLocation(line._prog, "uoffset");
webgl.uniform2fv(
uoffset,
new Float32Array([line.offsetX + this.gOffsetX, line.offsetY + this.gOffsetY])
);
/**
* update and redraws the content
*/
public update(): void {
const webgl = this.webgl;
const uColor = webgl.getUniformLocation(line._prog, "uColor");
webgl.uniform4fv(uColor, [line.color.r, line.color.g, line.color.b, line.color.a]);
this.lines.forEach((line) => {
if (line.visible) {
webgl.useProgram(line.prog);
webgl.bufferData(webgl.ARRAY_BUFFER, line.xy as ArrayBuffer, webgl.STREAM_DRAW);
const uscale = webgl.getUniformLocation(line.prog, "uscale");
webgl.uniformMatrix2fv(uscale, false, new Float32Array([line.scaleX * this.gScaleX, 0, 0, line.scaleY * this.gScaleY * this.gXYratio]));
webgl.drawArrays(line.loop ? webgl.LINE_LOOP : webgl.LINE_STRIP, 0, line.webglNumPoints);
}
});
}
const uoffset = webgl.getUniformLocation(line.prog, "uoffset");
webgl.uniform2fv(uoffset, new Float32Array([line.offsetX + this.gOffsetX, line.offsetY + this.gOffsetY]));
public clear(): void {
// Clear the canvas //??????????????????
//this.webgl.clearColor(0.1, 0.1, 0.1, 1.0);
this.webgl.clear(this.webgl.COLOR_BUFFER_BIT || this.webgl.DEPTH_BUFFER_BIT);
}
const uColor = webgl.getUniformLocation(line.prog, "uColor");
webgl.uniform4fv(uColor, [line.color.r, line.color.g, line.color.b, line.color.a]);
/**
* adds a line to the plot
* @param line - this could be any of line, linestep, histogram, or polar
*
* @example
* ```typescript
* const line = new line(color, numPoints);
* wglp.addLine(line);
* ```
*/
public addLine(line: WebglBaseLine): void {
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);
webgl.bufferData(webgl.ARRAY_BUFFER, line.xy as ArrayBuffer, webgl.STREAM_DRAW);
webgl.drawArrays( (line.loop)?webgl.LINE_LOOP:webgl.LINE_STRIP , 0, line.webglNumPoints);
}
});
}
public clear(): void {
// Clear the canvas //??????????????????
//this.webgl.clearColor(0.1, 0.1, 0.1, 1.0);
this.webgl.clear(this.webgl.COLOR_BUFFER_BIT || this.webgl.DEPTH_BUFFER_BIT);
}
/**
* adds a line to the plot
* @param line : this could be any of line, linestep, histogram, or polar
*/
public addLine(line: WebglBaseLine): void {
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 = `
const vertCode = `
attribute vec2 coordinates;

@@ -158,13 +172,13 @@ uniform mat2 uscale;

// Create a vertex shader object
const vertShader = this.webgl.createShader(this.webgl.VERTEX_SHADER);
// Create a vertex shader object
const vertShader = this.webgl.createShader(this.webgl.VERTEX_SHADER);
// Attach vertex shader source code
this.webgl.shaderSource( vertShader as WebGLShader, vertCode);
// Attach vertex shader source code
this.webgl.shaderSource(vertShader as WebGLShader, vertCode);
// Compile the vertex shader
this.webgl.compileShader( vertShader as WebGLShader);
// Compile the vertex shader
this.webgl.compileShader(vertShader as WebGLShader);
// Fragment shader source code
const fragCode = `
// Fragment shader source code
const fragCode = `
precision mediump float;

@@ -176,26 +190,29 @@ uniform highp vec4 uColor;

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);
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.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line._vbuffer);
this.webgl.bindBuffer(this.webgl.ARRAY_BUFFER, line.vbuffer);
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);
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);
}
this.lines.push(line);
}
public viewport(a: number, b: number, c: number, d: number): void {
this.webgl.viewport(a, b, c, d);
}
/**
* Change the WbGL viewport
* @param a
* @param b
* @param c
* @param d
*/
public viewport(a: number, b: number, c: number, d: number): void {
this.webgl.viewport(a, b, c, d);
}
}
dist/webgl-plot.d.ts
dist/WbglLine.d.ts.map

Sorry, the diff of this file is not supported yet

dist/WbglLine.js.map

Sorry, the diff of this file is not supported yet

dist/WbglPolar.d.ts.map

Sorry, the diff of this file is not supported yet

dist/WbglPolar.js.map

Sorry, the diff of this file is not supported yet

dist/WbglStep.d.ts.map

Sorry, the diff of this file is not supported yet

dist/WbglStep.js.map

Sorry, the diff of this file is not supported yet

dist/WebglBaseLine.d.ts.map

Sorry, the diff of this file is not supported yet

dist/WebglBaseLine.js.map

Sorry, the diff of this file is not supported yet

dist/webglplot.d.ts.map

Sorry, the diff of this file is not supported yet

dist/webglplot.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc