Path to polygon

[peteruithoven]

I'd like to convert paths to polygons and while doing that converting curves into multiple straight lines. The reason is that a lot of digital fabrication devices only accept straight lines. Is there anything for this already in svg.js? Besides great tools like the PathArray, the toPath plugin etc of course.

If there isn't I'd like to create some kind of toPolygon plugin.

Articles about converting path (curves) to polygons: http://takuro.ws/2014/03/convert-svg-path-data-to-svg-polygon-data/ https://gist.github.com/Phrogz/845901 http://stackoverflow.com/questions/15247711/convert-an-svg-path-to-polygons-for-use-within-javascript-clipper

[wout]

Yes, I had something lying around and I've quickly put it in a plugin: https://github.com/wout/svg.topoly.js

There is definitely room for improvement though as it could use some straight line and corner detection. Also, there are no specs so I'll have to do that as well.

Any additions are welcome though. I can imagine you have some specific requirements...

[wout]

I'm interested to see what you are building. Is it some kind of gcode generator?

[peteruithoven]

Nice! What do you mean with traight line and corner detection?

I would like to implement the feature of the following gist, where he also adds the existing points to the samples. https://gist.github.com/Phrogz/845901 Here he shows the effect: http://phrogz.net/SVG/convert_path_to_polygon.xhtml

But a bigger problem I found is that Cubic bezier curves seem to be handled incorrectly, they are handled as straight lines by getPointAtLength. https://github.com/wout/svg.topoly.js/issues/1

[peteruithoven]

I'm working with a bunch of people on Tosqa. An aspect is that the machines build using Tosqa can be controlled through using websockets. In the future I hope that visitors of for example Fablabs can visit for the first time, open a website, drag in their design, tweak some settings and press lasercut, mill or 3D print. For Tosqa we've set our next goal in which we want to be able to drag a svg design into a browser and press plot and that it's drawn by a simple motor controlled plotter. Instead of creating a one-off I hope that by improving svg.js it will be easier for developers in general to create webinterfaces to control machines.

And yeah it's more complicated for a machine to do corners so I'm trying to simplify it to straight lines.

[wout]

Straight line detection Currently the plugin simply converts the whole path into equal segments. Ideally the L, T, H and V commands shouldn't be subdivided. They only need a start and an end point. This ignorant approach to subdivision has three downsides:

• it adds unnecessary points, thereby adding unnecessary weight
• sharp edges defined by the start and end points might sometimes be chopped because the getPointAtLength() method defines a point right before or/and after the beginning or end of a straight line
• by adding points where the are not needed, the resolution of curved segments is lowered

So to conclude, only the length of the curved segments should be taken into account as straight lines are only logical connections between the end of the previous and the beginning of the next curved segment. This makes for a more complex evaluation of the shape but it is not unachievable. Adding straight line detection solves the problem of corners automatically.

Tosqua Sounds very interesting. In fact I thought about writing something similar for my Ultimaker but never came to it.

[wout]

Ok, I've been thinking about it and I know how to solve the straight line problem. It's pretty easy but requires a few hours of labour.

Here is what I have in mind:

• explode the path in individual segments
• get the total length of all curved segments
• dedicate a percentile value of length to every curved segment
• convert every curved segment to a path using a multiplication of the percentile value and the sample rate
• implode everything again by gluing in the straight, virtually predefined segments

Et voila.

[peteruithoven]

I gave it a go based on https://gist.github.com/Phrogz/845901 https://github.com/wout/svg.topoly.js/pull/4

[peteruithoven]

Btw, I'm also the lead developer on Doodle3D, this could enable you to control your Ultimaker through a REST API already. www.doodle3d.com/api

[peteruithoven]

@wout So since you merged my attempt I assume you like the approach? I do, so I'll close this issue.

[wout]

Yes, it works great, thanks. I just added som performance improvements but it does the job very well. I added dots to the example.html as a visual reference...

[wout]

Doodle3D looks very cool. It reminds me of a project by a friend:

http://unfold.be/pages/projects/items/nai-ontwerpbox

[peteruithoven]

Thanks for the tip! maybe we'll contact them.