mattdesl / extrude-polyline Goto Github PK

triangulates a 2D polyline into a stroke

License: MIT License

JavaScript 100.00%

extrude-polyline's Introduction

extrude-polyline

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

`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.

extrude-polyline's People

Contributors

Stargazers

Watchers

Forkers

sidorares dizuo jeffbaumes dxeg fuzhenn netcy 4fe qingzhou413 akira-cn w0lramd mseddon ruijihe dejan-stankovic bluestone029 xianziljl ruofeng618

extrude-polyline's Issues

round caps & joins

a rudimentary implementation might use arcTo and calculate the sin/cos at each step. more advanced would be to precompute the sin/cos for all joins/caps with that thickness

Ported to Haxe

Hi!

Just letting you know that I have ported your library to Haxe programming language (see it here: https://github.com/jeremyfa/polyline).

I did change a few things (like replaced every vec2 type with plain floats) but otherwise it's pretty much the same as yours!

Made it work successfully with my graphics engine:

var points:Array<Float> = [
    25, 25,
    15, 60,
    129, 90,
    110, 75,
    180, 60
];

var stroke = new Stroke();
stroke.thickness = 5;

var mesh = new Mesh();
mesh.color = Color.RED;
mesh.scale(2.0);

stroke.build(points, mesh.vertices, mesh.indices);

Thanks a lot for your original work, if I ever do some improvements on my port, I will for sure let you know!

generate trapezoids instead of triangle mesh

I'd like to use this module to make path strokes server side with X11/XRender, but unfortunately AddTriangles Xrender seem to be unable to stitch edges of triangles without visible border. To draw solid shapes with xrender it is recommended to split it into array of horizontal trapezoids.

Can you suggest an easy way to modify Stroke.build() generate trapezoids instead of triangle mesh?

API enhancement?

Hi @mattdesl!
I am implementing regl-line2d and use this package as a dependency.

As a possible API enhancement I see:

let stroke = require('extrude-polyline')
let points = [x,y, x,y, ...] //or [[x,y], [x,y], ...]
let {positions, cells} = stroke(points, {thickness: (v, i) => v, ...})

That would allow for easier integration/workflow and better performance I believe by avoiding grouping, because sometimes input point array is flat.
Would you consider a PR with such enhancement?

bevel extrudes too far

as seen in the readme screen shot, the bevel extends too far compared to the rest of the line. will most likely get fixed with #1

NaNs with degenerate polyline

Repro:

var extrudePolyline = require("extrude-polyline")
var points = [[109.35,0],[112.35,0],[87.65,0],[90.65,0]];
extrudePolyline({ thickness: 10, cap: 'square', join: 'bevel', miterLimit: 10 }).build(points);

{
  positions: [
    [ 107.85, -1.5 ],
    [ 107.85, 1.5 ],
    [ 112.35, -1.5 ],
    [ NaN, NaN ],
    [ 112.35, 1.5 ],
    [ 87.65, 1.5 ],
    [ NaN, NaN ],
    [ 87.65, -1.5 ],
    [ 92.15, -1.5 ],
    [ 92.15, 1.5 ]
  ],
  cells: [
    [ 0, 1, 2 ],
    [ 2, 1, 3 ],
    [ 2, 3, 4 ],
    [ 3, 4, 5 ],
    [ 3, 5, 6 ],
    [ 5, 6, 7 ],
    [ 6, 7, 8 ],
    [ 6, 8, 9 ]
  ]
}

Admittedly this is a degenerate polyline, but the NaNs were surprising to me regardless.

bevel cannot handle sharp turns

it causes a miter-like effect
will probably have to revisit the way bevel is handled