code comments

docs/chapters/decasteljau/decasteljau.js

@@ -1,34 +1,80 @@
+let curve;
+
 setup() {
-  this.curve = new Bezier(this, 90, 200, 25, 100, 220, 40, 210, 240);
-  setMovable(this.curve.points);
+  curve = new Bezier(this, 90, 200, 25, 100, 220, 40, 210, 240);
+  setMovable(curve.points);
   setSlider(`.slide-control`, `position`, 0);
 }
 
 draw() {
   clear();
-  const curve = this.curve;
   curve.drawSkeleton();
   curve.drawCurve();
 
+  noFill();
   setStroke("rgb(200,100,100)");
 
-  let t = this.position;
+  const t = this.position;
   if (0 < t && t < 1) {
-    curve.drawStruts(t);
+    this.drawStruts(t);
   }
 
   curve.drawPoints();
 
   if (0 < t && t < 1) {
-    let p = curve.get(t);
+    const p = curve.get(t);
     circle(p.x, p.y, 5);
 
-    let perc = (t*100)|0;
-    let rt = perc/100;
+    const perc = (t*100)|0;
+    const rt = perc/100;
     text(`Sequential interpolation for ${perc}% (t=${rt})`, 10, 15);
   }
 }
 
+drawStruts(t) {
+  // get all the "de Casteljau" points
+  const p = curve.getStrutPoints(t);
+
+  // and then draw them
+  let s = curve.points.length;
+  let n = curve.points.length;
+  while (--n > 1) {
+    start();
+    for (let i = 0; i < n; i++) {
+      let pt = p[s + i];
+      vertex(pt.x, pt.y);
+      circle(pt.x, pt.y, 5);
+    }
+    end();
+    s += n;
+  }
+}
+
+getStrutPoints(t) {
+  const mt = 1 - t;
+
+  // run de Casteljau's algorithm, starting with the base points
+  const points = curve.points.map((p) => new Vector(p));
+
+  let s = 0;
+  let n = p.length + 1;
+
+  // Every iteration will interpolate between `n` points,
+  // as well as decrease that `n` by one. So 4 points yield
+  // 3 new points, which yield 2 new points, which yields 1
+  // final point that is our on-curve point for `t`
+  while (--n > 1) {
+    let list = points.slice(s, s + n);
+    for (let i = 0, e = list.length - 1; i < e; i++) {
+      let pt = list[i + 1].subtract(list[i + 1].subtract(list[i]).scale(mt));
+      points.push(pt);
+    }
+    s += n;
+  }
+
+  return points;
+}
+
 onMouseMove() {
   redraw();
 }