Internal lib - Use monotone cubic interpolation to create smooth paths without dips

Author: graphieros

src/lib.js

@@ -735,38 +735,48 @@ export function createStraightPath(points) {
     return arr.join(' ').trim()
 }
 
-export function createSmoothPath(points, smoothing = 0.2) {
-    function line(pointA, pointB) {
-        const lengthX = pointB.x - pointA.x;
-        const lengthY = pointB.y - pointA.y;
-        return {
-            length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
-            angle: Math.atan2(lengthY, lengthX)
-        };
+// Monotone cubic interpolation
+export function createSmoothPath(points) {
+    if (points.length < 2) return '0,0';
+
+    const n = points.length - 1;
+    const path = [`${checkNaN(points[0].x)},${checkNaN(points[0].y)}`];
+    const dx = [], dy = [], slopes = [], tangents = [];
+
+    for (let i = 0; i < n; i += 1) {
+        dx[i] = points[i + 1].x - points[i].x;
+        dy[i] = points[i + 1].y - points[i].y;
+        slopes[i] = dy[i] / dx[i];
     }
-    function controlPoint(current, previous, next, reverse) {
-        const p = previous || current;
-        const n = next || current;
-        const o = line(p, n);
-
-        const angle = o.angle + (reverse ? Math.PI : 0);
-        const length = o.length * smoothing;
+    tangents[0] = slopes[0];
+    tangents[n] = slopes[n - 1];
 
-        const x = current.x + Math.cos(angle) * length;
-        const y = current.y + Math.sin(angle) * length;
-        return { x, y };
-    }
-    function bezierCommand(point, i, a) {
-        const cps = controlPoint(a[i - 1], a[i - 2], point);
-        const cpe = controlPoint(point, a[i - 1], a[i + 1], true);
-        return `C ${checkNaN(cps.x)},${checkNaN(cps.y)} ${checkNaN(cpe.x)},${checkNaN(cpe.y)} ${checkNaN(point.x)},${checkNaN(point.y)}`;
+    for (let i = 1; i < n; i += 1) {
+        if (slopes[i - 1] * slopes[i] <= 0) {
+            tangents[i] = 0;
+        } else {
+            const commonSlope = (slopes[i - 1] + slopes[i]) / 2;
+            tangents[i] = commonSlope;
+        }
     }
-    const d = points.filter(p => !!p).reduce((acc, point, i, a) => i === 0
-        ? `${checkNaN(point.x)},${checkNaN(point.y)} `
-        : `${acc} ${bezierCommand(point, i, a)} `
-        , '');
 
-    return d;
+    for (let i = 0; i < n; i += 1) {
+        const x1 = points[i].x;
+        const y1 = points[i].y;
+        const x2 = points[i + 1].x;
+        const y2 = points[i + 1].y;
+
+        const m1 = tangents[i];
+        const m2 = tangents[i + 1];
+
+        const controlX1 = x1 + (x2 - x1) / 3;
+        const controlY1 = y1 + m1 * (x2 - x1) / 3;
+        const controlX2 = x2 - (x2 - x1) / 3;
+        const controlY2 = y2 - m2 * (x2 - x1) / 3;
+
+        path.push(`C ${checkNaN(controlX1)},${checkNaN(controlY1)} ${checkNaN(controlX2)},${checkNaN(controlY2)} ${checkNaN(x2)},${checkNaN(y2)}`);
+    }
+    return path.join(' ');
 }
 
 export function createUid() {

tests/lib.test.js

@@ -654,7 +654,7 @@ describe('createSmoothPath', () => {
             { x: 9, y: 3 },
         ]
 
-        expect(createSmoothPath(points)).toBe('1,3  C 1.2000000000000002,2.6 1.6,1 2,1  C 2.4,1 2.6,3 3,3  C 3.4,3 3.6,1 4,1  C 4.4,1 4.6,3 5,3  C 5.4,3 5.6,1 6,1  C 6.4,1 6.6,3 7,3  C 7.4,3 7.6,1 8,1  C 8.4,1 8.8,2.6 9,3 ')
+        expect(createSmoothPath(points)).toBe("1,3 C 1.3333333333333333,2.3333333333333335 1.6666666666666667,1 2,1 C 2.3333333333333335,1 2.6666666666666665,3 3,3 C 3.3333333333333335,3 3.6666666666666665,1 4,1 C 4.333333333333333,1 4.666666666666667,3 5,3 C 5.333333333333333,3 5.666666666666667,1 6,1 C 6.333333333333333,1 6.666666666666667,3 7,3 C 7.333333333333333,3 7.666666666666667,1 8,1 C 8.333333333333334,1 8.666666666666666,2.3333333333333335 9,3")
     })
 })