regenerated all images

docs/chapters/bsplines/basic.js

@@ -19,7 +19,7 @@ draw() {
     setStroke(`lightgrey`);
     drawGrid(20);
 
-    setStroke(`#CC00CC99`);
+    setStroke(this.parameters.showCurves ? `transparent` : `#CC00CC99`);
     for (let i=0, e=points.length-1, p, n; i<e; i++) {
       p = points[i];
       n = points[i+1];
@@ -27,7 +27,10 @@ draw() {
     }
 
     setColor(`black`);
-    points.forEach(p => circle(p.x, p.y, 3));
+    points.forEach((p,i) => {
+      circle(p.x, p.y, 3)
+      text(`${i+1}`, p.x+5, p.y+5);
+    });
 
     this.drawSplineData();
 }
@@ -36,10 +39,17 @@ drawSplineData() {
     // we'll need at least 4 points
     if (points.length <= 3) return;
 
+    if (this.parameters.showCurves) {
+      for(let i=0; i<points.length-3; i++) {
+        let c = new Bezier(this, points.slice(i,i+4));
+        c.drawCurve(randomColor());
+      }
+    }
+
     let spline = new BSpline(this, points);
 
     noFill();
-    setStroke(`black`);
+    setStroke(this.parameters.showCurves ? `#00000040` : `black`);
     start();
     spline.getLUT((points.length - 3) * 20).forEach(p => vertex(p.x, p.y));
     end();

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

@@ -15,6 +15,10 @@ Consider the difference to be this:
 - for Bézier curves, the curve is defined as an interpolation of points, but:
 - for B-Splines, the curve is defined as an interpolation of *curves*.
 
+In fact, let's look at that again, but this time with the base curves shown, too. Each consecutive four points defined one curve:
+
+<graphics-element title="The components of a B-Spline " width="600" height="300" src="./basic.js" data-show-curves="true"></graphics-element>
+
 In order to make this interpolation of curves work, the maths is necessarily more complex than the maths for Bézier curves, so let's have a look at how things work.
 
 

docs/chapters/bsplines/interpolation.js

@@ -31,7 +31,7 @@ setup() {
     knots = new BSpline(this, points).formKnots();
     let min = 0, max = knots.length-1;
     knots.forEach((_,i) => {
-      addSlider(`slide-control`, false, min, max, 0.01, i, (v) => this.setKnotValue(i,v));
+      addSlider(`slide-control`, `!knot ${i+1}`, min, max, 0.01, i, (v) => this.setKnotValue(i,v));
     });
 }
 

docs/chapters/bsplines/rational-uniform.js

@@ -12,7 +12,7 @@ setup() {
   weights = new BSpline(this, points, !!this.parameters.open).formWeights();
 
   points.forEach((_,i) => {
-    addSlider(`slide-control`, false, 0, 10, 0.1, i%2===1? 2 : 6, v => this.setWeight(i, v));
+    addSlider(`slide-control`, `!weight ${i+1}`, 0, 10, 0.1, i%2===1? 2 : 6, v => this.setWeight(i, v));
   });
 
   points = points.concat(points.slice(0,3));

docs/chapters/bsplines/reduced.js

@@ -20,7 +20,7 @@ setup() {
 
   let min=0, max=knots.length-1;
   knots.forEach((_,i) => {
-    addSlider(`slide-control`, false, min, max, 0.01, knots[i], v => this.setKnotValue(i, v));
+    addSlider(`slide-control`, `!knot ${i+1}`, min, max, 0.01, knots[i], v => this.setKnotValue(i, v));
   });
 }
 

docs/chapters/bsplines/uniform.js

@@ -12,7 +12,7 @@ setup() {
   knots = new BSpline(this, points).formKnots(!!this.parameters.open);
   let min=0, max=knots.length-1;
   knots.forEach((_,i) => {
-    addSlider(`slide-control`, false, min, max, 0.01, knots[i], v => this.setKnotValue(i, v));
+    addSlider(`slide-control`, `!knot ${i+1}`, min, max, 0.01, knots[i], v => this.setKnotValue(i, v));
   });
 }