simplify curves

src/fit-curve.js

@@ -0,0 +1,606 @@
+
+
+/**
+ *  @preserve  JavaScript implementation of
+ *  Algorithm for Automatically Fitting Digitized Curves
+ *  by Philip J. Schneider
+ *  "Graphics Gems", Academic Press, 1990
+ *
+ *  The MIT License (MIT)
+ *
+ *  https://github.com/soswow/fit-curves
+ */
+
+/**
+ * Fit one or more Bezier curves to a set of points.
+ *
+ * @param {Array<Array<Number>>} points - Array of digitized points, e.g. [[5,5],[5,50],[110,140],[210,160],[320,110]]
+ * @param {Number} maxError - Tolerance, squared error between points and fitted curve
+ * @returns {Array<Array<Array<Number>>>} Array of Bezier curves, where each element is [first-point, control-point-1, control-point-2, second-point] and points are [x, y]
+ */
+export function fitCurve(points, maxError, progressCallback) {
+    if (!Array.isArray(points)) {
+        throw new TypeError("First argument should be an array");
+    }
+    points.forEach(function (point) {
+        if (!Array.isArray(point) || point.some(function (item) {
+            return typeof item !== 'number';
+        }) || point.length !== points[0].length) {
+            throw Error("Each point should be an array of numbers. Each point should have the same amount of numbers.");
+        }
+    });
+
+    // Remove duplicate points
+    points = points.filter(function (point, i) {
+        return i === 0 || !point.every(function (val, j) {
+            return val === points[i - 1][j];
+        });
+    });
+
+    if (points.length < 2) {
+        return [];
+    }
+
+    var len = points.length;
+    var leftTangent = createTangent(points[1], points[0]);
+    var rightTangent = createTangent(points[len - 2], points[len - 1]);
+
+    return fitCubic(points, leftTangent, rightTangent, maxError, progressCallback);
+}
+
+/**
+ * Fit a Bezier curve to a (sub)set of digitized points.
+ * Your code should not call this function directly. Use {@link fitCurve} instead.
+ *
+ * @param {Array<Array<Number>>} points - Array of digitized points, e.g. [[5,5],[5,50],[110,140],[210,160],[320,110]]
+ * @param {Array<Number>} leftTangent - Unit tangent vector at start point
+ * @param {Array<Number>} rightTangent - Unit tangent vector at end point
+ * @param {Number} error - Tolerance, squared error between points and fitted curve
+ * @returns {Array<Array<Array<Number>>>} Array of Bezier curves, where each element is [first-point, control-point-1, control-point-2, second-point] and points are [x, y]
+ */
+function fitCubic(points, leftTangent, rightTangent, error, progressCallback) {
+    var MaxIterations = 20; //Max times to try iterating (to find an acceptable curve)
+
+    var bezCurve, //Control points of fitted Bezier curve
+    u, //Parameter values for point
+    uPrime, //Improved parameter values
+    maxError, prevErr, //Maximum fitting error
+    splitPoint, prevSplit, //Point to split point set at if we need more than one curve
+    centerVector, toCenterTangent, fromCenterTangent, //Unit tangent vector(s) at splitPoint
+    beziers, //Array of fitted Bezier curves if we need more than one curve
+    dist, i;
+
+    //console.log('fitCubic, ', points.length);
+
+    //Use heuristic if region only has two points in it
+    if (points.length === 2) {
+        dist = maths.vectorLen(maths.subtract(points[0], points[1])) / 3.0;
+        bezCurve = [points[0], maths.addArrays(points[0], maths.mulItems(leftTangent, dist)), maths.addArrays(points[1], maths.mulItems(rightTangent, dist)), points[1]];
+        return [bezCurve];
+    }
+
+    //Parameterize points, and attempt to fit curve
+    u = chordLengthParameterize(points);
+
+    var _generateAndReport = generateAndReport(points, u, u, leftTangent, rightTangent, progressCallback);
+
+    bezCurve = _generateAndReport[0];
+    maxError = _generateAndReport[1];
+    splitPoint = _generateAndReport[2];
+
+
+    if (maxError === 0 || maxError < error) {
+        return [bezCurve];
+    }
+    //If error not too large, try some reparameterization and iteration
+    if (maxError < error * error) {
+
+        uPrime = u;
+        prevErr = maxError;
+        prevSplit = splitPoint;
+
+        for (i = 0; i < MaxIterations; i++) {
+
+            uPrime = reparameterize(bezCurve, points, uPrime);
+
+            var _generateAndReport2 = generateAndReport(points, u, uPrime, leftTangent, rightTangent, progressCallback);
+
+            bezCurve = _generateAndReport2[0];
+            maxError = _generateAndReport2[1];
+            splitPoint = _generateAndReport2[2];
+
+
+            if (maxError < error) {
+                return [bezCurve];
+            }
+            //If the development of the fitted curve grinds to a halt,
+            //we abort this attempt (and try a shorter curve):
+            else if (splitPoint === prevSplit) {
+                    var errChange = maxError / prevErr;
+                    if (errChange > .9999 && errChange < 1.0001) {
+                        break;
+                    }
+                }
+
+            prevErr = maxError;
+            prevSplit = splitPoint;
+        }
+    }
+
+    //Fitting failed -- split at max error point and fit recursively
+    beziers = [];
+
+    //To create a smooth transition from one curve segment to the next, we
+    //calculate the line between the points directly before and after the
+    //center, and use that as the tangent both to and from the center point.
+    centerVector = maths.subtract(points[splitPoint - 1], points[splitPoint + 1]);
+    //However, this won't work if they're the same point, because the line we
+    //want to use as a tangent would be 0. Instead, we calculate the line from
+    //that "double-point" to the center point, and use its tangent.
+    if (centerVector.every(function (val) {
+        return val === 0;
+    })) {
+        //[x,y] -> [-y,x]: http://stackoverflow.com/a/4780141/1869660
+        centerVector = maths.subtract(points[splitPoint - 1], points[splitPoint]);
+        var _ref = [-centerVector[1], centerVector[0]];
+        centerVector[0] = _ref[0];
+        centerVector[1] = _ref[1];
+    }
+    toCenterTangent = maths.normalize(centerVector);
+    //To and from need to point in opposite directions:
+    fromCenterTangent = maths.mulItems(toCenterTangent, -1);
+
+    /*
+    Note: An alternative to this "divide and conquer" recursion could be to always
+            let new curve segments start by trying to go all the way to the end,
+            instead of only to the end of the current subdivided polyline.
+            That might let many segments fit a few points more, reducing the number of total segments.
+            However, a few tests have shown that the segment reduction is insignificant
+            (240 pts, 100 err: 25 curves vs 27 curves. 140 pts, 100 err: 17 curves on both),
+            and the results take twice as many steps and milliseconds to finish,
+            without looking any better than what we already have.
+    */
+    beziers = beziers.concat(fitCubic(points.slice(0, splitPoint + 1), leftTangent, toCenterTangent, error, progressCallback));
+    beziers = beziers.concat(fitCubic(points.slice(splitPoint), fromCenterTangent, rightTangent, error, progressCallback));
+    return beziers;
+};
+
+function generateAndReport(points, paramsOrig, paramsPrime, leftTangent, rightTangent, progressCallback) {
+    var bezCurve, maxError, splitPoint;
+
+    bezCurve = generateBezier(points, paramsPrime, leftTangent, rightTangent, progressCallback);
+    //Find max deviation of points to fitted curve.
+    //Here we always use the original parameters (from chordLengthParameterize()),
+    //because we need to compare the current curve to the actual source polyline,
+    //and not the currently iterated parameters which reparameterize() & generateBezier() use,
+    //as those have probably drifted far away and may no longer be in ascending order.
+
+    var _computeMaxError = computeMaxError(points, bezCurve, paramsOrig);
+
+    maxError = _computeMaxError[0];
+    splitPoint = _computeMaxError[1];
+
+
+    if (progressCallback) {
+        progressCallback({
+            bez: bezCurve,
+            points: points,
+            params: paramsOrig,
+            maxErr: maxError,
+            maxPoint: splitPoint
+        });
+    }
+
+    return [bezCurve, maxError, splitPoint];
+}
+
+/**
+ * Use least-squares method to find Bezier control points for region.
+ *
+ * @param {Array<Array<Number>>} points - Array of digitized points
+ * @param {Array<Number>} parameters - Parameter values for region
+ * @param {Array<Number>} leftTangent - Unit tangent vector at start point
+ * @param {Array<Number>} rightTangent - Unit tangent vector at end point
+ * @returns {Array<Array<Number>>} Approximated Bezier curve: [first-point, control-point-1, control-point-2, second-point] where points are [x, y]
+ */
+function generateBezier(points, parameters, leftTangent, rightTangent) {
+    var bezCurve,
+        //Bezier curve ctl pts
+    A,
+        a,
+        //Precomputed rhs for eqn
+    C,
+        X,
+        //Matrices C & X
+    det_C0_C1,
+        det_C0_X,
+        det_X_C1,
+        //Determinants of matrices
+    alpha_l,
+        alpha_r,
+        //Alpha values, left and right
+
+    epsilon,
+        segLength,
+        i,
+        len,
+        tmp,
+        u,
+        ux,
+        firstPoint = points[0],
+        lastPoint = points[points.length - 1];
+
+    bezCurve = [firstPoint, null, null, lastPoint];
+    //console.log('gb', parameters.length);
+
+    //Compute the A's
+    A = maths.zeros_Xx2x2(parameters.length);
+    for (i = 0, len = parameters.length; i < len; i++) {
+        u = parameters[i];
+        ux = 1 - u;
+        a = A[i];
+
+        a[0] = maths.mulItems(leftTangent, 3 * u * (ux * ux));
+        a[1] = maths.mulItems(rightTangent, 3 * ux * (u * u));
+    }
+
+    //Create the C and X matrices
+    C = [[0, 0], [0, 0]];
+    X = [0, 0];
+    for (i = 0, len = points.length; i < len; i++) {
+        u = parameters[i];
+        a = A[i];
+
+        C[0][0] += maths.dot(a[0], a[0]);
+        C[0][1] += maths.dot(a[0], a[1]);
+        C[1][0] += maths.dot(a[0], a[1]);
+        C[1][1] += maths.dot(a[1], a[1]);
+
+        tmp = maths.subtract(points[i], bezier.q([firstPoint, firstPoint, lastPoint, lastPoint], u));
+
+        X[0] += maths.dot(a[0], tmp);
+        X[1] += maths.dot(a[1], tmp);
+    }
+
+    //Compute the determinants of C and X
+    det_C0_C1 = C[0][0] * C[1][1] - C[1][0] * C[0][1];
+    det_C0_X = C[0][0] * X[1] - C[1][0] * X[0];
+    det_X_C1 = X[0] * C[1][1] - X[1] * C[0][1];
+
+    //Finally, derive alpha values
+    alpha_l = det_C0_C1 === 0 ? 0 : det_X_C1 / det_C0_C1;
+    alpha_r = det_C0_C1 === 0 ? 0 : det_C0_X / det_C0_C1;
+
+    //If alpha negative, use the Wu/Barsky heuristic (see text).
+    //If alpha is 0, you get coincident control points that lead to
+    //divide by zero in any subsequent NewtonRaphsonRootFind() call.
+    segLength = maths.vectorLen(maths.subtract(firstPoint, lastPoint));
+    epsilon = 1.0e-6 * segLength;
+    if (alpha_l < epsilon || alpha_r < epsilon) {
+        //Fall back on standard (probably inaccurate) formula, and subdivide further if needed.
+        bezCurve[1] = maths.addArrays(firstPoint, maths.mulItems(leftTangent, segLength / 3.0));
+        bezCurve[2] = maths.addArrays(lastPoint, maths.mulItems(rightTangent, segLength / 3.0));
+    } else {
+        //First and last control points of the Bezier curve are
+        //positioned exactly at the first and last data points
+        //Control points 1 and 2 are positioned an alpha distance out
+        //on the tangent vectors, left and right, respectively
+        bezCurve[1] = maths.addArrays(firstPoint, maths.mulItems(leftTangent, alpha_l));
+        bezCurve[2] = maths.addArrays(lastPoint, maths.mulItems(rightTangent, alpha_r));
+    }
+
+    return bezCurve;
+};
+
+/**
+ * Given set of points and their parameterization, try to find a better parameterization.
+ *
+ * @param {Array<Array<Number>>} bezier - Current fitted curve
+ * @param {Array<Array<Number>>} points - Array of digitized points
+ * @param {Array<Number>} parameters - Current parameter values
+ * @returns {Array<Number>} New parameter values
+ */
+function reparameterize(bezier, points, parameters) {
+    /*
+    var j, len, point, results, u;
+    results = [];
+    for (j = 0, len = points.length; j < len; j++) {
+        point = points[j], u = parameters[j];
+            results.push(newtonRaphsonRootFind(bezier, point, u));
+    }
+    return results;
+    //*/
+    return parameters.map(function (p, i) {
+        return newtonRaphsonRootFind(bezier, points[i], p);
+    });
+};
+
+/**
+ * Use Newton-Raphson iteration to find better root.
+ *
+ * @param {Array<Array<Number>>} bez - Current fitted curve
+ * @param {Array<Number>} point - Digitized point
+ * @param {Number} u - Parameter value for "P"
+ * @returns {Number} New u
+ */
+function newtonRaphsonRootFind(bez, point, u) {
+    /*
+        Newton's root finding algorithm calculates f(x)=0 by reiterating
+        x_n+1 = x_n - f(x_n)/f'(x_n)
+        We are trying to find curve parameter u for some point p that minimizes
+        the distance from that point to the curve. Distance point to curve is d=q(u)-p.
+        At minimum distance the point is perpendicular to the curve.
+        We are solving
+        f = q(u)-p * q'(u) = 0
+        with
+        f' = q'(u) * q'(u) + q(u)-p * q''(u)
+        gives
+        u_n+1 = u_n - |q(u_n)-p * q'(u_n)| / |q'(u_n)**2 + q(u_n)-p * q''(u_n)|
+    */
+
+    var d = maths.subtract(bezier.q(bez, u), point),
+        qprime = bezier.qprime(bez, u),
+        numerator = maths.mulMatrix(d, qprime),
+        denominator = maths.sum(maths.squareItems(qprime)) + 2 * maths.mulMatrix(d, bezier.qprimeprime(bez, u));
+
+    if (denominator === 0) {
+        return u;
+    } else {
+        return u - numerator / denominator;
+    }
+};
+
+/**
+ * Assign parameter values to digitized points using relative distances between points.
+ *
+ * @param {Array<Array<Number>>} points - Array of digitized points
+ * @returns {Array<Number>} Parameter values
+ */
+function chordLengthParameterize(points) {
+    var u = [],
+        currU,
+        prevU,
+        prevP;
+
+    points.forEach(function (p, i) {
+        currU = i ? prevU + maths.vectorLen(maths.subtract(p, prevP)) : 0;
+        u.push(currU);
+
+        prevU = currU;
+        prevP = p;
+    });
+    u = u.map(function (x) {
+        return x / prevU;
+    });
+
+    return u;
+};
+
+/**
+ * Find the maximum squared distance of digitized points to fitted curve.
+ *
+ * @param {Array<Array<Number>>} points - Array of digitized points
+ * @param {Array<Array<Number>>} bez - Fitted curve
+ * @param {Array<Number>} parameters - Parameterization of points
+ * @returns {Array<Number>} Maximum error (squared) and point of max error
+ */
+function computeMaxError(points, bez, parameters) {
+    var dist, //Current error
+    maxDist, //Maximum error
+    splitPoint, //Point of maximum error
+    v, //Vector from point to curve
+    i, count, point, t;
+
+    maxDist = 0;
+    splitPoint = Math.floor(points.length / 2);
+
+    var t_distMap = mapTtoRelativeDistances(bez, 10);
+
+    for (i = 0, count = points.length; i < count; i++) {
+        point = points[i];
+        //Find 't' for a point on the bez curve that's as close to 'point' as possible:
+        t = find_t(bez, parameters[i], t_distMap, 10);
+
+        v = maths.subtract(bezier.q(bez, t), point);
+        dist = v[0] * v[0] + v[1] * v[1];
+
+        if (dist > maxDist) {
+            maxDist = dist;
+            splitPoint = i;
+        }
+    }
+
+    return [maxDist, splitPoint];
+};
+
+//Sample 't's and map them to relative distances along the curve:
+var mapTtoRelativeDistances = function mapTtoRelativeDistances(bez, B_parts) {
+    var B_t_curr;
+    var B_t_dist = [0];
+    var B_t_prev = bez[0];
+    var sumLen = 0;
+
+    for (var i = 1; i <= B_parts; i++) {
+        B_t_curr = bezier.q(bez, i / B_parts);
+
+        sumLen += maths.vectorLen(maths.subtract(B_t_curr, B_t_prev));
+
+        B_t_dist.push(sumLen);
+        B_t_prev = B_t_curr;
+    }
+
+    //Normalize B_length to the same interval as the parameter distances; 0 to 1:
+    B_t_dist = B_t_dist.map(function (x) {
+        return x / sumLen;
+    });
+    return B_t_dist;
+};
+
+function find_t(bez, param, t_distMap, B_parts) {
+    if (param < 0) {
+        return 0;
+    }
+    if (param > 1) {
+        return 1;
+    }
+
+    /*
+        'param' is a value between 0 and 1 telling us the relative position
+        of a point on the source polyline (linearly from the start (0) to the end (1)).
+        To see if a given curve - 'bez' - is a close approximation of the polyline,
+        we compare such a poly-point to the point on the curve that's the same
+        relative distance along the curve's length.
+            But finding that curve-point takes a little work:
+        There is a function "B(t)" to find points along a curve from the parametric parameter 't'
+        (also relative from 0 to 1: http://stackoverflow.com/a/32841764/1869660
+                                    http://pomax.github.io/bezierinfo/#explanation),
+        but 't' isn't linear by length (http://gamedev.stackexchange.com/questions/105230).
+            So, we sample some points along the curve using a handful of values for 't'.
+        Then, we calculate the length between those samples via plain euclidean distance;
+        B(t) concentrates the points around sharp turns, so this should give us a good-enough outline of the curve.
+        Thus, for a given relative distance ('param'), we can now find an upper and lower value
+        for the corresponding 't' by searching through those sampled distances.
+        Finally, we just use linear interpolation to find a better value for the exact 't'.
+            More info:
+            http://gamedev.stackexchange.com/questions/105230/points-evenly-spaced-along-a-bezier-curve
+            http://stackoverflow.com/questions/29438398/cheap-way-of-calculating-cubic-bezier-length
+            http://steve.hollasch.net/cgindex/curves/cbezarclen.html
+            https://github.com/retuxx/tinyspline
+    */
+    var lenMax, lenMin, tMax, tMin, t;
+
+    //Find the two t-s that the current param distance lies between,
+    //and then interpolate a somewhat accurate value for the exact t:
+    for (var i = 1; i <= B_parts; i++) {
+
+        if (param <= t_distMap[i]) {
+            tMin = (i - 1) / B_parts;
+            tMax = i / B_parts;
+            lenMin = t_distMap[i - 1];
+            lenMax = t_distMap[i];
+
+            t = (param - lenMin) / (lenMax - lenMin) * (tMax - tMin) + tMin;
+            break;
+        }
+    }
+    return t;
+}
+
+/**
+ * Creates a vector of length 1 which shows the direction from B to A
+ */
+function createTangent(pointA, pointB) {
+    return maths.normalize(maths.subtract(pointA, pointB));
+}
+
+/*
+    Simplified versions of what we need from math.js
+    Optimized for our input, which is only numbers and 1x2 arrays (i.e. [x, y] coordinates).
+*/
+
+var maths = function () {
+    function maths() {
+        _classCallCheck(this, maths);
+    }
+
+    maths.zeros_Xx2x2 = function zeros_Xx2x2(x) {
+        var zs = [];
+        while (x--) {
+            zs.push([0, 0]);
+        }
+        return zs;
+    };
+
+    maths.mulItems = function mulItems(items, multiplier) {
+        return items.map(function (x) {
+            return x * multiplier;
+        });
+    };
+
+    maths.mulMatrix = function mulMatrix(m1, m2) {
+        //https://en.wikipedia.org/wiki/Matrix_multiplication#Matrix_product_.28two_matrices.29
+        //Simplified to only handle 1-dimensional matrices (i.e. arrays) of equal length:
+        return m1.reduce(function (sum, x1, i) {
+            return sum + x1 * m2[i];
+        }, 0);
+    };
+
+    maths.subtract = function subtract(arr1, arr2) {
+        return arr1.map(function (x1, i) {
+            return x1 - arr2[i];
+        });
+    };
+
+    maths.addArrays = function addArrays(arr1, arr2) {
+        return arr1.map(function (x1, i) {
+            return x1 + arr2[i];
+        });
+    };
+
+    maths.addItems = function addItems(items, addition) {
+        return items.map(function (x) {
+            return x + addition;
+        });
+    };
+
+    maths.sum = function sum(items) {
+        return items.reduce(function (sum, x) {
+            return sum + x;
+        });
+    };
+
+    maths.dot = function dot(m1, m2) {
+        return maths.mulMatrix(m1, m2);
+    };
+
+    maths.vectorLen = function vectorLen(v) {
+        return Math.hypot.apply(Math, v);
+    };
+
+    maths.divItems = function divItems(items, divisor) {
+        return items.map(function (x) {
+            return x / divisor;
+        });
+    };
+
+    maths.squareItems = function squareItems(items) {
+        return items.map(function (x) {
+            return x * x;
+        });
+    };
+
+    maths.normalize = function normalize(v) {
+        return this.divItems(v, this.vectorLen(v));
+    };
+
+    return maths;
+}();
+
+var bezier = function () {
+    function bezier() {
+        _classCallCheck(this, bezier);
+    }
+
+    bezier.q = function q(ctrlPoly, t) {
+        var tx = 1.0 - t;
+        var pA = maths.mulItems(ctrlPoly[0], tx * tx * tx),
+            pB = maths.mulItems(ctrlPoly[1], 3 * tx * tx * t),
+            pC = maths.mulItems(ctrlPoly[2], 3 * tx * t * t),
+            pD = maths.mulItems(ctrlPoly[3], t * t * t);
+        return maths.addArrays(maths.addArrays(pA, pB), maths.addArrays(pC, pD));
+    };
+
+    bezier.qprime = function qprime(ctrlPoly, t) {
+        var tx = 1.0 - t;
+        var pA = maths.mulItems(maths.subtract(ctrlPoly[1], ctrlPoly[0]), 3 * tx * tx),
+            pB = maths.mulItems(maths.subtract(ctrlPoly[2], ctrlPoly[1]), 6 * tx * t),
+            pC = maths.mulItems(maths.subtract(ctrlPoly[3], ctrlPoly[2]), 3 * t * t);
+        return maths.addArrays(maths.addArrays(pA, pB), pC);
+    };
+
+    bezier.qprimeprime = function qprimeprime(ctrlPoly, t) {
+        return maths.addArrays(maths.mulItems(maths.addArrays(maths.subtract(ctrlPoly[2], maths.mulItems(ctrlPoly[1], 2)), ctrlPoly[0]), 6 * (1.0 - t)), maths.mulItems(maths.addArrays(maths.subtract(ctrlPoly[3], maths.mulItems(ctrlPoly[2], 2)), ctrlPoly[1]), 6 * t));
+    };
+
+    return bezier;
+}();

