search

steveruizok / perfect-freehand

Draw perfect pressure-sensitive freehand lines.
https://perfectfreehand.com
MIT License
4.52k stars 159 forks source link

Get points for the "center" line? #12

Closed jacopocolo closed 3 years ago

jacopocolo commented 3 years ago

Hi! I'm trying to use this library with three.js and was wondering: is there a way to get points for the "center" (I'm assuming) the library uses to generate the ouline of the stroke? I'm of course not talking about the points provided as an input but the points of the line after smoothing and streamlining are applied.

IMG_AE20CCFBCB5E-1

While it's possible in three.js to generate a 3D mesh in the same way you generate a SVG shape, it would be convenient for a lot of cases and approaches to also have the points of the "centeral" line, without width and miters.

Thanks!

jacopocolo commented 3 years ago

I think I figured it out on my own: the points are available via getStrokePoints.

The one thing I did not understand from documentation is that the function needs to be imported as import { getStrokePoints } from "perfect-freehand"; and not as import getStrokePoints from "perfect-freehand";

I'll leave this open in case Steve wants to call this out specifically in documentation. I believe it would help people like me. Otherwise: feel free to close it.

steveruizok commented 3 years ago

Hey, glad you found the answer. I’ve updated the documentation to also show the imports for those functions.

I’d love to know more about your progress with the 3D mesh. One issue you may have is with how this algo simplifies points: if a new point on the left or right side would be too close to the previous point on that side, we skip the new point. For curved strokes, this often means that more points are added to the “outside” of the curve than to the “inside” of the curve. For a mesh, such a curve would require multiple triangles to share vertices on the inside edge. Anyway, let me know how it goes!