![](\"https://flekschas.github.io/regl-line/teaser.gif\")
\n\n \n
\n Click here to see ☝️ in action!\n
\n\nThis small library is inspired by [Regl's line example](http://regl.party/examples?line) and Matt Deslauriers' [wonderful blog post on drawing lines in WebGL](https://mattdesl.svbtle.com/drawing-lines-is-hard).\n\n## Install\n\n```\nnpm -i regl-line\n```\n\n## Getting started\n\n```javascript\nimport createRegl from 'regl';\nimport createCamera from 'canvas-orbit-camera';\nimport createLine from 'regl-line';\n\n// Setup the canvas\nconst canvas = document.getElementById('canvas');\nconst { width, height } = canvas.getBoundingClientRect();\ncanvas.width = width * resize.scale;\ncanvas.height = height * resize.scale;\n\n// Setup Regl\nconst regl = createRegl(canvas);\nconst camera = createCamera(canvas);\n\n// Create a line\nconst line = createLine(regl, {\n width: 2,\n color: [0.8, 0.2, 0.0, 1.0],\n is2d: true,\n // Flat list of normalized-device coordinates\n points: [-0.9, +0.9, +0.9, +0.9, +0.9, -0.9, -0.9, -0.9, -0.9, +0.85],\n});\n\n// Draw\nregl.frame(() => {\n regl.clear({ color: [0, 0, 0, 1], depth: 1 });\n camera.tick();\n line.draw({ view: camera.view() });\n});\n```\n\nFor a complete example, see [example/index.js](example/index.js).\n\n### Draw Multiple Lines At Once\n\nTo draw multiple lines, you can pass a list of lists of flat point coordinates to `setPoints()` or the constructor.\n\n```javascript\nline.setPoints([\n [-0.8, +0.9, +0.8, +0.9], // top line\n [+0.9, +0.8, +0.9, -0.8], // right line\n [+0.8, -0.9, -0.8, -0.9], // bottom line\n [-0.9, -0.8, -0.9, +0.8], // left line\n]);\n```\n\n### Variable Line Color\n\nTo give each line an individual color, you have to do 2 things. First, you have to specify **all** the colors you plan to use.\n\n```javascript\nline.setStyle({\n color: [\n [0, 1, 1, 1], // cyan\n [1, 1, 0, 1], // yellow\n ],\n});\n```\n\nNext, when you set the points (with `setPoints()`), specify an array of indices to associate lines with your previously specified colors.\n\n```javascript\nline.setPoints(points, {\n colorIndices: [\n 0, // top line will be cyan\n 1, // right line will be yellow\n 0, // bottom line will be cyan\n 1, // left line will be yellow\n ],\n});\n```\n\n#### Color Gradient\n\nYou could even go one step further and specify the color for each point on the line using a list of list of indices.\n\n```javascript\nline.setPoints(points, {\n colorIndices: [\n [0, 0, 1, 1], // top line will have a cyan to yellow gradient\n [1, 1, 0, 0], // right line will have a yellow to cyan gradient\n [0, 1, 0, 1], // bottom line will have a cyan, yellow, cyan, yellow gradient\n [0, 1, 1, 0], // left line will have a cyan, yellow, cyan gradient\n ],\n});\n```\n\n### Variable Line Opacity\n\nTo adjust, you can adjust the line width using\n\n```javascript\nline.setPoints(points, {\n opacities: [\n 0.25, // top line will have an opacity of 0.25\n 0.5, // right line will have an opacity of 0.5\n 0.75, // bottom line will have an opacity of 0.75\n 1.0, // left line will have an opacity of 1.0\n ],\n});\n```\n\nSimilar to [color gradient](#color-gradient), you can also specify the opacity for each point on the line using a list of list of numbers.\n\n### Variable Line Width\n\nTo adjust, you can adjust the line width using\n\n```javascript\nline.setPoints(points, {\n widths: [\n 1, // top line will have a width of 1\n 2, // right line will have a width of 2\n 3, // bottom line will have a width of 3\n 4, // left line will have a width of 4\n ],\n});\n```\n\nSimilar to [color gradient](#color-gradient), you can also specify the width for each point on the line using a list of list of numbers.\n\n## API\n\n### Constructor\n\n# createLine(regl, options = {})\n\nCreate a line instance.\n\nArgs:\n\n1. `regl` [regl]: Regl instance to be used for drawing the line.\n2. `options` [object]: An object with the following props to customize the line creator.\n - `projection` [[mat4](http://glmatrix.net/docs/module-mat4.html)]: projection matrix (Defaut: _identity matrix_)\n - `model` [[mat4](http://glmatrix.net/docs/module-mat4.html)]: model matrix (Defaut: _identity matrix_)\n - `view` [[mat4](http://glmatrix.net/docs/module-mat4.html)]: view matrix (Defaut: _identity matrix_)\n - `points` [array]: flat list of normalized-device coordinates alternating x,y if `is2d` is `true` or x,y,z. (Defaut: `[]`). To draw multiple lines at once, pass in a list of lists of coordinates.\n - `widths` [array]: flat array of point-wise widths, i.e., the line width at every point. (Defaut: `[]`)\n - `color` [array]: a quadruple of floats (RGBA) ranging in [0,1] defining the color of the line. (Defaut: `[0.8, 0.5, 0, 1]`)\n - `width` [number]: uniform line width scalar. This number sets the base line width. (Defaut: `1`)\n - `miter` [boolean]: if `true` line segments are [miter joined](https://en.wikipedia.org/wiki/Miter_joint). (Defaut: `true`)\n - `is2d` [boolean]: if `true` points are expected to have only x,y coordinates otherwise x,y,z coordinates are expected. (Defaut: `false`)\n - `zPos2d` [number]: if `is2d` is `true` this value defines the uniform z coordinate. (Defaut: `0`)\n\nReturns: `line` instance.\n\n### Methods\n\n# line.clear()\n\nClears all of the data to remove the drawn line.\n\n# line.destroy()\n\nDestroys all related objects to free memory.\n\n# line.draw({ projection, model, view })\n\nDraws the line according to the `projection`, `model`, and `view` matrices.\n\nArgs:\n\n1 `options` [object]:\n\n- `projection` [[mat4](http://glmatrix.net/docs/module-mat4.html)]: projection matrix (Defaut: _identity matrix_)\n- `model` [[mat4](http://glmatrix.net/docs/module-mat4.html)]: model matrix (Defaut: _identity matrix_)\n- `view` [[mat4](http://glmatrix.net/docs/module-mat4.html)]: view matrix (Defaut: _identity matrix_)\n\n# line.getBuffer()\n\nGet a reference to the point, width, and color index [buffer objects](http://regl.party/api#buffers). This can be useful for efficient animations.\n\nReturns: `{ points, widths, colorIndices }`\n\n# line.getData()\n\nGet a reference to the buffers' [typed data arrays](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays).\n\nReturns: `{ points, widths, colorIndices }`\n\n# line.getPoints()\n\nGet the original list of points defining the line.\n\nReturn: flat `array` of points\n\n# line.getStyle()\n\nGet all the style settings.\n\nReturns: `{ color, miter, width }`\n\n# line.setPoints(points, widths, is2d)\n\nSet points defining the line, the point-wise widths, and change the dimensionality.\n\nArgs:\n\n1. `points` [array]: flat list of normalized-device coordinates alternating x,y if `is2d` is `true` or x,y,z. To draw multiple lines at once, pass in a list of lists of coordinates.\n2. `widths` [array]: flat array of point-wise widths, i.e., the line width at every point.\n3. `is2d` [boolean]: if `true` points are expected to have only x,y coordinates otherwise x,y,z coordinates are expected.\n\n# line.setStyle({ color, miter, width })\n\nArgs:\n\n1. `option` [object]:\n - `color` [array]: a quadruple of floats (RGBA) ranging in [0,1] defining the color of the line.\n - `width` [number]: uniform line width scalar. This number sets the base line width.\n - `miter` [boolean]: if `true` line segments are [miter joined](https://en.wikipedia.org/wiki/Miter_joint).\n","readmeFilename":"README.md"}