Catmull-Rom interpolation on SVG Paths

Question

I am experimenting with creating high-performance, good-looking pencil tools using SVG paths.

I am logging the mouse coordinates to draw a path. To get a high-fidelity path (accurate to the user's movements) I need to log a point for every pixel movement.

Keeping each and every point in the path creates a huge amount of points which is not ideal for collaborative features later-on (sending huge amount of points back and forth is not efficient), plus parsing huge paths every time I need to manipulate them is a bottleneck

On linear areas of the path, redundant points are removed keeping only the points necessary to represent the segment - I do this using the Ramer-Douglas-Peucker algorithm.

But simplifying a path turns it into a low-fidelity polygon

At this point the paths are effectively just connected lines - therefore the paths look jagged.

A possible solution is to connect the path points with Cubic Bezier's - however this doesn't work nice on simplified paths. The distance between each point is too large for the Cubic Bezier's to "sit" nice so the smoothed path no longer accurately represents the intended path of the user.

Another solution is to simply use a "post-processing" algorithm such as Schneider's Algorithm on the original path - This algorithm won't practically work in real-time though since it's a performance hog

An ideal solution

A solution that(I think) could work is to use a Centripetal Catmull-Rom interpolation.

Out of all the algorithms I researched, this seems to be the most promising since:

1. It doesn't create self-intersections on tight corners
2. It fits more snug on the points thus it more accurately represents the original path.

---

Is Catmull-Rom an algorithm that interpolates a series of regular x/y points or does the original path need to be comprised of curves?

Fanny

Like many other programming languages, SVG can draw quadratic and cubic Bezier curves and arcs, anything more fancy is not in the spec. – Eburnation

@HummelingEngineering Yes I know that, I even mention it in the question – Fanny

@Nicholas_Kyriakides it's an answer to your second question. I think you'll have to describe your path using a sequence of Bezier curves, with control points derived from the Catmull-Rom algorithm. – Eburnation

True - But how is that doable is the question – Fanny

@Nicholas_Kyriakides you didn't mention Bezier curves in your question, while it's the only way to make something smooth in SVG, so, you'll end-up using them anyway. When you have already reduced your data with the Ramer–Douglas–Peucker algorithm, did you try and use these as Bezier control points? – Eburnation

@HummelingEngineering You mean as anchor points, not control points, I guess - If so then yes but I won't have any data to use as the control points, those would be created by performing some kind of curve-fitting such as Catmull-Rom – Fanny

@Nicholas_Kyriakides that's correct, Bezier curves pass through their anchor points and not through their control points. But if they are 'sufficiently close' it might be visually acceptable. – Eburnation

For the sake of accuracy I'd rather go with a reasoned & well-suited algorithm that calculates them instead of arbitrarily choosing the control points position – Fanny

@Nicholas_Kyriakides to my understanding, Catmull-Rom (CR) defines a curve based on 4 points (like Bezier). What you want is something like an inverse CR to get these 4 points based on a (perhaps smoothed) curve segment. – Eburnation

@Nicholas_Kyriakides SVG provides the smooth quadratic curve command, which is denoted by the letter T. The command is followed by the next endpoint of the curve; the control point is calculated automatically, as the specification says, by "reflection of the control point on the previous command relative to the current point." – Eburnation

Not sure if its of use, but I note Snap.svg does access a catmull-rom curveto format in its path command if its of any use, snapsvg.io/docs/#Paper.path ie use R in the path string. – Jocko

@Jocko Yeah it is, because it means that Snap.svg does some internal conversion of Catmull-Rom to Cubic Bezier - Thanks – Fanny

Answer 1

To answer your questions directly:

1. Yes. Catmull-Rom spline is an algorithm to interpolate a series of (x, y, z) points. It will generate a cubic polynomial curve between each two consecutive points.
   
2. You cannot direcly use Catmull Rom spline for SVG path. You need to convert it to cubic Bezier curve first.
   

For a curve segment defined by point P0, P1, P2 and P3 and knot sequence t0, t1, t2, t3, the centripetal Catmull-Rom spline (defined between point P1 and P2) can be computed by the recursive formula provided in https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline. Therefore, I will not elaborate here.

To convert it to cubic Bezier curve, you need to compute the first derivative at P1 and P2 as

M1 = (t2-t1)*(c1*(P1-P0)/(t1-t0) + c2*(P2-P1)/(t2-t1))
M2 = (t2-t1)*(d1*(P2-P1)/(t2-t1) + d2*(P3-P2)/(t3-t2))

Where

 c1 = (t2-t1)/(t2-t0),
 c2 = (t1-t0)/(t2-t0),
 d1 = (t3-t2)/(t3-t1),
 d2 = (t2-t1)/(t3-t1)

Then you can convert it to cubic Bezier curve with 4 control points: Q0, Q1, Q2 and Q3:

Q0 = P1
Q1 = P1 + M1/3
Q2 = P2 - M2/3
Q3 = P2

Quartern

I understand P0, P1, P2 and P3 to be a series of x/y points which I will feed into the CR equation. What is the knot sequence though and what do I get back from the CR equation as a result? – Fanny

The knot sequence is the parameter assigned to each data points. You need to follow the way documented in the Wiki page in my post to assign parameters to obtain centripetal CR spline. Once you have the knot sequence, you can obtain the control points for the cubic Bezier curve. – Quartern

Thanks - I have something working just fine apart from one thing. I have a closed shape and very rarely the spline passes through wrong control points. This might be another question TBH but do you know any cases where the CR 'confuses' the control points(for lack of a better word)? I'm suspecting a case of floating-point number stability. – Fanny

I cannot figure out what the problem is merely from a short text description. Without a more detailed description (preferably a picture showing the problem), I cannot speculate anything. Sorry. – Quartern

Sorry about that - was an issue with the Ramer-Douglas-Peucker. Catmull-Rom works flawlessly - Thanks again – Fanny

Thanks for that answer! Works like a charm! – Denudation

this is not right for Centripetal_Catmull – Crumb

Answer 2

I use interpolation cubics for this

1. sample point on

   • mouse direction change in any axis
   • if mouse traveled some distance for more precision can add: if the angle of direction change too much (I do not use this)
   • if mouse stops (this can be ignored if you use on mouse up/down too)

2. use the sampled points as control points for interpolation cubic

   see Interpolation cubic vs. Bezier cubic you find there also the transformation between interpolation and Bezier cubic

3. if that is not enough you can join lines with the same direction

   Here an example of hand drawings in this way:

   And the SVG:

   <svg width="512" height="512" viewBox="-131.734968 -63.890725 383.802249 203.65153" >
    <path fill="none" stroke="black" stroke-width="1px" data-tool="-1" data-cfg="-1" data-group="-1" data-hair="0" data-dir="0" transform="matrix(1,0,0,1,0,0" d="M -81.842337 36.317509 c 0 0 -0.494188 0.282842 0 0 c 0 0 4.1653 -2.262737 4.447693 -2.545579 c 0.494188 -0.282842 2.188547 -2.262737 2.541539 -2.545579 c 0.282393 -0.282842 2.823932 -2.192026 3.176923 -2.545579 c 0.352991 -0.282842 2.965128 -2.828421 3.176923 -3.181974 c 0.352991 -0.353552 1.623761 -2.899132 1.906154 -3.181974 c 0.211794 -0.353552 2.329744 -2.192026 2.541539 -2.545579 c 0.282393 -0.282842 1.623761 -2.969842 1.906154 -3.181974 c 0.211794 -0.353552 2.400342 -1.697053 2.541539 -1.909184 c 0.282393 -0.212131 0.988376 -1.626342 1.270769 -1.909184 c 0.141196 -0.212131 2.329744 -2.333447 2.541539 -2.545579 c 0.282393 -0.282842 1.411966 -1.626342 1.906154 -1.909184 c 0.211794 -0.212131 3.953505 -2.474869 4.447693 -2.545579 c 0.494188 -0.282842 4.024103 -0.565684 4.447693 -0.636394 c 0.494188 -0.07071 3.247522 -0.494973 3.812308 -0.636394 c 0.423589 -0.07071 4.730086 -1.272789 5.083078 -1.272789 c 0.564786 -0.141421 2.823932 0 3.176923 0 c 0.352991 0 2.823932 0 3.176923 0 c 0.352991 0 2.753333 0 3.176923 0 c 0.352991 0 3.31812 -0.212131 3.812308 0 c 0.423589 0 4.024103 1.626342 4.447693 1.909184 c 0.494188 0.212131 3.459317 2.192026 3.812308 2.545579 c 0.423589 0.282842 2.965128 2.828421 3.176923 3.181974 c 0.352991 0.353552 1.764957 2.61629 1.906154 3.181974 c 0.211794 0.353552 1.270769 4.454764 1.270769 5.091159 c 0.141196 0.565684 0 5.23258 0 5.727554 c 0 0.636394 0 3.889079 0 4.454764 c 0 0.494973 -0.070598 4.596185 0 5.091159 c 0 0.565684 0.423589 4.101211 0.635384 4.454764 c 0.070598 0.494973 1.623761 2.899132 1.906154 3.181974 c 0.211794 0.353552 1.976752 2.474869 2.541539 2.545579 c 0.282393 0.282842 4.730086 0.636394 5.083078 0.636394 c 0.564786 0.07071 2.753333 0 3.176923 0 c 0.352991 0 3.529915 0 3.812308 0 c 0.423589 0 2.04735 0 2.541539 0 c 0.282393 0 4.024103 0 4.447693 0 c 0.494188 0 3.459317 0.07071 3.812308 0 c 0.423589 0 2.89453 -0.565684 3.176923 -0.636394 c 0.352991 -0.07071 2.04735 -0.353552 2.541539 -0.636394 c 0.282393 -0.07071 4.235898 -2.404158 4.447693 -2.545579 c 0.494188 -0.282842 1.482564 -0.989947 1.906154 -1.272789 c 0.211794 -0.141421 3.600513 -2.262737 3.812308 -2.545579 c 0.423589 -0.282842 1.694359 -2.262737 1.906154 -2.545579 c 0.211794 -0.282842 1.623761 -2.192026 1.906154 -2.545579 c 0.211794 -0.282842 2.329744 -2.969842 2.541539 -3.181974 c 0.282393 -0.353552 1.553162 -1.555631 1.906154 -1.909184 c 0.211794 -0.212131 2.823932 -2.899132 3.176923 -3.181974 c 0.352991 -0.353552 2.823932 -2.333447 3.176923 -2.545579 c 0.352991 -0.282842 2.753333 -1.697053 3.176923 -1.909184 c 0.352991 -0.212131 3.459317 -1.838474 3.812308 -1.909184 c 0.423589 -0.212131 2.823932 -0.565684 3.176923 -0.636394 c 0.352991 -0.07071 2.823932 -0.636394 3.176923 -0.636394 c 0.352991 -0.07071 2.823932 0 3.176923 0 c 0.352991 0 2.541539 -0.07071 3.176923 0 c 0.352991 0 5.436069 0.353552 5.718462 0.636394 c 0.635384 0.07071 2.400342 2.050605 2.541539 2.545579 c 0.282393 0.282842 1.058974 4.030501 1.270769 4.454764 c 0.141196 0.494973 1.835555 3.394106 1.906154 3.818369 c 0.211794 0.424263 0.423589 3.323395 0.635384 3.818369 c 0.070598 0.424263 1.553162 3.95979 1.906154 4.454764 c 0.211794 0.494973 2.753333 4.313343 3.176923 4.454764 c 0.352991 0.494973 3.459317 1.131368 3.812308 1.272789 c 0.423589 0.141421 2.823932 1.202079 3.176923 1.272789 c 0.352991 0.141421 2.682735 0.636394 3.176923 0.636394 c 0.352991 0.07071 3.74171 0 4.447693 0 c 0.494188 0 6.000856 0 6.353847 0 c 0.705983 0 2.753333 0 3.176923 0 c 0.352991 0 3.459317 0.07071 3.812308 0 c 0.423589 0 2.682735 -0.424263 3.176923 -0.636394 c 0.352991 -0.07071 4.1653 -1.697053 4.447693 -1.909184 c 0.494188 -0.212131 2.259145 -1.697053 2.541539 -1.909184 c 0.282393 -0.212131 2.04735 -1.697053 2.541539 -1.909184 c 0.282393 -0.212131 4.235898 -1.626342 4.447693 -1.909184 c 0.494188 -0.212131 1.553162 -2.333447 1.906154 -2.545579 c 0.211794 -0.282842 2.753333 -1.697053 3.176923 -1.909184 c 0.352991 -0.212131 3.529915 -1.767763 3.812308 -1.909184 c 0.423589 -0.212131 2.04735 -1.202079 2.541539 -1.272789 c 0.282393 -0.141421 4.094701 -0.636394 4.447693 -0.636394 c 0.494188 -0.07071 2.823932 0 3.176923 0 c 0.352991 0 2.823932 0 3.176923 0 c 0.352991 0 2.753333 0 3.176923 0 c 0.352991 0 3.388718 -0.212131 3.812308 0 c 0.423589 0 3.388718 1.767763 3.812308 1.909184 c 0.423589 0.212131 3.459317 0.919237 3.812308 1.272789 c 0.423589 0.141421 2.965128 2.969842 3.176923 3.181974 c 0.352991 0.353552 1.764957 1.555631 1.906154 1.909184 c 0.211794 0.212131 1.058974 2.899132 1.270769 3.181974 c 0.141196 0.353552 1.835555 2.192026 1.906154 2.545579 c 0.211794 0.282842 0.352991 2.828421 0.635384 3.181974 c 0.070598 0.353552 2.259145 2.899132 2.541539 3.181974 c 0.282393 0.353552 2.117949 2.474869 2.541539 2.545579 c 0.282393 0.282842 3.459317 0.565684 3.812308 0.636394 c 0.423589 0.07071 2.823932 0.636394 3.176923 0.636394 c 0.352991 0.07071 2.823932 -0.07071 3.176923 0 c 0.352991 0 2.753333 0.565684 3.176923 0.636394 c 0.352991 0.07071 3.459317 0.636394 3.812308 0.636394 c 0.423589 0.07071 2.823932 0 3.176923 0 c 0.352991 0 2.682735 0.07071 3.176923 0 c 0.352991 0 4.1653 -0.636394 4.447693 -0.636394 c 0.494188 -0.07071 2.188547 0.212131 2.541539 0 c 0.282393 0 2.682735 -1.697053 3.176923 -1.909184 c 0.352991 -0.212131 4.235898 -1.767763 4.447693 -1.909184 c 0.494188 -0.212131 1.623761 -1.131368 1.906154 -1.272789 c 0.211794 -0.141421 2.329744 -1.060658 2.541539 -1.272789 c 0.282393 -0.141421 1.906154 -1.909184 1.906154 -1.909184 c 0.211794 -0.212131 0 0 0 0m -334.847767 40.092879 c 0 0 -0.352991 -0.141421 0 0 c 0 0 2.682735 1.131368 3.176923 1.272789 c 0.352991 0.141421 4.1653 1.202079 4.447693 1.272789 c 0.494188 0.141421 2.259145 0.494973 2.541539 0.636394 c 0.282393 0.07071 2.188547 1.202079 2.541539 1.272789 c 0.282393 0.141421 2.823932 0.565684 3.176923 0.636394 c 0.352991 0.07071 2.753333 0.565684 3.176923 0.636394 c 0.352991 0.07071 3.459317 0.636394 3.812308 0.636394 c 0.423589 0.07071 2.823932 0 3.176923 0 c 0.352991 0 2.823932 0 3.176923 0 c 0.352991 0 2.823932 0 3.176923 0 c 0.352991 0 2.89453 0 3.176923 0 c 0.352991 0 2.188547 0 2.541539 0 c 0.282393 0 2.823932 0 3.176923 0 c 0.352991 0 2.753333 0 3.176923 0 c 0.352991 0 3.529915 0.141421 3.812308 0 c 0.423589 0 2.04735 -0.989947 2.541539 -1.272789 c 0.282393 -0.141421 4.1653 -2.262737 4.447693 -2.545579 c 0.494188 -0.282842 2.329744 -2.192026 2.541539 -2.545579 c 0.282393 -0.282842 1.835555 -2.687 1.906154 -3.181974 c 0.211794 -0.353552 0.564786 -3.95979 0.635384 -4.454764 c 0.070598 -0.494973 1.200171 -4.242632 0.635384 -4.454764 c 0.070598 -0.494973 -4.659488 -2.050605 -5.083078 -1.909184 c -0.564786 -0.212131 -3.529915 0.989947 -3.812308 1.272789 c -0.423589 0.141421 -2.188547 1.979895 -2.541539 2.545579 c -0.282393 0.282842 -3.176923 4.525474 -3.176923 5.091159 c -0.352991 0.565684 0 4.525474 0 5.091159 c 0 0.565684 -0.282393 4.808317 0 5.091159 c 0 0.565684 2.259145 2.474869 2.541539 2.545579 c 0.282393 0.282842 2.117949 0.424263 2.541539 0.636394 c 0.282393 0.07071 3.388718 1.838474 3.812308 1.909184 c 0.423589 0.212131 3.247522 0.565684 3.812308 0.636394 c 0.423589 0.07071 4.588889 0.636394 5.083078 0.636394 c 0.564786 0.07071 4.1653 0 4.447693 0 c 0.494188 0 2.04735 0 2.541539 0 c 0.282393 0 3.953505 0 4.447693 0 c 0.494188 0 3.671111 0.212131 4.447693 0 c 0.494188 0 6.565642 -1.838474 6.989232 -1.909184 c 0.776581 -0.212131 3.459317 -0.424263 3.812308 -0.636394 c 0.423589 -0.07071 2.753333 -1.767763 3.176923 -1.909184 c 0.352991 -0.212131 3.459317 -0.989947 3.812308 -1.272789 c 0.423589 -0.141421 2.823932 -2.050605 3.176923 -2.545579 c 0.352991 -0.282842 3.106325 -4.030501 3.176923 -4.454764 c 0.352991 -0.494973 1.058974 -3.676948 0.635384 -3.818369 c 0.070598 -0.424263 -3.388718 -1.484921 -3.812308 -1.272789 c -0.423589 -0.141421 -3.459317 1.697053 -3.812308 1.909184 c -0.423589 0.212131 -2.823932 1.626342 -3.176923 1.909184 c -0.352991 0.212131 -2.89453 2.262737 -3.176923 2.545579 c -0.352991 0.282842 -2.47094 2.050605 -2.541539 2.545579 c -0.282393 0.282842 -0.635384 3.889079 -0.635384 4.454764 c -0.070598 0.494973 -0.282393 4.808317 0 5.091159 c 0 0.565684 2.329744 2.404158 2.541539 2.545579 c 0.282393 0.282842 1.623761 1.131368 1.906154 1.272789 c 0.211794 0.141421 2.259145 1.202079 2.541539 1.272789 c 0.282393 0.141421 1.976752 0.424263 2.541539 0.636394 c 0.282393 0.07071 4.588889 1.909184 5.083078 1.909184 c 0.564786 0.212131 3.882906 -0.07071 4.447693 0 c 0.494188 0 4.800684 0.636394 5.083078 0.636394 c 0.564786 0.07071 2.188547 0 2.541539 0 c 0.282393 0 2.823932 -0.07071 3.176923 0 c 0.352991 0 2.612137 0.636394 3.176923 0.636394 c 0.352991 0.07071 4.730086 0 5.083078 0 c 0.564786 0 2.89453 0 3.176923 0 c 0.352991 0 2.188547 0.07071 2.541539 0 c 0.282393 0 2.753333 -0.494973 3.176923 -0.636394 c 0.352991 -0.07071 3.247522 -0.989947 3.812308 -1.272789 c 0.423589 -0.141421 4.730086 -2.333447 5.083078 -2.545579 c 0.564786 -0.282842 2.89453 -1.555631 3.176923 -1.909184 c 0.352991 -0.212131 2.400342 -2.969842 2.541539 -3.181974 c 0.282393 -0.353552 1.129572 -1.484921 1.270769 -1.909184 c 0.141196 -0.212131 1.270769 -3.394106 1.270769 -3.818369 c 0.141196 -0.424263 0 -3.394106 0 -3.818369 c 0 -0.424263 0.352991 -3.606237 0 -3.818369 c 0 -0.424263 -2.682735 -1.909184 -3.176923 -1.909184 c -0.352991 -0.212131 -4.024103 -0.07071 -4.447693 0 c -0.494188 0 -3.671111 0.353552 -3.812308 0.636394 c -0.423589 0.07071 -1.200171 1.979895 -1.270769 2.545579 c -0.141196 0.282842 -0.705983 4.525474 -0.635384 5.091159 c -0.070598 0.565684 0.352991 4.666895 0.635384 5.091159 c 0.070598 0.565684 2.259145 3.535527 2.541539 3.818369 c 0.282393 0.424263 2.259145 2.333447 2.541539 2.545579 c 0.282393 0.282842 2.04735 1.626342 2.541539 1.909184 c 0.282393 0.212131 3.882906 2.333447 4.447693 2.545579 c 0.494188 0.282842 4.800684 1.909184 5.083078 1.909184 c 0.564786 0.212131 2.188547 -0.212131 2.541539 0 c 0.282393 0 2.89453 1.909184 3.176923 1.909184 c 0.352991 0.212131 2.04735 -0.141421 2.541539 0 c 0.282393 0 4.024103 1.131368 4.447693 1.272789 c 0.494188 0.141421 3.247522 1.272789 3.812308 1.272789 c 0.423589 0.141421 4.800684 0 5.083078 0 c 0.564786 0 2.188547 0 2.541539 0 c 0.282393 0 2.823932 0 3.176923 0 c 0.352991 0 2.823932 0 3.176923 0 c 0.352991 0 2.682735 0 3.176923 0 c 0.352991 0 4.1653 0 4.447693 0 c 0.494188 0 2.188547 0.07071 2.541539 0 c 0.282393 0 2.823932 -0.565684 3.176923 -0.636394 c 0.352991 -0.07071 2.823932 -0.424263 3.176923 -0.636394 c 0.352991 -0.07071 2.612137 -1.626342 3.176923 -1.909184 c 0.352991 -0.212131 4.800684 -2.333447 5.083078 -2.545579 c 0.564786 -0.282842 2.188547 -1.626342 2.541539 -1.909184 c 0.282393 -0.212131 2.89453 -2.262737 3.176923 -2.545579 c 0.352991 -0.282842 2.329744 -2.192026 2.541539 -2.545579 c 0.282393 -0.282842 1.764957 -2.61629 1.906154 -3.181974 c 0.211794 -0.353552 1.270769 -4.384053 1.270769 -5.091159 c 0.141196 -0.565684 0.635384 -6.222527 0 -6.363949 c 0 -0.707105 -5.294872 -1.202079 -5.718462 -1.272789 c -0.635384 -0.141421 -3.31812 -0.636394 -3.812308 -0.636394 c -0.423589 -0.07071 -4.094701 -0.353552 -4.447693 0 c -0.494188 0 -3.176923 2.61629 -3.176923 3.181974 c -0.352991 0.353552 0 4.525474 0 5.091159 c 0 0.565684 -0.211794 4.525474 0 5.091159 c 0 0.565684 1.694359 4.949738 1.906154 5.091159 c 0.211794 0.565684 1.694359 1.060658 1.906154 1.272789 c 0.211794 0.141421 1.694359 1.767763 1.906154 1.909184 c 0.211794 0.212131 1.694359 1.131368 1.906154 1.272789 c 0.211794 0.141421 1.553162 0.989947 1.906154 1.272789 c 0.211794 0.141421 2.89453 2.404158 3.176923 2.545579 c 0.352991 0.282842 2.259145 1.202079 2.541539 1.272789 c 0.282393 0.141421 2.259145 0.494973 2.541539 0.636394 c 0.282393 0.07071 2.117949 1.131368 2.541539 1.272789 c 0.282393 0.141421 3.388718 1.202079 3.812308 1.272789 c 0.423589 0.141421 3.459317 0.494973 3.812308 0.636394 c 0.423589 0.07071 2.823932 1.272789 3.176923 1.272789 c 0.352991 0.141421 2.89453 0 3.176923 0 c 0.352991 0 2.188547 0 2.541539 0 c 0.282393 0 2.823932 0 3.176923 0 c 0.352991 0 2.823932 0 3.176923 0 c 0.352991 0 2.89453 0 3.176923 0 c 0.352991 0 2.188547 0 2.541539 0 c 0.282393 0 2.753333 0.07071 3.176923 0 c 0.352991 0 3.388718 -0.494973 3.812308 -0.636394 c 0.423589 -0.07071 3.388718 -0.919237 3.812308 -1.272789 c 0.423589 -0.141421 3.600513 -2.61629 3.812308 -3.181974 c 0.423589 -0.353552 1.835555 -4.596185 1.906154 -5.091159 c 0.211794 -0.565684 0.635384 -3.889079 0.635384 -4.454764 c 0.070598 -0.494973 0.211794 -4.525474 0 -5.091159 c 0 -0.565684 -1.553162 -4.879027 -1.906154 -5.091159 c -0.211794 -0.565684 -2.47094 -1.979895 -3.176923 -1.909184 c -0.352991 -0.212131 -6.142052 0.353552 -6.353847 0.636394 c -0.705983 0.07071 -1.694359 2.192026 -1.906154 2.545579 c -0.211794 0.282842 -1.835555 2.757711 -1.906154 3.181974 c -0.211794 0.353552 -0.564786 3.323395 -0.635384 3.818369 c -0.070598 0.424263 -0.776581 4.030501 -0.635384 4.454764 c -0.070598 0.494973 1.058974 3.535527 1.270769 3.818369 c 0.141196 0.424263 1.482564 2.333447 1.906154 2.545579 c 0.211794 0.282842 3.600513 1.767763 3.812308 1.909184 c 0.423589 0.212131 1.482564 1.131368 1.906154 1.272789 c 0.211794 0.141421 3.31812 1.131368 3.812308 1.272789 c 0.423589 0.141421 4.024103 1.202079 4.447693 1.272789 c 0.494188 0.141421 3.459317 0.636394 3.812308 0.636394 c 0.423589 0.07071 2.682735 0 3.176923 0 c 0.352991 0 4.094701 0 4.447693 0 c 0.494188 0 2.89453 0 3.176923 0 c 0.352991 0 2.117949 0 2.541539 0 c 0.282393 0 3.459317 0 3.812308 0 c 0.423589 0 2.89453 0.141421 3.176923 0 c 0.352991 0 2.04735 -1.060658 2.541539 -1.272789 c 0.282393 -0.141421 4.024103 -1.626342 4.447693 -1.909184 c 0.494188 -0.212131 3.600513 -2.333447 3.812308 -2.545579 c 0.423589 -0.282842 1.623761 -1.484921 1.906154 -1.909184 c 0.211794 -0.212131 2.400342 -3.676948 2.541539 -3.818369 c 0.282393 -0.424263 1.270769 -1.272789 1.270769 -1.272789 c 0.141196 -0.141421 0 0 0 0m -261.143135 -114.551083 c 0 0 -0.352991 0.212131 0 0 c 0 0 2.823932 -1.767763 3.176923 -1.909184 c 0.352991 -0.212131 2.89453 -1.202079 3.176923 -1.272789 c 0.352991 -0.141421 2.259145 -0.424263 2.541539 -0.636394 c 0.282393 -0.07071 2.117949 -1.626342 2.541539 -1.909184 c 0.282393 -0.212131 3.600513 -2.262737 3.812308 -2.545579 c 0.423589 -0.282842 1.623761 -2.404158 1.906154 -2.545579 c 0.211794 -0.282842 2.188547 -0.848526 2.541539 -1.272789 c 0.282393 -0.141421 2.89453 -3.464816 3.176923 -3.818369 c 0.352991 -0.424263 2.47094 -2.828421 2.541539 -3.181974 c 0.282393 -0.353552 0.423589 -2.828421 0.635384 -3.181974 c 0.070598 -0.353552 1.764957 -2.969842 1.906154 -3.181974 c 0.211794 -0.353552 1.270769 -2.474869 1.270769 -1.909184 c 0.141196 -0.212131 0 4.737606 0 5.091159 c 0 0.565684 -0.141196 2.828421 0 3.181974 c 0 0.353552 1.129572 2.757711 1.270769 3.181974 c 0.141196 0.353552 1.129572 3.323395 1.270769 3.818369 c 0.141196 0.424263 1.058974 4.030501 1.270769 4.454764 c 0.141196 0.494973 1.553162 3.323395 1.906154 3.818369 c 0.211794 0.424263 2.89453 4.171922 3.176923 4.454764 c 0.352991 0.494973 2.117949 2.404158 2.541539 2.545579 c 0.282393 0.282842 3.459317 1.060658 3.812308 1.272789 c 0.423589 0.141421 2.753333 1.909184 3.176923 1.909184 c 0.352991 0.212131 3.31812 0.212131 3.812308 0 c 0.423589 0 4.235898 -1.767763 4.447693 -1.909184 c 0.494188 -0.212131 1.411966 -0.919237 1.906154 -1.272789 c 0.211794 -0.141421 4.1653 -2.828421 4.447693 -3.181974 c 0.494188 -0.353552 1.976752 -2.687 2.541539 -3.181974 c 0.282393 -0.353552 4.800684 -4.101211 5.083078 -4.454764 c 0.564786 -0.494973 2.400342 -2.899132 2.541539 -3.181974 c 0.282393 -0.353552 1.058974 -2.262737 1.270769 -2.545579 c 0.141196 -0.282842 1.623761 -2.121316 1.906154 -2.545579 c 0.211794 -0.282842 2.259145 -3.323395 2.541539 -3.818369 c 0.282393 -0.424263 2.329744 -4.737606 2.541539 -4.454764 c 0.282393 -0.494973 1.835555 2.192026 1.906154 2.545579 c 0.211794 0.282842 0.564786 2.757711 0.635384 3.181974 c 0.070598 0.353552 0.494188 3.323395 0.635384 3.818369 c 0.070598 0.424263 1.129572 3.95979 1.270769 4.454764 c 0.141196 0.494973 1.058974 3.95979 1.270769 4.454764 c 0.141196 0.494973 1.553162 4.101211 1.906154 4.454764 c 0.211794 0.494973 3.035727 2.969842 3.176923 3.181974 c 0.352991 0.353552 0.776581 1.767763 1.270769 1.909184 c 0.141196 0.212131 3.953505 1.272789 4.447693 1.272789 c 0.494188 0.141421 4.094701 0 4.447693 0 c 0.494188 0 2.753333 0 3.176923 0 c 0.352991 0 3.388718 0.141421 3.812308 0 c 0.423589 0 3.388718 -1.060658 3.812308 -1.272789 c 0.423589 -0.141421 3.529915 -1.555631 3.812308 -1.909184 c 0.423589 -0.212131 2.259145 -2.899132 2.541539 -3.181974 c 0.282393 -0.353552 2.329744 -2.192026 2.541539 -2.545579 c 0.282393 -0.282842 1.764957 -2.828421 1.906154 -3.181974 c 0.211794 -0.353552 1.129572 -2.969842 1.270769 -3.181974 c 0.141196 -0.353552 0.988376 -1.555631 1.270769 -1.909184 c 0.141196 -0.212131 2.188547 -3.040553 2.541539 -3.181974 c 0.282393 -0.353552 3.106325 -1.767763 3.176923 -1.272789 c 0.352991 -0.141421 0.494188 3.95979 0.635384 4.454764 c 0.070598 0.494973 1.200171 4.030501 1.270769 4.454764 c 0.141196 0.494973 0.494188 3.252685 0.635384 3.818369 c 0.070598 0.424263 1.058974 4.666895 1.270769 5.091159 c 0.141196 0.565684 1.694359 3.394106 1.906154 3.818369 c 0.211794 0.424263 1.623761 3.464816 1.906154 3.818369 c 0.211794 0.424263 2.117949 2.899132 2.541539 3.181974 c 0.282393 0.353552 3.388718 2.474869 3.812308 2.545579 c 0.423589 0.282842 3.31812 0.636394 3.812308 0.636394 c 0.423589 0.07071 4.024103 0 4.447693 0 c 0.494188 0 3.31812 0 3.812308 0 c 0.423589 0 4.024103 0.07071 4.447693 0 c 0.494188 0 3.31812 -0.353552 3.812308 -0.636394 c 0.423589 -0.07071 4.024103 -2.262737 4.447693 -2.545579 c 0.494188 -0.282842 3.388718 -2.192026 3.812308 -2.545579 c 0.423589 -0.282842 3.600513 -2.899132 3.812308 -3.181974 c 0.423589 -0.353552 1.623761 -2.333447 1.906154 -2.545579 c 0.211794 -0.282842 2.400342 -1.555631 2.541539 -1.909184 c 0.282393 -0.212131 0.917777 -2.828421 1.270769 -3.181974 c 0.141196 -0.353552 3.035727 -2.757711 3.176923 -3.181974 c 0.352991 -0.353552 0.988376 -3.889079 1.270769 -3.818369 c 0.141196 -0.424263 2.47094 0.282842 2.541539 0.636394 c 0.282393 0.07071 0.635384 2.757711 0.635384 3.181974 c 0.070598 0.353552 -0.070598 3.464816 0 3.818369 c 0 0.424263 0.564786 2.61629 0.635384 3.181974 c 0.070598 0.353552 0.564786 4.666895 0.635384 5.091159 c 0.070598 0.565684 0.494188 3.464816 0.635384 3.818369 c 0.070598 0.424263 0.988376 2.757711 1.270769 3.181974 c 0.141196 0.353552 1.976752 3.818369 2.541539 3.818369 c 0.282393 0.424263 4.800684 0 5.083078 0 c 0.564786 0 2.04735 0 2.541539 0 c 0.282393 0 4.094701 0 4.447693 0 c 0.494188 0 2.753333 0 3.176923 0 c 0.352991 0 3.388718 0.212131 3.812308 0 c 0.423589 0 3.459317 -1.697053 3.812308 -1.909184 c 0.423589 -0.212131 2.823932 -1.555631 3.176923 -1.909184 c 0.352991 -0.212131 2.89453 -2.969842 3.176923 -3.181974 c 0.352991 -0.353552 2.259145 -1.555631 2.541539 -1.909184 c 0.282393 -0.212131 2.259145 -2.899132 2.541539 -3.181974 c 0.282393 -0.353552 2.188547 -2.192026 2.541539 -2.545579 c 0.282393 -0.282842 2.89453 -2.828421 3.176923 -3.181974 c 0.352991 -0.353552 2.47094 -2.899132 2.541539 -3.181974 c 0.282393 -0.353552 0.635384 -2.545579 0.635384 -2.545579 c 0.070598 -0.282842 0 0 0 0 "/>
   </svg>
   

   It is around 20KB if you play with tresholds you can lower the point count significantly. This is tweaked to suit my needs.

   Here example of how the mouse follow feels during drawing (captured in realtime during drawing)

Lydalyddite

I hate to ask for more info than you already gave but, if you know, how does this compare to my proposed solution? Original Path->RDP->Catmull-Rom? In terms of accuracy / point count / speed. – Fanny

@NicholasKyriakides Not a clue I do not use BEZIER directly (nor Catmul-ROM) these are interpolation cubics so the path goes through the sampled points not approximate to them and the points are converted to SVG bezier cubic control points so the curve is not changed in any way so this should be precise enough. The only thing that can be worse is the extreme direction change quality like in small radius and or spiral screws but this is good enough for me I am driving multi dimensional CNC machines with SVG paths (hence the aditional data in path like tool config...) – Lydalyddite

@NicholasKyriakides the speed is Real-Time the points transformation is O(1) uses two + two - and two * operation per cubic and dimension so no problem there. Never actually measure the time for this as it is computed directly in on mouse event ... and the time measurement would probably took more time then the process itself – Lydalyddite

Do you have an implementation of this in a small test-app I could test now? Seems interesting – Fanny

@NicholasKyriakides not really it is a part of mine SVG editor (the image is taken from it) the source got a bit huge about 4.7MB of pure C++ code ~3.9MB is OpenGL engine ~500KB is SVG and other vector formats (like wmf,emf,dxf and much much more) the editor itself is slightly less then 200KB of code but it will be useless without the engines behind it and those I can not share because it is a corporate code. The rest are windows. I could busted some simple VCL/Canvas editor but hard to say if that would help you. If you want just the App then I can share it somewhere (it is still buggy thou) – Lydalyddite

Nah I'd put you into too much trouble - I'll try and pull together a small HTML5 Canvas/JSFiddle of what you propose when I get some time and see how it behaves. I'll still hold for some more answers preferably on the context of Catmull-Rom but all in all thanks a lot! – Fanny

@Spektre: After checking the formula of your "interpolating cubic", it is actually uniform Catmull Rom spline. – Quartern

@Quartern LOL good to know I use it for a decade (without any clue of this).It was result of a simple linear system with conditions that start and stop direction and position is the same as the previous/next segment. and parameter step 1.0 per segment – Lydalyddite

@NicholasKyriakides just have finished my gif capture multithread implementation to speedup realtime encoding and while testing have also add it to my svg editor so see added image in the bottom of my answer so so you can see how the curves look liked during editing (for comparison to your engine) – Lydalyddite

Answer 3

On the Parameterization of Catmull-Rom Curves see the formula[2]

Online Demo

Crumb