triangulates a 2D polyline into a stroke
Switch branches/tags
Clone or download
Latest commit 25ed2c1 Jan 6, 2016
Permalink
Failed to load latest commit information.
test pulling out dependencies Nov 27, 2014
.gitignore bam! Nov 21, 2014
.npmignore bam! Nov 21, 2014
LICENSE.md bam! Nov 21, 2014
README.md fix typo in example Jan 4, 2016
index.js pulling out dependencies Nov 27, 2014
package.json 1.0.6 Nov 28, 2014
vecutil.js updating deps Nov 27, 2014

README.md

extrude-polyline

unstable

img

Extrudes a 2D polyline with a given line thickness and the desired join/cap types. Tries to maintain visual consistency with HTML5 2D context stroking.

var polyline = [ [25, 25], [15, 60] ]
var stroke = require('extrude-polyline')({ 
    thickness: 20, 
    cap: 'square',
    join: 'bevel',
    miterLimit: 10
})

//builds a triangulated mesh from a polyline
var mesh = stroke.build(polyline)

The returned mesh is a simplicial complex.

{
    positions: [ [x,y], [x,y] ],
    cells: [ [a,b,c], [a,b,c] ]
}

variable thickness

Currently, to achieve variable thickness you can provide a mapThickness function to the stroke instance before building. By default, it will simply return the current thickness.

//create a falloff, so the thickness tapers toward the start of the path
stroke.mapThickness = function(point, index, points) {
    return this.thickness * index/(points.length-1)
}.bind(stroke)

demo

Git clone, npm install, then npm run test

Usage

NPM

stroke = Extrusion([opt])

Creates a new path builder with the given settings:

  • thickness the line thickness
  • miterLimit the limit before miters turn into bevels; default 10
  • join the join type, can be 'miter' or 'bevel' - default 'miter'
  • cap the cap type, can be 'butt' or 'square' - defalut 'butt'

mesh = stroke.build(points)

Builds a stroke with the specified list of 2D points. Returns a simplicial complex.

Roadmap

Some features that could be useful to add at a later point. PRs welcome.

  • round corners
  • round end caps
  • use consistent winding order so we don't need to disable gl.CULLING
  • connecting start and end points
  • optimizations for flat arrays (Float32Array) ?
  • optimizations for GC (pooling, etc)
  • handling anti-aliasing
  • degenerate triangles or some other form of supporting disconnected lines
  • unify codebase with polyline-normals

License

MIT, see LICENSE.md for details.