0

When drawing by coordinates with mouse events, you get just connected lines. I looked at several algorithms that make a smooth curve, but all this happens in post-processing, when the user has finished drawing, and even then the lines turn into a curve.

https://i.stack.imgur.com/DzYyO.gif - post processing lines

How can I make a smooth curve in real time like in the gif below? Catmull–Rom spline seem to do something similar, but it seems I'm digging in the wrong place. Is there a standard solution to this problem so as not to reinvent the wheel?

https://i.stack.imgur.com/B8bCx.gif - Smooth curves in real time

P.S I can't use post-processing algorithms if they require the path to be ready. If you use them, then the curve will constantly change. https://soswow.github.io/fit-curve/demo

P.S2 I need the curve to go through the coordinates. And if I understand correctly, then we need interpolation, not approximation.

SergeyPopov
  • 111
  • 2
  • 1
    Actually all mouse/cursor generated line smoothing concepts are post-processed: some approaches will approximate an average point point from the last (60+fps) fired mouse coordinates - others will use methods introducing noticeable rendering delays – due to more aggressive point interpolation methods. However, it doesn't have to be that jittery as in your linked example. Please have a look at [SVG smooth freehand drawing](https://stackoverflow.com/questions/40324313/svg-smooth-freehand-drawing/) – herrstrietzel Oct 27 '22 at 02:20
  • You can use cubics directly without post processing see [Catmull-Rom interpolation on SVG Paths](https://stackoverflow.com/a/30750626/2521214) – Spektre Oct 27 '22 at 06:53

1 Answers1

0

I once had a student implement something like this based on a paper called Real time spline curves from interactively sketched data by Banks and Cohen. If I recall correctly, they were building rational Bézier curves from the mouse samples. So for SVG and most other computer graphics systems you would need to turn those into cubic Bézier splines.

I don't recall whether the approach is guaranteed to pass through the input coordinates. Chances are it will not, so please judge for yourself whether that might still be acceptable.

MvG
  • 57,380
  • 22
  • 148
  • 276