{"id":22120078,"url":"https://github.com/joshbrew/webgl-plot-utils","last_synced_at":"2025-03-24T06:26:11.500Z","repository":{"id":50550617,"uuid":"451759039","full_name":"joshbrew/webgl-plot-utils","owner":"joshbrew","description":"A quality of life wrapper for webgl-plot library","archived":false,"fork":false,"pushed_at":"2024-06-30T08:00:14.000Z","size":343,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-19T15:49:22.423Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joshbrew.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-01-25T06:18:33.000Z","updated_at":"2024-06-30T08:00:17.000Z","dependencies_parsed_at":"2023-02-08T08:31:26.764Z","dependency_job_id":"ef6d6f9c-d260-4cd2-9a15-031468786e46","html_url":"https://github.com/joshbrew/webgl-plot-utils","commit_stats":{"total_commits":73,"total_committers":1,"mean_commits":73.0,"dds":0.0,"last_synced_commit":"d8b920861eeb2c0c9a3caa2511ff6743f50d0e3c"},"previous_names":["brainsatplay/webgl-plot-utils"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshbrew%2Fwebgl-plot-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshbrew%2Fwebgl-plot-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshbrew%2Fwebgl-plot-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joshbrew%2Fwebgl-plot-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joshbrew","download_url":"https://codeload.github.com/joshbrew/webgl-plot-utils/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245219908,"owners_count":20579668,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-01T14:20:16.637Z","updated_at":"2025-03-24T06:26:11.437Z","avatar_url":"https://github.com/joshbrew.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webgl-plot-utils\n\nA quality of life wrapper for webgl-plot library. For creating simple, stacked real time plots.\nIncl thicc (triangle strip) lines, autoscaling for stacking, auto-interpolation or auto-slicing, text overlay support. If you don't specify the min and max yourself they will be calculated dynamically for up to 100K samples on line init, after that things start to overflow. \n\nYou can render millions of samples in real time. You can push partial buffers as well and the values will circularly buffer for you, but it's best to manage the WebglLine arrays manually if you need TONS of samples to render in real time. This library otherwise is convenient for animating and autoscaling tens of thousands of samples in real time.\n\n~13kb dist\n\n![Capture](./Capture.PNG)\n\n\n```ts\n\ntype WebglLinePlotProps = {\n    canvas:HTMLCanvasElement,\n    width?:number,\n    height?:number,\n    lineWidth?:number, //can specify the width of all lines by default\n    linePoints?:number, //can specify default number of points on lines\n    webglOptions?:{\n        antialias?:boolean,\n        transparent?:boolean,\n        desynchronized?:boolean,\n        powerPerformance?:'default'|'high-performance'|'low-power',\n        preserveDrawing?:boolean,\n        debug?:boolean\n    },\n    mode?:'sweep'|'scroll', //defaults to scrolling, sweep is more like a hospital monitor.\n    sweepColor?:string, //sweep line fillStyle\n    overlay?:HTMLCanvasElement|boolean, //automatically print the max and min values of the stacked lines\n    overlayColor?:string, //overlay canvas fillStyle string\n    overlayFont?:string,  //overlay canvas font string\n    lines:{\n        [key:string]:WebglLineProps|number[]\n    },\n    dividerColor?:[number,number,number,number]|ColorRGBA, //default gray\n    generateNewLines?:boolean, //if unrecognized lines are in an update, reinit the plot?\n    cleanGeneration?:boolean, //on regeneration, remove any lines not in the current update?\n    [key:string]:any\n}\n\ntype WebglLineProps = {\n    values?:number[]\n    color?:[number,number,number,number]|ColorRGBA,  \n\n    position?:number, //stack position? default is the order you define the lines in this object or you can have them overlap\n    autoscale?:boolean|2, //autoscale the data to -1 and 1 and stack, default true so you can just pass whatever, setting 2 allows for clamping but is slower (CPU based)\n    scaled?:number[], //rescaled values (same as values if autoscale is false)\n    ymin?:number, //min y to scale based on? sets bottom of line visible\n    ymax?:number, //max y to scale based on? sets top of line visible\n    centerZero?:boolean, //center the line at zero (if autoscaling), i.e. the positive and negative axis get the same amount of space, default false\n    xAxis?:boolean, //draw an xaxis, default true\n    xColor?:[number,number,number,number]|ColorRGBA, //default gray and transparent\n    width?:number, //use thick triangle strip lines instead, 6x slower!!\n    interpolate?:boolean, //we can up or downsample data provided to update arrays, else we will use the end of the array for the slice (assuming you're pushing to an array and visualizing the incoming data)\n    useOverlay?:boolean, //specify if you want this line to print, set false for overlapping lines to prevent printing on top of each other (for now)\n    units?:string, //units to appear on overlay\n    viewing?:boolean, //are we rendering this line? reinit every time you want to change this setting\n    [key:string]:any\n} \u0026 ({ //define a fixed number of points\n        nPoints?:number\n    }|{ //or define by number of seconds + samplerate\n        nSec?:number, \n        sps?:number\n    }|{\n        points?:number\n    })\n\n\n//returned from initPlot, you can reinit at any time by modifying the settings and passi\ntype WebglLinePlotInfo = {\n    plot:WebglPlot,\n    settings:WebglLinePlotProps, //settings, modified\n    initial:WebglLinePlotProps, //original unmodified settings\n    anim:any\n}\nimport {WebglLinePlotUtil} from 'webgl=plot-utils'\n\nlet plotter = new WebglLinePlotUtil()\n\nlet canvas = document.createElement('canvas')\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\ncanvas.style.width = window.innerWidth;\ncanvas.style.height = window.innerHeight;\n\ndocument.appendChild(canvas);\n\nlet settings = {\n    canvas,\n    overlay:true,\n    lines:{\n        'a': {\n            values:new Array(10000).fill(Date.now()).map((v,i) =\u003e Math.sine(i*0.001+v)),\n            color:[0,255,0,1]\n        },\n        'b': {\n            values:new Array(10000).fill(Date.now()+2).map((v,i) =\u003e Math.cos(i*0.001+v)),\n            color:[255,0,0,1],\n            width:4\n        },\n        'c': {\n            values:new Array(10000).fill(Date.now()+3).map((v,i) =\u003e Math.cos(i*0.001)*Math.sine(i*0.001+v)),\n            color:[0,0,255,1],\n            width:8\n        }\n    };\n}\n\nlet plot = plotter.initPlot(settings);\n\nlet anim = () =\u003e {\n    let lines = {\n        'a': {\n            values:new Array(10000).fill(Date.now()).map((v,i) =\u003e Math.sine(i*0.001+v))\n        },\n        'b': {\n            values:new Array(10000).fill(Date.now()+2).map((v,i) =\u003e Math.cos(i*0.001+v))\n        },\n        'c': {\n            values:new Array(10000).fill(Date.now()+3).map((v,i) =\u003e Math.cos(i*0.001)*Math.sine(i*0.001+v))\n        } //or set each key as arrays to avoid an additional object being created \n    };\n\n    plotter.update(plot,lines);\n\n    requestAnimationFrame(anim);\n}\n\nanim();\n\n//... later to change the plot but recycle the webgl context:\n\nplotter.reinitPlot(plotInfo,{_id:plotInfo.settings._id, lines} as any); //\n```\n\nReinitialize the plot at any time with new line settings etc. Plots with generateNewLines set to true can detect lines added when calling `update` after first initialization, and if cleanGeneration is false it can keep adding more lines and keep the originals e.g. for asynchronous data updates from different sources to a single graph\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshbrew%2Fwebgl-plot-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoshbrew%2Fwebgl-plot-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoshbrew%2Fwebgl-plot-utils/lists"}