Anyone up to a challenge? Line "hatch" fill with Paper.js

317 views
Skip to first unread message

James T

unread,
Jul 24, 2015, 4:05:01 PM7/24/15
to Paper.js

I'm current sole developer on a number of open source drawing robot user applications written with JS and Chromium, and I need to generate SVG drawing paths for filled objects.


The above preview of the attached SVG file represents a best case "hatch fill" line path rendering of a given filled SVG path. I believe it was made with Python plugin within Inkscape, which I can't make heads or tails of. This is basically a rendering of the path an actual robot would take to recreate the filled shape, as robots don't have paint buckets :)

Note the smooth curves and efficiency in path continuation, using the fewest number of actual paths, as pickup and move operations to unrelated locations can be costly for drawing robots.

I believe Paper.js to be the right tool, but I don't think I've seen anything even close to this in any example, nor have I seen anything like this for any piece of JS code after much searching.

I've created a naive algorithm using point on path intersection for filled shapes, but it does not handle managing lines or Bezier curves at intersection points equidistant from grid points like the example, nor does it handle any of the TSP probably needed for figuring out path ordering or grouping between sections. This stuff is tricky!

Anything (existing examples, ideas, new code, etc) that could get me close to the above output in Paper.js is what I'm after. Thanks everyone!

 
EscherTSP.svg
Reply all
Reply to author
Forward
0 new messages