this rename is absolutely stupid

docs/chapters/bsplined/content.en-GB.md

@@ -0,0 +1,64 @@
+# B-Spline derivatives
+
+
+One last section specific to B-Splines: in order to apply the same procedures to B-Splines as we've looked at for Bézier curves, we'll need to know the first and second derivative. But... what is the derivative of a B-Spline?
+
+Thankfully, much like as was the case for Bézier curves, the derivative of a B-Spline is itself a (lower order) B-Spline. The following two functions specify the general B-Spline formula for a B-Spline of degree <em>d</em> with <em>n</em> points, and knot vector of length <em>d+n+1</em>, and its derivative:
+
+\[
+  C(t) = \sum_{i=0}^n P_i \cdot N_{i,k}(t)
+\]
+
+\[
+  C'(t) = \sum_{i=0}^{n-1} P_i \prime \cdot N_{i+1,k-1}(t)
+\]
+
+where
+
+\[
+  P_i \prime = \frac{d}{knot_{i+d+1} - knot_{i+1}} (P_{i+1} - P_i)
+\]
+
+
+So, much as for Bézier derivatives, we see a derivative function that is simply a new interpolation function, with interpolated weights. With this information, we can do things like draw tangents and normals, as well as determine the curvature function, draw inflection points, and all those lovely things.
+
+As a concrete example, let's look at cubic (=degree 3) B-Spline with five coordinates, and with uniform knot vector of length 3 + 5 + 1 = 9:
+
+\[\begin{array}{l}
+  d = 3, \\
+  P = {(50,240), (185,30), (320,135), (455,25), (560,255)}, \\
+  knots = {0,1,2,3,4,5,6,7,8}
+\end{array}\]
+
+<BSplineGraphic sketch={require('./demonstrator')} />
+
+Applying the above knowledge, we end up with a new B-Spline of degree <em>d-1</em>, with four points <em>P'</em>:
+
+\[\begin{array}{l}
+  P_0 \prime = \frac{d}{knot_{i+d+1} - knot_{i+1}} (P_{i+1} - P_i)
+   = \frac{3}{knot_{4} - knot_{1}} (P_1 - P_0)
+   = \frac{3}{3} (P_1 - P_0)
+   = (135, -210) \\
+  P_1 \prime = \frac{d}{knot_{i+d+1} - knot_{i+1}} (P_{i+1} - P_i)
+   = \frac{3}{knot_{5} - knot_{2}} (P_2 - P_1)
+   = \frac{3}{3} (P_2 - P_1)
+   = (135, 105) \\
+  P_2 \prime = \frac{d}{knot_{i+d+1} - knot_{i+1}} (P_{i+1} - P_i)
+   = \frac{3}{knot_{6} - knot_{3}} (P_3 - P_2)
+   = \frac{3}{3} (P_3 - P_2)
+   = (135, -110) \\
+  P_3 \prime = \frac{d}{knot_{i+d+1} - knot_{i+1}} (P_{i+1} - P_i)
+   = \frac{3}{knot_{7} - knot_{4}} (P_4 - P_3)
+   = \frac{3}{3} (P_4 - P_3)
+   = (105, 230) \\
+\end{array}\]
+
+So, we end up with a derivative that has as parameters:
+
+\[\begin{array}{l}
+  d = 3, \\
+  P = {(50,240), (185,30), (320,135), (455,25), (560,255)}, \\
+  knots = {0,1,2,3,4,5,6,7,8}
+\end{array}\]
+
+<BSplineGraphic sketch={require('./derived')} />

docs/chapters/bsplined/demonstrator.js

@@ -0,0 +1,38 @@
+module.exports = {
+  degree: 3,
+  activeDistance: 9,
+
+  setup() {
+    this.size(600, 300);
+    this.points = [
+      {x:50,y:240},
+      {x:185,y:30},
+      {x:320,y:135},
+      {x:455,y:25},
+      {x:560,y:255}
+    ];
+    this.knots = this.formKnots(this.points);
+    this.draw();
+  },
+
+  draw() {
+    this.clear();
+    this.grid(25);
+    var p = this.points[0];
+    this.points.forEach(n => {
+      this.stroke(200);
+      this.line(n.x, n.y, p.x, p.y);
+      p = n;
+      this.stroke(0);
+      this.circle(p.x, p.y, 4);
+    });
+    this.drawSplineData();
+  },
+
+  drawSplineData() {
+    if (this.points.length <= this.degree) return;
+    var mapped = this.points.map(p => [p.x, p.y]);
+    this.drawCurve(mapped);
+    this.drawKnots(mapped);
+  }
+};

docs/chapters/bsplined/derived.js

@@ -0,0 +1,37 @@
+module.exports = {
+  degree: 2,
+  activeDistance: 9,
+
+  setup() {
+    this.size(600, 300);
+    this.points = [
+      {x:135,y:-210},
+      {x:135,y:105},
+      {x:135,y:-110},
+      {x:105,y:230}
+    ];
+    this.knots = this.formKnots(this.points);
+    this.draw();
+  },
+
+  draw() {
+    this.clear();
+    this.grid(25);
+    var p = this.points[0];
+    this.points.forEach(n => {
+      this.stroke(200);
+      this.line(n.x, n.y, p.x, p.y);
+      p = n;
+      this.stroke(0);
+      this.circle(p.x, p.y, 4);
+    });
+    this.drawSplineData();
+  },
+
+  drawSplineData() {
+    if (this.points.length <= this.degree) return;
+    var mapped = this.points.map(p => [p.x, p.y]);
+    this.drawCurve(mapped);
+    this.drawKnots(mapped);
+  }
+};