finally explained how to lower the curve order

components/sections/reordering/handler.js

@@ -1,32 +1,65 @@
+var invert = require('../../../lib/matrix-invert.js');
+var multiply = require('../../../lib/matrix-multiply.js');
+var transpose = require('../../../lib/matrix-transpose.js');
+
 var Reordering = {
   statics: {
     keyHandlingOptions: {
       values: {
         "38": function(api) {
           api.setCurve(api.curve.raise());
+          api.redraw();
         },
         "40": function(api) {
-          api.setCurve(Reordering.lower(api.curve));
+          api.setCurve(Reordering.lower(api));
+          api.redraw();
         }
       }
     }
   },
 
-  // Improve this based on http://www.sirver.net/blog/2011/08/23/degree-reduction-of-bezier-curves/
-  lower: function(curve) {
-    var pts = curve.points, q=[], n = pts.length;
-    pts.forEach((p,k) => {
-      if (!k) { return (q[k] = p); }
-      var f1 = k/n, f2 = 1 - f1;
-      q[k] = {
-        x: f1 * p.x + f2 * pts[k-1].x,
-        y: f1 * p.y + f2 * pts[k-1].y
+  // Based on http://www.sirver.net/blog/2011/08/23/degree-reduction-of-bezier-curves/
+  lower: function(api) {
+    var curve = api.curve,
+        pts = curve.points,
+        k = pts.length,
+        M = [],
+        n = k-1,
+        i;
+
+    // build M, which will be (k) rows by (k-1) columns
+    for(i=0; i<k; i++) {
+      M[i] = (new Array(k)).join('0').split('').map(v => parseInt(v));
+      if(i===0) { M[i][0] = 1; }
+      else if(i===n) { M[i][i-1] = 1; }
+      else {
+        M[i][i-1] = i / k;
+        M[i][i] = 1 - M[i][i-1];
+      }
+    }
+
+    // then, apply our matrix operations:
+    var Mt = transpose(M);
+    var Mc = multiply(Mt, M);
+    var Mi = invert(Mc);
+    var V = multiply(Mi, Mt);
+
+    // And then we map our k-order list of coordinates
+    // to an n-order list of coordinates, instead:
+    var x = pts.map(p => [p.x]);
+    var nx = multiply(V, x);
+
+    var y = pts.map(p => [p.y]);
+    var ny = multiply(V, y);
+
+    var npts = nx.map((x,i) => {
+      return {
+        x: x[0],
+        y: ny[i][0]
       };
     });
-    q.splice(n-1,1);
-    q[n-2] = pts[n-1];
-    curve.points = q;
-    return curve;
+
+    return new api.Bezier(npts);
   },
 
   getInitialState: function() {
@@ -101,6 +134,10 @@ var Reordering = {
       order += "th";
     }
     return order;
+  },
+
+  onMouseMove: function(evt, api) {
+    api.redraw();
   }
 };