src/index.html

@@ -7,6 +7,7 @@
     <script src="coloris.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tauri App</title>
+    <!-- <script type="module" src="/fit-curve.js"></script> -->
     <script type="module" src="/main.js" defer></script>
   </head>
 

src/main.js

@@ -1,4 +1,5 @@
-// const { invoke } = window.__TAURI__.core;
+const { invoke } = window.__TAURI__.core;
+import * as fitCurve from '/fit-curve.js';
 
 let greetInputEl;
 let greetMsgEl;
@@ -9,6 +10,7 @@ let canvases = [];
 let mode = "draw"
 
 let minSegmentSize = 5;
+let maxSmoothAngle = 0.2;
 
 let tools = {
   select: {
@@ -31,6 +33,7 @@ let tools = {
 }
 
 let mouseEvent;
+console.log(fitCurve)
 
 let context = {
   mouseDown: false,
@@ -94,6 +97,47 @@ class Shape {
   addCurve(curve) {
     this.curves.push(curve)
   }
+  simplify(mode="smooth") {
+    // Mode can be corners, smooth or auto
+    // let maxIndex;
+    // for (let j=0; j<5; j++) {
+    //   if (this.curves.length < 3) return;
+    //   maxIndex = this.curves.length-1;
+    //   for (let i=1; i<maxIndex; i++) {
+    //     let P1 = this.curves[i]
+    //     let P2 = this.curves[i-1]
+    //     let P3 = this.curves[i+1]
+    //     let angle = Math.atan2(P3.y - P1.y, P3.x - P1.x) -
+    //             Math.atan2(P2.y - P1.y, P2.x - P1.x);
+    //     angle = Math.PI - Math.abs(angle)
+    //     if (Math.abs(angle) < maxSmoothAngle) {
+    //       if (mode=="corners") {
+    //         this.curves.splice(i,1)
+    //       } else if (mode=="smooth") {
+    //         P3.cp1x = P1.x;
+    //         P3.cp1y = P1.y;
+    //         P3.cp2x = P1.x;
+    //         P3.cp2y = P1.y;
+    //         this.curves.splice(i,1)
+    //       }
+    //       i;
+    //       maxIndex--;
+    //       console.log(angle)
+    //     }
+    //   }
+
+    // }
+    let error = 30;
+    let points = [[this.startx, this.starty]]
+    for (let curve of this.curves) {
+      points.push([curve.x, curve.y])
+    }
+    this.curves = []
+    let curves = fitCurve.fitCurve(points, error)
+    for (let curve of curves) {
+      this.curves.push(new Curve(curve[1][0],curve[1][1],curve[2][0], curve[2][1], curve[3][0], curve[3][1]))
+    }
+  }
 }
 
 class GraphicsObject {
@@ -128,6 +172,11 @@ class GraphicsObject {
       ctx.moveTo(shape.startx, shape.starty)
       for (let curve of shape.curves) {
         ctx.bezierCurveTo(curve.cp1x, curve.cp1y, curve.cp2x, curve.cp2y, curve.x, curve.y)
+
+        // Debug, show curve endpoints
+        // ctx.beginPath()
+        // ctx.arc(curve.x,curve.y, 3, 0, 2*Math.PI)
+        // ctx.fill()
       }
       if (shape.filled) {
         ctx.fillStyle = shape.fillStyle
@@ -145,9 +194,9 @@ class GraphicsObject {
 }
 
 let root = new GraphicsObject();
-let shp = new Shape(100,100,'blue', 'black')
+// let shp = new Shape(100,100,'blue', 'black')
-shp.addCurve(new Curve(150,150,150,150,200,100))
+// shp.addCurve(new Curve(150,150,150,150,200,100))
-root.addShape(shp)
+// root.addShape(shp)
 context.activeObject = root
 
 async function greet() {
@@ -204,10 +253,9 @@ function stage() {
     switch (mode) {
       case "draw":
         if (context.activeShape) {
-          if (vectorDist(mouse, context.lastMouse) > minSegmentSize) {
+          let midpoint = {x: (mouse.x+context.lastMouse.x)/2, y: (mouse.y+context.lastMouse.y)/2}
-            let midpoint = {x: (mouse.x+context.lastMouse.x)/2, y: (mouse.y+context.lastMouse.y)/2}
+          context.activeShape.addCurve(new Curve(midpoint.x, midpoint.y, midpoint.x, midpoint.y, mouse.x, mouse.y))
-            context.activeShape.addCurve(new Curve(midpoint.x, midpoint.y, midpoint.x, midpoint.y, mouse.x, mouse.y))
+          context.activeShape.simplify()
-          }
           context.activeShape = undefined
         }
         break;
@@ -226,13 +274,13 @@ function stage() {
           if (vectorDist(mouse, context.lastMouse) > minSegmentSize) {
             let midpoint = {x: (mouse.x+context.lastMouse.x)/2, y: (mouse.y+context.lastMouse.y)/2}
             context.activeShape.addCurve(new Curve(midpoint.x, midpoint.y, midpoint.x, midpoint.y, mouse.x, mouse.y))
+            context.lastMouse = mouse
           }
         }
         break;
       default:
         break;
     }
-    context.lastMouse = mouse
     updateUI()
   })
   return scroller
@@ -259,6 +307,8 @@ function toolbar() {
   strokeColor.className = "color-field"
   fillColor.value = "#ffffff"
   strokeColor.value = "#000000"
+  context.fillStyle = fillColor.value
+  context.strokeStyle = strokeColor.value
   fillColor.addEventListener('click', e => {
     Coloris({
       el: ".color-field",