Re:One Year of Excalidraw
by swyx on Friday January 01, 2021 @11:37PM
(#25610430)
if you're interested in the curve algorithm, the author wrote about it https://shihn.ca/posts/2020/roughjs-algorithms/ he's here on HN and on Twitter in case u have follow up qtns
[ Parent
| on HN ]
That's for drawing the sketchy style. Smoothing a hand-drawn shape is something different, I guess.
Actually there is some connection in rough.js' sketchy curve rendering and the way excalidraw smooths the hand-drawn shape. That is the Ramer–Douglas–Peucker algorithm https://en.wikipedia.org/wiki/Ramer%E2%80%93Douglas%E2%80%93...
The way excalidraw does it, it collects all the points from mouse-move events, then uses the algorithm to take those points and reduce the number of points. The reduction is done by a 'distance' parameter in the algorithm. So instead of `n` points, you now have `m` points. m < n. Then excalidraw fits a rough curve through those `m` points. This fitting is automatically done in roughjs. Fewer points and curve fitting gives the effect you mentioned.
(The reduction algorithm is implemented and used from this package: https://github.com/pshihn/bezier-points) p.s. thanks for the shoutout @swyx