Nature's Particle Manager

    webgl-plot
    TypeScript icon, indicating that this package has built-in type declarations

    0.7.0 • Public • Published

    Npm Build Yarn Build Code scanning Build DOI

    Live demo 🚀

    webgl-plot

    multi-line high-performance 2D plotting library using native WebGL. The advantages are:

    • Simple and efficient 2D WebGL library
    • Using WebGL native line drawing
    • High update rate which matches the screen's refresh rate (FPS)
    • Works for both dynamic and static data
    • supports both thin (native) and thick lines
    • Full control over the color of each line in each frame
    • No dependencies
    • Works on any browsers/platforms that supports WebGL
    • Compatible with OffScreenCanvas and WebWorkers for offloading cpu time from the main thread
    • Ideal for embedded systems with low resources or large datasets

    Use cases

    Dynamic: When plotting real-time multiple waveforms are required. For example, software-based oscilloscopes, Arduino, microcontrollers, FPGA user interfaces. This framework also can be used in combination with ElectronJS.

    Static: Enables rapid pan and zoom capability for inspecting very large datasets. See the static example

    Thick Lines are now supported! 🥳

    However notice that due to computation of the line data points, the performance of the thick lines is nearly 6 times slower than the normal lines. Only use thick lines when you need to see the lines clearly for example when highlighting a specific line. Further information can be found below. For benchmarking, see the benchmark section.

    Getting started

    Create an HTML canvas with an appropriate width or height:

    <div>
      <canvas style="width: 100%;" id="my_canvas"></canvas>
    </div>

    Import the webgl-plot library using ES6 modules:

    import { WebglPlot, WebglLine, ColorRGBA } from "webgl-plot";

    Prepare the canvas:

    const canvas = document.getElementById("my_canvas");
    const devicePixelRatio = window.devicePixelRatio || 1;
    canvas.width = canvas.clientWidth * devicePixelRatio;
    canvas.height = canvas.clientHeight * devicePixelRatio;

    Note: The canvas width and height must be set in order to be able to draw on the canvas.

    Initialization:

    const numX = canvas.width;
    const color = new ColorRGBA(Math.random(), Math.random(), Math.random(), 1);
    const line = new WebglLine(color, numX);
    const wglp = new WebglPlot(canvas);

    Automatically arrange X values between [-1,1]:

    line.arrangeX();

    Add the line to the webgl canvas:

    wglp.addLine(line);

    Configure the requestAnimationFrame call:

    function newFrame() {
      update();
      wglp.update();
      requestAnimationFrame(newFrame);
    }
    requestAnimationFrame(newFrame);

    Add the update function:

    function update() {
      const freq = 0.001;
      const amp = 0.5;
      const noise = 0.1;
    
      for (let i = 0; i < line.numPoints; i++) {
        const ySin = Math.sin(Math.PI * i * freq * Math.PI * 2);
        const yNoise = Math.random() - 0.5;
        line.setY(i, ySin * amp + yNoise * noise);
      }
    }

    Don't forget to update the canvas with wglp.update() each time you want to redraw the changes that you have made to the line objects.

    Edit WebGLplot

    Demos

    See examples based on vanilla JS at webgl-plot-examples

    See examples based on React

    See SPAD Simulation which use WebGL-Plot as an oscilloscope display

    React Examples

    For a basic React example see here:

    Edit WebGL-Plot React

    React website is under development...

    https://webgl-plot-react.vercel.app/

    JS Bundles

    To use WebGL-Plot as a JS pre-bundled package first import the following in your HTML file:

    <script src="https://cdn.jsdelivr.net/gh/danchitnis/webgl-plot@master/dist/webglplot.umd.min.js"></script>

    See examples on how to use this bundle in Codepen and JSfiddle

    For ES6 module and direct browser import use:

    <script type="module" src="your-code.js"></script>

    and in your-code.js:

    import {
      WebglPlot,
      WebglLine,
      ColorRGBA,
    } from "https://cdn.jsdelivr.net/gh/danchitnis/webgl-plot@master/dist/webglplot.esm.min.js";

    Thanks to TimDaub for testing the ES6 module.

    Notice that this method is only recommended for test and small codes.

    SkyPack

    Skypack is a new exciting CDN for ESM Javascript. See the example below on how to use it: JSfiddle

    Benchmark

    Line generation and Frame rate

    Internal test

    ESM, off-screen, UMD

    API Documentation

    See here 📑

    How to use with embedded systems applications?

    You can use WebUSB, Web Bluetooth, and Serial API. You can use ComPort for a basic implementation of Serial API

    Build

    npm i
    npm run build

    License

    MIT

    Install

    npm i webgl-plot

    DownloadsWeekly Downloads

    1,094

    Version

    0.7.0

    License

    MIT

    Unpacked Size

    281 kB

    Total Files

    83

    Last publish

    Collaborators

    • danchitnis