let's do this

chapters/abc/content.en-GB.md

@@ -0,0 +1,83 @@
+# The projection identity
+
+De Casteljau's algorithm is the pivotal algorithm when it comes to Bézier curves. You can use it not just to split curves, but also to draw them efficiently (especially for high-order Bézier curves), as well as to come up with curves based on three points and a tangent. Particularly this last thing is really useful because it lets us "mould" a curve, by picking it up at some point, and dragging that point around to change the curve's shape.
+
+How does that work? Succinctly: we run de Casteljau's algorithm in reverse!
+
+In order to run de Casteljau's algorithm in reverse, we need a few basic things: a start and end point, a point on the curve that want to be moving around, which has an associated *t* value, and a point we've not explicitly talked about before, and as far as I know has no explicit name, but lives one iteration higher in the de Casteljau process then our on-curve point does. I like to call it "A" for reasons that will become obvious.
+
+So let's use graphics instead of text to see where this "A" is, because text only gets us so far: in the following graphic, click anywhere on the curves to see the identity information that we'll be using to run de Casteljau in reverse (you can manipulate the curve even after picking a point. Note the "ratio" value when you do so: does it change?):
+
+<div className="figure">
+  <Graphic inline={true} title="Projections in a quadratic Bézier curve" setup={this.setupQuadratic} draw={this.draw} onClick={this.onClick} />
+  <Graphic inline={true} title="Projections in a cubic Bézier curve" setup={this.setupCubic} draw={this.draw} onClick={this.onClick} />
+</div>
+
+Clicking anywhere on the curves shows us three things:
+
+1. our on-curve point; let's call that <b>B</b>,
+2. a point at the tip of B's "hat", on de Casteljau step up; let's call that <b>A</b>, and
+3. a point that we get by projecting B onto the start--end baseline; let's call that <b>C</b>.
+
+These three values A, B, and C hide an important identity formula for quadratic and cubic Bézier curves: for any point on the curve with some *t* value, the ratio distance of C along the baseline is fixed: if some *t* value sets up a C that is 20% away from the start and 80% away from the end, then it doesn't matter where the start, end, or control points are; for that *t* value, C will *always* lie at 20% from the start and 80% from the end point. Go ahead, pick an on-curve point in either graphic and then move all the other points around: if you only move the control points, start and end won't move, and so neither will C, and if you move either start or end point, C will move but its relative position will not change. The following function stays true:
+
+\[
+  C = u \cdot P_{start} + (1-u) \cdot P_{end}
+\]
+
+So that just leaves finding A.
+
+<div className="note">
+
+While that relation is fixed, the function *u(t)* differs depending on whether we're working
+with quadratic or cubic curves:
+
+\[
+\begin{aligned}
+& u(t)_{quadratic} &= \frac{(1-t)^2}{t^2 + (1-t)^2} \\
+& u(t)_{cubic} &= \frac{(1-t)^3}{t^3 + (1-t)^3}
+\end{aligned}
+\]
+
+So, if we know the start and end coordinates, and we know the *t* value, we know C:
+
+<div className="figure">
+  <Graphic inline={true} title="Quadratic value of C for t" draw={this.drawQCT} onMouseMove={this.setCT}/>
+  <Graphic inline={true} title="Cubic value of C for t" draw={this.drawCCT} onMouseMove={this.setCT}/>
+</div>
+
+Mouse-over the graphs to see the expression for C, given the *t* value at the mouse pointer.
+
+</div>
+
+There's also another important bit of information that is inherent to the ABC values: while the distances between A and B, and B and C, are dynamic (based on where we put B), the *ratio* between the two distances is stable. Given some *t* value, the following always holds:
+
+\[
+  ratio(t) = \frac{distance(B,C)}{distance(A,B)} = Constant
+\]
+
+This leads to a pretty powerful bit of knowledge: merely by knowing the *t* value of some on curve point, we know where C has to be (as per the above note), and because we know B and C, and thus have the distance between them, we know where A has to be:
+
+\[
+  A = B - \frac{C - B}{ratio(t)} = B + \frac{B - C}{ratio(t)}
+\]
+
+And that's it, all values found.
+
+<div className="note">
+
+Much like the *u(t)* function in the above note, the *ratio(t)* function depends on whether we're looking at quadratic or cubic curves. Their form is intrinsically related to the *u(t)* function in that they both come rolling out of the same function evaluation, explained over on [MathOverflow](http://mathoverflow.net/questions/122257/finding-the-formula-for-Bézier-curve-ratios-hull-point-point-baseline) by Boris Zbarsky and myself. The ratio functions are the "s(t)" functions from the answers there, while the "u(t)" functions have the same name both here and on MathOverflow.
+
+\[
+  ratio(t)_{quadratic} = \left | \frac{t^2 + (1-t)^2 - 1}{t^2 + (1-t)^2} \right |
+\]
+
+\[
+  ratio(t)_{cubic} = \left | \frac{t^3 + (1-t)^3 - 1}{t^3 + (1-t)^3} \right |
+\]
+
+Unfortunately, this trick only works for quadratic and cubic curves. Once we hit higher order curves, things become a lot less predictable; the "fixed point *C*" is no longer fixed, moving around as we move the control points, and projections of *B* onto the line between start and end may actually lie on that line before the start, or after the end, and there are no simple ratios that we can exploit.
+
+</div>
+
+So: if we know B and its corresponding *t* value, then we know all the ABC values, which —together with a start and end coordinate— gives us the necessary information to reconstruct a curve's "de Casteljau skeleton", which means that two points and a value between 0 and 1, we can come up with a curve. And that opens up possibilities: curve manipulation by dragging an on-curve point, as well as curve fitting of "a bunch of coordinates". These are useful things, and we'll look at both in the next sections.

chapters/abc/handler.js

@@ -0,0 +1,173 @@
+module.exports = {
+
+  // ============== first sketch set =====================
+
+  /**
+   * The entry point for the quadratic curve example
+   */
+  setupQuadratic: function(api) {
+    var curve = api.getDefaultQuadratic();
+    curve.points[0].y -= 10;
+    api.setCurve(curve);
+  },
+
+  /**
+   * The entry point for the cubic curve example
+   */
+  setupCubic: function(api) {
+    var curve = api.getDefaultCubic();
+    curve.points[2].y -= 20;
+    api.setCurve(curve);
+    api.lut = curve.getLUT(100);
+  },
+
+  /**
+   * When someone clicks a graphic, find the associated
+   * on-curve t value and redraw with that new knowledge.
+   */
+  onClick: function(evt, api) {
+    api.t = api.curve.on({x: evt.offsetX, y: evt.offsetY},7);
+    if (api.t < 0.05 || api.t > 0.95) api.t = false;
+    api.redraw();
+  },
+
+  /**
+   * The master draw function for the "projection" sketches
+   */
+  draw: function(api, curve) {
+    // draw the basic curve and curve control points
+    api.reset();
+    api.drawSkeleton(curve);
+    api.drawCurve(curve);
+
+    api.setColor("black");
+    if (!api.t) return;
+
+    // draw the user-clicked on-curve point
+    api.drawCircle(api.curve.get(api.t),3);
+    api.setColor("lightgrey");
+
+    var utils = api.utils;
+
+    // find the A/B/C values as described in the section text
+    var hull = api.drawHull(curve, api.t);
+    var A, B, C;
+    if(hull.length === 6) {
+      A = curve.points[1];
+      B = hull[5];
+      C = utils.lli4(A, B, curve.points[0], curve.points[2]);
+      api.setColor("lightgrey");
+      api.drawLine(curve.points[0], curve.points[2]);
+    } else if(hull.length === 10) {
+      A = hull[5];
+      B = hull[9];
+      C = utils.lli4(A, B, curve.points[0], curve.points[3]);
+      api.setColor("lightgrey");
+      api.drawLine(curve.points[0], curve.points[3]);
+    }
+
+    // show the lines between the A/B/C values
+    api.setColor("#00FF00");
+    api.drawLine(A,B);
+    api.setColor("red");
+    api.drawLine(B,C);
+    api.setColor("black");
+    api.drawCircle(C,3);
+
+    // with their associated labels
+    api.setFill("black");
+    api.text("A", {x:10 + A.x, y: A.y});
+    api.text("B (t = " + api.utils.round(api.t,2) + ")", {x:10 + B.x, y: B.y});
+    api.text("C", {x:10 + C.x, y: C.y});
+
+    // and show the distance ratio, which we see does not change irrespective of whether A/B/C change.
+    var d1 = utils.dist(A, B);
+    var d2 = utils.dist(B, C);
+    var ratio = d1/d2;
+    var h = api.getPanelHeight();
+    api.text("d1 (A-B): " + utils.round(d1,2) + ", d2 (B-C): "+ utils.round(d2,2) + ", ratio (d1/d2): " + utils.round(ratio,4), {x:10, y:h-7});
+  },
+
+  // ============== second sketch set =====================
+
+  /**
+   * on mouse move, fix the t value for drawing based on the
+   * cursor position over the sketch. All the way on the left
+   * is t=0, all the way on the right is t=1, with a linear
+   * interpolation for anything in between.
+   */
+  setCT: function(evt,api) {
+    api.t = evt.offsetX / api.getPanelWidth();
+  },
+
+  /**
+   * Draw the quadratic C(t) values
+   */
+  drawQCT: function(api) {
+    api.u = api.u || function(t) {
+      var top = (t-1) * (t-1),
+          bottom = 2*t*t - 2*t + 1;
+      return top/bottom;
+    };
+    this.drawCTgraph(api);
+  },
+
+  /**
+   * Draw the cubic C(t) values
+   */
+  drawCCT: function(api) {
+    api.u = api.u || function(t) {
+      var top = (1-t) * (1-t) * (1-t),
+          bottom = t*t*t + top;
+      return top/bottom;
+    };
+    this.drawCTgraph(api);
+  },
+
+  /**
+   * Draw a C(t) curve
+   */
+  drawCTgraph: function(api) {
+    api.reset();
+    var w = api.getPanelWidth();
+    var pad = 20;
+    var fwh = w - 2*pad;
+
+    // draw some axes
+    api.setColor("black");
+    api.drawAxes(pad, "t",0,1, "u",0,1);
+
+    // draw the C(t) function using an
+    // indirection function that takes a
+    // t value and spits out the C(t) value
+    // as a point coordinate.
+    api.setColor("blue");
+    var uPoint = function(t) {
+      var value = api.u(t),
+          res = { x: pad + t*fwh, y: pad + value*fwh };
+      return res;
+    };
+    api.drawFunction(uPoint);
+
+    // if the cursor is (or was ever) over this
+    // graphic, draw the "crosshair" that pinpoints
+    // where in the function the associated t/C(t)
+    // coordinate is.
+    if (api.t) {
+      var v = api.u(api.t),
+          v1 = api.utils.round(v,3),
+          v2 = api.utils.round(1-v,3),
+          up = uPoint(api.t);
+      api.drawLine({x:up.x,y:pad}, up);
+      api.drawLine({x:pad,y:up.y}, up);
+      api.drawCircle(up,3);
+
+      // with some handy text that shows the actual computed values
+      api.setFill("blue");
+      api.text("    t = " + api.utils.round(api.t,3), {x:up.x+10, y:up.y-7});
+      api.text("u(t) = " + api.utils.round(v,3), {x:up.x+10, y:up.y+7});
+      api.setFill("black");
+      api.text("C = "+v1+" * start + "+v2+" * end", {x:w/2 - pad, y:pad+fwh});
+    }
+  }
+};

chapters/abc/index.js

@@ -0,0 +1,3 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+module.exports = generateBase("abc", handler);

chapters/aligning/content.en-GB.md

@@ -0,0 +1,44 @@
+# Aligning curves
+
+While there are an incredible number of curves we can define by varying the x- and y-coordinates for the control points, not all curves are actually distinct. For instance, if we define a curve, and then rotate it 90 degrees, it's still the same curve, and we'll find its extremities in the same spots, just at different draw coordinates. As such, one way to make sure we're working with a "unique" curve is to "axis-align" it.
+
+Aligning also simplifies a curve's functions. We can translate (move) the curve so that the first point lies on (0,0), which turns our *n* term polynomial functions into *n-1* term functions. The order stays the same, but we have less terms. Then, we can rotate the curves so that the last point always lies on the x-axis, too, making its coordinate (...,0). This further simplifies the function for the y-component to an *n-2* term function. For instance, if we have a cubic curve such as this:
+
+\[
+\left \{ \begin{matrix}
+  x = BLUE[120] \cdot (1-t)^3 BLUE[+ 35] \cdot 3 \cdot (1-t)^2 \cdot t BLUE[+ 220] \cdot 3 \cdot (1-t) \cdot t^2 BLUE[+ 220] \cdot t^3 \\
+  y = BLUE[160] \cdot (1-t)^3 BLUE[+ 200] \cdot 3 \cdot (1-t)^2 \cdot t BLUE[+ 260] \cdot 3 \cdot (1-t) \cdot t^2 BLUE[+ 40] \cdot t^3
+\end{matrix} \right.
+\]
+
+Then translating it so that the first coordinate lies on (0,0), moving all *x* coordinates by -120, and all *y* coordinates by -160, gives us:
+
+\[
+\left \{ \begin{matrix}
+  x = BLUE[0] \cdot (1-t)^3 BLUE[- 85] \cdot 3 \cdot (1-t)^2 \cdot t BLUE[+ 100] \cdot 3 \cdot (1-t) \cdot t^2 BLUE[+ 100] \cdot t^3 \\
+  y = BLUE[0] \cdot (1-t)^3 BLUE[+ 40] \cdot 3 \cdot (1-t)^2 \cdot t BLUE[+ 100] \cdot 3 \cdot (1-t) \cdot t^2 BLUE[- 120] \cdot t^3
+\end{matrix} \right.
+\]
+
+If we then rotate the curve so that its end point lies on the x-axis, the coordinates (integer-rounded for illustrative purposes here) become:
+
+\[
+\left \{ \begin{matrix}
+  x = BLUE[0] \cdot (1-t)^3 BLUE[- 85] \cdot 3 \cdot (1-t)^2 \cdot t BLUE[- 12] \cdot 3 \cdot (1-t) \cdot t^2 BLUE[+ 156] \cdot t^3 \\
+  y = BLUE[0] \cdot (1-t)^3 BLUE[- 40] \cdot 3 \cdot (1-t)^2 \cdot t BLUE[+ 140] \cdot 3 \cdot (1-t) \cdot t^2 BLUE[+ 0] \cdot t^3
+\end{matrix} \right.
+\]
+
+If we drop all the zero-terms, this gives us:
+
+\[
+\left \{ \begin{array}{l}
+  x = BLUE[- 85] \cdot 3 \cdot (1-t)^2 \cdot t BLUE[- 12] \cdot 3 \cdot (1-t) \cdot t^2 BLUE[+ 156] \cdot t^3 \\
+  y = BLUE[- 40] \cdot 3 \cdot (1-t)^2 \cdot t BLUE[+ 140] \cdot 3 \cdot (1-t) \cdot t^2
+\end{array} \right.
+\]
+
+We can see that our original curve definition has been simplified considerably. The following graphics illustrate the result of aligning our example curves to the x-axis, with the cubic case using the coordinates that were just used in the example formulae:
+
+<Graphic title="Aligning a quadratic curve" setup={this.setupQuadratic} draw={this.draw} />
+<Graphic title="Aligning a cubic curve" setup={this.setupCubic} draw={this.draw} />

chapters/aligning/handler.js

@@ -0,0 +1,72 @@
+module.exports = {
+  /**
+   * Setup function for a default quadratic curve.
+   */
+  setupQuadratic: function(api) {
+    var curve = api.getDefaultQuadratic();
+    api.setCurve(curve);
+  },
+
+  /**
+   * Setup function for a default cubic curve.
+   */
+  setupCubic: function(api) {
+    var curve = api.getDefaultCubic();
+    api.setCurve(curve);
+  },
+
+  /**
+   * A coordinate rotation function that rotates and
+   * translates the curve, such that the first coordinate
+   * of the curve is (0,0) and the last coordinate is (..., 0)
+   */
+  align: function(points, line) {
+    var tx = line.p1.x,
+        ty = line.p1.y,
+        // The atan2 function is so important to computing
+        // that most CPUs have a dedicated implementation
+        // at the hardware level for it.
+        a = -Math.atan2(line.p2.y-ty, line.p2.x-tx),
+        cos = Math.cos,
+        sin = Math.sin,
+        d = function(v) {
+          return {
+            x: (v.x-tx)*cos(a) - (v.y-ty)*sin(a),
+            y: (v.x-tx)*sin(a) + (v.y-ty)*cos(a)
+          };
+        };
+    return points.map(d);
+  },
+
+  /**
+   * Draw a curve and its aligned counterpart
+   * side by side across two panels.
+   */
+  draw: function(api, curve) {
+    api.setPanelCount(2);
+    api.reset();
+    api.drawSkeleton(curve);
+    api.drawCurve(curve);
+
+    var pts = curve.points;
+    var line = {p1: pts[0], p2: pts[pts.length-1]};
+    var apts = this.align(pts, line);
+    var aligned = new api.Bezier(apts);
+    var w = api.getPanelWidth();
+    var h = api.getPanelHeight();
+
+    var offset = {x:w, y:0};
+    api.setColor("black");
+    api.drawLine({x:0,y:0}, {x:0,y:h}, offset);
+    offset.x += w/4;
+    offset.y += h/2;
+    api.setColor("grey");
+    api.drawLine({x:0,y:-h/2}, {x:0,y:h/2}, offset);
+    api.drawLine({x:-w/4,y:0}, {x:w,y:0}, offset);
+    api.setFill("grey");
+
+    api.setColor("black");
+    api.drawSkeleton(aligned, offset);
+    api.drawCurve(aligned, offset);
+  }
+};

chapters/aligning/index.js

@@ -0,0 +1,3 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+module.exports = generateBase("aligning", handler);

chapters/arcapproximation/content.en-GB.md

@@ -0,0 +1,49 @@
+# Approximating Bézier curves with circular arcs
+
+Let's look at doing the exact opposite of the previous section: rather than approximating circular arc using Bézier curves, let's approximate Bézier curves using circular arcs.
+
+We already saw in the section on circle approximation that this will never yield a perfect equivalent, but sometimes you need circular arcs, such as when you're working with fabrication machinery, or simple vector languages that understand lines and circles, but not much else.
+
+The approach is fairly simple: pick a starting point on the curve, and pick two points that are further along the curve. Determine the circle that goes through those three points, and see if it fits the part of the curve we're trying to approximate. Decent fit? Try spacing the points further apart. Bad fit? Try spacing the points closer together. Keep doing this until you've found the "good approximation/bad approximation" boundary, record the "good" arc, and then move the starting point up to overlap the end point we previously found. Rinse and repeat until we've covered the entire curve.
+
+So: step 1, how do we find a circle through three points? That part is actually really simple. You may remember (if you ever learned it!) that a line between two points on a circle is called a [chord](https://en.wikipedia.org/wiki/Chord_%28geometry%29), and one property of chords is that the line from the center of any chord, perpendicular to that chord, passes through the center of the circle.
+
+So: if we have have three points, we have three (different) chords, and consequently, three (different) lines that go from those chords through the center of the circle. So we find the centers of the chords, find the perpendicular lines, find the intersection of those lines, and thus find the center of the circle.
+
+The following graphic shows this procedure with a different colour for each chord and its associated perpendicular through the center. You can move the points around as much as you like, those lines will always meet!
+
+<Graphic title="Finding a circle through three points" setup={this.setupCircle} draw={this.drawCircle} />
+
+So, with the procedure on how to find a circle through three points, finding the arc through those points is straight-forward: pick one of the three points as start point, pick another as an end point, and the arc has to necessarily go from the start point, over the remaining point, to the end point.
+
+So how can we convert a Bézier curve into a (sequence of) circular arc(s)?
+
+- Start at <em>t=0</em>
+- Pick two points further down the curve at some value <em>m = t + n</em> and <em>e = t + 2n</em>
+- Find the arc that these points define
+- Determine how close the found arc is to the curve:
+  - Pick two additional points <em>e1 = t + n/2</em> and <em>e2 = t + n + n/2</em>.
+  - These points, if the arc is a good approximation of the curve interval chosen, should
+      lie <em>on</em> the circle, so their distance to the center of the circle should be the
+      same as the distance from any of the three other points to the center.
+  - For point points, determine the (absolute) error between the radius of the circle, and the
+    <em>actual</em> distance from the center of the circle to the point on the curve.
+  - If this error is too high, we consider the arc bad, and try a smaller interval.
+
+The result of this is shown in the next graphic: we start at a guaranteed failure: s=0, e=1. That's the entire curve. The midpoint is simply at <em>t=0.5</em>, and then we start performing a [Binary Search](https://en.wikipedia.org/wiki/Binary_search_algorithm).
+
+1. We start with {0, 0.5, 1}
+2. That'll fail, so we retry with the interval halved: {0, 0.25, 0.5}
+  - If that arc's good, we move back up by half distance: {0, 0.375, 0.75}.
+  - However, if the arc was still bad, we move <em>down</em> by half the distance: {0, 0.125, 0.25}.
+3. We keep doing this over and over until we have two arcs found in sequence of which the first arc is good, and the second arc is bad. When we find that pair, we've found the boundary between a good approximation and a bad approximation, and we pick the former.
+
+The following graphic shows the result of this approach, with a default error threshold of 0.5, meaning that if an arc is off by a <em>combined</em> half pixel over both verification points, then we treat the arc as bad. This is an extremely simple error policy, but already works really well. Note that the graphic is still interactive, and you can use your up and down arrow keys keys to increase or decrease the error threshold, to see what the effect of a smaller or larger error threshold is.
+
+<Graphic title="Arc approximation of a Bézier curve" setup={this.setupCubic} draw={this.drawSingleArc} onKeyDown={this.props.onKeyDown} />
+
+With that in place, all that's left now is to "restart" the procedure by treating the found arc's end point as the new to-be-determined arc's starting point, and using points further down the curve. We keep trying this until the found end point is for <em>t=1</em>, at which point we are done. Again, the following graphic allows for up and down arrow key input to increase or decrease the error threshold, so you can see how picking a different threshold changes the number of arcs that are necessary to reasonably approximate a curve:
+
+<Graphic title="Arc approximation of a Bézier curve" setup={this.setupCubic} draw={this.drawArcs} onKeyDown={this.props.onKeyDown} />
+
+So... what is this good for? Obviously, if you're working with technologies that can't do curves, but can do lines and circles, then the answer is pretty straightforward, but what else? There are some reasons why you might need this technique: using circular arcs means you can determine whether a coordinate lies "on" your curve really easily (simply compute the distance to each circular arc center, and if any of those are close to the arc radii, at an angle between the arc start and end, bingo, this point can be treated as lying "on the curve"). Another benefit is that this approximation is "linear": you can almost trivially travel along the arcs at fixed speed. You can also trivially compute the arc length of the approximated curve (it's a bit like curve flattening). The only thing to bear in mind is that this is a lossy equivalence: things that you compute based on the approximation are guaranteed "off" by some small value, and depending on how much precision you need, arc approximation is either going to be super useful, or completely useless. It's up to you to decide which, based on your application!

chapters/arcapproximation/handler.js

@@ -0,0 +1,184 @@
+var atan2 = Math.atan2, PI = Math.PI, TAU = 2*PI, cos = Math.cos, sin = Math.sin;
+
+module.exports = {
+  // These are functions that can be called "From the page",
+  // rather than being internal to the sketch. This is useful
+  // for making on-page controls hook into the sketch code.
+  statics: {
+    keyHandlingOptions: {
+      propName: "error",
+      values: {
+        "38": 0.1,  // up arrow
+        "40": -0.1  // down arrow
+      },
+      controller: function(api) {
+        if (api.error < 0.1) {
+          api.error = 0.1;
+        }
+      }
+    }
+  },
+
+  /**
+   *  Setup up a skeleton curve that, when using its
+   *  points for a B-spline, can form a circle.
+   */
+  setupCircle: function(api) {
+    var curve = new api.Bezier(70,70, 140,40, 240,130);
+    api.setCurve(curve);
+  },
+
+  /**
+   * Set up the default quadratic curve.
+   */
+  setupQuadratic: function(api) {
+    var curve = api.getDefaultQuadratic();
+    api.setCurve(curve);
+  },
+
+  /**
+   * Set up the default cubic curve.
+   */
+  setupCubic: function(api) {
+    var curve = api.getDefaultCubic();
+    api.setCurve(curve);
+    api.error = 0.5;
+  },
+
+  /**
+   * Given three points, find the (only!) circle
+   * that passes through all three points, based
+   * on the fact that the perpendiculars of the
+   * chords between the points all cross each
+   * other at the center of that circle.
+   */
+  getCCenter: function(api, p1, p2, p3) {
+    // deltas
+    var dx1 = (p2.x - p1.x),
+        dy1 = (p2.y - p1.y),
+        dx2 = (p3.x - p2.x),
+        dy2 = (p3.y - p2.y);
+
+    // perpendiculars (quarter circle turned)
+    var dx1p = dx1 * cos(PI/2) - dy1 * sin(PI/2),
+        dy1p = dx1 * sin(PI/2) + dy1 * cos(PI/2),
+        dx2p = dx2 * cos(PI/2) - dy2 * sin(PI/2),
+        dy2p = dx2 * sin(PI/2) + dy2 * cos(PI/2);
+
+    // chord midpoints
+    var mx1 = (p1.x + p2.x)/2,
+        my1 = (p1.y + p2.y)/2,
+        mx2 = (p2.x + p3.x)/2,
+        my2 = (p2.y + p3.y)/2;
+
+    // midpoint offsets
+    var mx1n = mx1 + dx1p,
+        my1n = my1 + dy1p,
+        mx2n = mx2 + dx2p,
+        my2n = my2 + dy2p;
+
+    // intersection of these lines:
+    var i = api.utils.lli8(mx1,my1,mx1n,my1n, mx2,my2,mx2n,my2n);
+    var r = api.utils.dist(i,p1);
+
+    // arc start/end values, over mid point
+    var s = atan2(p1.y - i.y, p1.x - i.x),
+        m = atan2(p2.y - i.y, p2.x - i.x),
+        e = atan2(p3.y - i.y, p3.x - i.x);
+
+    // determine arc direction (cw/ccw correction)
+    var __;
+    if (s<e) {
+      if (s>m || m>e) { s += TAU; }
+      if (s>e) { __=e; e=s; s=__; }
+    } else {
+      if (e<m && m<s) { __=e; e=s; s=__; } else { e += TAU; }
+    }
+
+    // assign and done.
+    i.s = s;
+    i.e = e;
+    i.r = r;
+    return i;
+  },
+
+  /**
+   * Draw the circle-computation sketch
+   */
+  drawCircle: function(api, curve) {
+    api.reset();
+    var pts = curve.points;
+
+    // get center
+    var C = this.getCCenter(api, pts[0], pts[1], pts[2]);
+    // outer circle
+    api.setColor("grey");
+    api.drawCircle(C, api.utils.dist(C,pts[0]));
+
+    // controllable points
+    api.setColor("black");
+    pts.forEach(p => api.drawCircle(p,3));
+
+    // chords and perpendicular lines
+    var m;
+
+    api.setColor("blue");
+    api.drawLine(pts[0], pts[1]);
+    m = {x: (pts[0].x + pts[1].x)/2, y: (pts[0].y + pts[1].y)/2};
+    api.drawLine(m, {x:C.x+(C.x-m.x), y:C.y+(C.y-m.y)});
+
+    api.setColor("red");
+    api.drawLine(pts[1], pts[2]);
+    m = {x: (pts[1].x + pts[2].x)/2, y: (pts[1].y + pts[2].y)/2};
+    api.drawLine(m, {x:C.x+(C.x-m.x), y:C.y+(C.y-m.y)});
+
+    api.setColor("green");
+    api.drawLine(pts[2], pts[0]);
+    m = {x: (pts[2].x + pts[0].x)/2, y: (pts[2].y + pts[0].y)/2};
+    api.drawLine(m, {x:C.x+(C.x-m.x), y:C.y+(C.y-m.y)});
+
+    // center
+    api.setColor("black");
+    api.drawPoint(C);
+    api.setFill("black");
+    api.text("Intersection point", C, {x:-25, y:10});
+  },
+
+  /**
+   * Draw a single arc being fit to a Bezier curve,
+   * to show off the general application.
+   */
+  drawSingleArc: function(api, curve) {
+    api.reset();
+    var arcs = curve.arcs(api.error);
+    api.drawSkeleton(curve);
+    api.drawCurve(curve);
+
+    var a = arcs[0];
+    api.setColor("red");
+    api.setFill("rgba(255,0,0,0.2)");
+    api.debug = true;
+    api.drawArc(a);
+
+    api.setFill("black");
+    api.text("Arc approximation with total error " + api.utils.round(api.error,1), {x:10, y:15});
+  },
+
+  /**
+   * Draw an arc approximation for an entire Bezier curve.
+   */
+  drawArcs: function(api, curve) {
+    api.reset();
+    var arcs = curve.arcs(api.error);
+    api.drawSkeleton(curve);
+    api.drawCurve(curve);
+    arcs.forEach(a => {
+      api.setRandomColor(0.3);
+      api.setFill(api.getColor());
+      api.drawArc(a);
+    });
+
+    api.setFill("black");
+    api.text("Arc approximation with total error " + api.utils.round(api.error,1) + " per arc segment", {x:10, y:15});
+  }
+};

chapters/arcapproximation/index.js

@@ -0,0 +1,4 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+var keyHandling = require("../../decorators/keyhandling-decorator.jsx");
+module.exports = keyHandling(generateBase("arcapproximation", handler));

chapters/arclength/content.en-GB.md

@@ -0,0 +1,103 @@
+# Arc length
+
+How long is a Bézier curve? As it turns out, that's not actually an easy question, because the answer requires maths that —much like root finding— cannot generally be solved the traditional way. If we have a parametric curve with *f<sub>x</sub>(t)* and *f<sub>y</sub>(t)*, then the length of the curve, measured from start point to some point *t = z*, is computed using the following seemingly straight forward (if a bit overwhelming) formula:
+
+\[
+  \int_{0}^{z}\sqrt{f_x'(t)^2+f_y'(t)^2} dt
+\]
+
+or, more commonly written using Leibnitz notation as:
+
+\[
+  length = \int_{0}^{z}\sqrt{ \left (dx/dt \right )^2+\left (dy/dt \right )^2} dt
+\]
+
+This formula says that the length of a parametric curve is in fact equal to the **area** underneath a function that looks a remarkable amount like Pythagoras' rule for computing the diagonal of a straight angled triangle. This sounds pretty simple, right? Sadly, it's far from simple... cutting straight to after the chase is over: for quadratic curves, this formula generates an [unwieldy computation](http://www.wolframalpha.com/input/?i=antiderivative+for+sqrt((2*(1-t)*t*B+%2B+t%5E2*C)%27%5E2+%2B+(2*(1-t)*t*E)%27%5E2)&incParTime=true), and we're simply not going to implement things that way. For cubic Bézier curves, things get even more fun, because there is no "closed form" solution, meaning that due to the way calculus works, there is no generic formula that allows you to calculate the arc length. Let me just repeat this, because it's fairly crucial: ***for cubic and higher Bézier curves, there is no way to solve this function if you want to use it "for all possible coordinates"***.
+
+Seriously: [It cannot be done](https://en.wikipedia.org/wiki/Abel%E2%80%93Ruffini_theorem).
+
+So we turn to numerical approaches again. The method we'll look at here is the [Gauss quadrature](http://www.youtube.com/watch?v=unWguclP-Ds&feature=BFa&list=PLC8FC40C714F5E60F&index=1). This approximation is a really neat trick, because for any *n<sup>th</sup>* degree polynomial it finds approximated values for an integral really efficiently. Explaining this procedure in length is way beyond the scope of this page, so if you're interested in finding out why it works, I can recommend the University of South Florida video lecture on the procedure, linked in this very paragraph. The general solution we're looking for is the following:
+
+\[
+  \int_{-1}^{1}\sqrt{ \left (dx/dt \right )^2+\left (dy/dt \right )^2} dt
+  =
+  \int_{-1}^{1}f(t) dt
+  \simeq
+  \left [
+    \underset{strip\ 1}{ \underbrace{ C_1 \cdot f\left(t_1\right) }}
+    \ +\ ...
+    \ +\ \underset{strip\ n}{ \underbrace{ C_n \cdot f\left(t_n\right) }}
+  \right ]
+  =
+  \underset{strips\ 1\ through\ n}{
+    \underbrace{
+      \sum_{i=1}^{n}{
+        C_i \cdot f\left(t_i\right)
+      }
+    }
+  }
+\]
+
+In plain text: an integral function can always be treated as the sum of an (infinite) number of (infinitely thin) rectangular strips sitting "under" the function's plotted graph. To illustrate this idea, the following graph shows the integral for a sinusoid function. The more strips we use (and of course the more we use, the thinner they get) the closer we get to the true area under the curve, and thus the better the approximation:
+
+<div className="figure">
+  <Graphic inline={true} static={true} title="A function's approximated integral" setup={this.setup} draw={this.drawCoarseIntegral}/>
+  <Graphic inline={true} static={true} title="A better approximation" setup={this.setup} draw={this.drawFineIntegral}/>
+  <Graphic inline={true} static={true} title="An even better approximation" setup={this.setup} draw={this.drawSuperFineIntegral}/>
+</div>
+
+Now, infinitely many terms to sum and infinitely thin rectangles are not something that computers can work with, so instead we're going to approximate the infinite summation by using a sum of a finite number of "just thin" rectangular strips. As long as we use a high enough number of thin enough rectangular strips, this will give us an approximation that is pretty close to what the real value is.
+
+So, the trick is to come up with useful rectangular strips. A naive way is to simply create *n* strips, all with the same width, but there is a far better way using special values for *C* and *f(t)* depending on the value of *n*, which indicates how many strips we'll use, and it's called the Legendre-Gauss quadrature.
+
+This approach uses strips that are *not* spaced evenly, but instead spaces them in a special way based on describing the function as a polynomial (the more strips, the more accurate the polynomial), and then computing the exact integral for that polynomial. We're essentially performing arc length computation on a flattened curve, but flattening it based on the intervals dictated by the Legendre-Gauss solution.
+
+<div className="note">
+
+Note that one requirement for the approach we'll use is that the integral must run from -1 to 1. That's no good, because we're dealing with Bézier curves, and the length of a section of curve applies to values which run from 0 to "some value smaller than or equal to 1" (let's call that value *z*). Thankfully, we can quite easily transform any integral interval to any other integral interval, by shifting and scaling the inputs. Doing so, we get the following:
+
+\[
+\begin{array}{l}
+  \int_{0}^{z}\sqrt{ \left (dx/dt \right )^2+\left (dy/dt \right )^2} dt
+  \\
+  \simeq \
+  \frac{z}{2} \cdot \left [ C_1 \cdot f\left(\frac{z}{2} \cdot t_1 + \frac{z}{2}\right)
+                            + ...
+                            + C_n \cdot f\left(\frac{z}{2} \cdot t_n + \frac{z}{2}\right)
+                    \right ]
+  \\
+  = \
+  \frac{z}{2} \cdot \sum_{i=1}^{n}{C_i \cdot f\left(\frac{z}{2} \cdot t_i + \frac{z}{2}\right)}
+\end{array}
+\]
+
+That may look a bit more complicated, but the fraction involving *z* is a fixed number, so the summation, and the evaluation of the *f(t)* values are still pretty simple.
+
+So, what do we need to perform this calculation? For one, we'll need an explicit formula for *f(t)*, because that derivative notation is handy on paper, but not when we have to implement it. We'll also need to know what these *C<sub>i</sub>* and *t<sub>i</sub>* values should be. Luckily, that's less work because there are actually many tables available that give these values, for any *n*, so if we want to approximate our integral with only two terms (which is a bit low, really) then [these tables](legendre-gauss.html) would tell us that for *n=2* we must use the following values:
+
+\[
+\begin{array}{l}
+C_1 = 1 \\
+C_2 = 1 \\
+t_1 = - \frac{1}{\sqrt{3}} \\
+t_2 = + \frac{1}{\sqrt{3}}
+\end{array}
+\]
+
+Which means that in order for us to approximate the integral, we must plug these values into the approximate function, which gives us:
+
+\[
+\int_{0}^{z}\sqrt{ \left (dx/dt \right )^2+\left (dy/dt \right )^2} dt
+≃
+\frac{z}{2} \cdot \left [ f\left( \frac{z}{2} \cdot \frac{-1}{\sqrt{3}} + \frac{z}{2} \right)
+              + f\left( \frac{z}{2} \cdot \frac{1}{\sqrt{3}} + \frac{z}{2} \right)
+          \right ]
+\]
+
+We can program that pretty easily, provided we have that *f(t)* available, which we do, as we know the full description for the Bézier curve functions B<sub>x</sub>(t) and B<sub>y</sub>(t).
+
+</div>
+
+If we use the Legendre-Gauss values for our *C* values (thickness for each strip) and *t* values (location of each strip), we can determine the approximate length of a Bézier curve by computing the Legendre-Gauss sum. The following graphic shows a cubic curve, with its computed lengths; Go ahead and change the curve, to see how its length changes. One thing worth trying is to see if you can make a straight line, and see if the length matches what you'd expect. What if you form a line with the control points on the outside, and the start/end points on the inside?
+
+<Graphic title="Arc length for a Bézier curve" setup={this.setupCurve} draw={this.drawCurve}/>

chapters/arclength/handler.js

@@ -0,0 +1,125 @@
+var sin = Math.sin;
+var tau = Math.PI*2;
+
+module.exports = {
+  /**
+   * Set up a sinusoid generating function,
+   * which we'll use to draw the "progressively
+   * better looking" integral approximations.
+   */
+  setup: function(api) {
+    var w = api.getPanelWidth();
+    var h = api.getPanelHeight();
+    var generator;
+    if (!this.generator) {
+      generator = ((v,scale) => {
+        scale = scale || 1;
+        return {
+          x: v*w/tau,
+          y: scale * sin(v)
+        };
+      });
+      generator.start = 0;
+      generator.end = tau;
+      generator.step = 0.1;
+      generator.scale = h/3;
+      this.generator = generator;
+    }
+  },
+
+  /**
+   * Draw the generator's sine function:
+   */
+  drawSine: function(api, dheight) {
+    var w = api.getPanelWidth();
+    var h = api.getPanelHeight();
+    var generator = this.generator;
+    generator.dheight = dheight;
+
+    api.setColor("black");
+    api.drawLine({x:0,y:h/2}, {x:w,y:h/2});
+    api.drawFunction(generator, {x:0, y:h/2});
+  },
+
+  /**
+   * Draw the sliced between the sine curve and
+   * the x-axis, with a variable number of steps so
+   * we can show the approximation becoming better
+   * and better as we increase the step count.
+   */
+  drawSlices: function(api, steps) {
+    var w = api.getPanelWidth();
+    var h = api.getPanelHeight();
+    var f = w/tau;
+    var area = 0;
+    var c = steps <= 25 ? 1 : 0;
+    api.reset();
+    api.setColor("transparent");
+    api.setFill("rgba(150,150,255, 0.4)");
+    for (var step=tau/steps, i=step/2, v, p1, p2; i<tau+step/2; i+=step) {
+      v = this.generator(i);
+
+      // draw a rectangular strip between the curve and the x-axis:
+      p1 = {x:v.x - f*step/2 + c, y: 0};
+      p2 = {x:v.x + f*step/2 - c, y: v.y * this.generator.scale};
+
+      if (!c) { api.setFill("rgba(150,150,255,"+(0.4 + 0.3*Math.random())+")"); }
+      api.drawRect(p1, p2, {x:0, y:h/2});
+
+      // and keep track of the (much simpler to compute) approximated area under the curve so far:
+      area += step * Math.abs(v.y * this.generator.scale);
+    }
+    api.setFill("black");
+    var trueArea = ((100 * 4 * h/3)|0)/100;
+    var currArea = ((100 * area)|0)/100;
+    api.text("Approximating with "+steps+" strips (true area: "+trueArea+"): " + currArea, {x: 10, y: h-15});
+  },
+
+  /**
+   * Draw the sine curve, with a 10 slice approximation:
+   */
+  drawCoarseIntegral: function(api) {
+    api.reset();
+    this.drawSlices(api, 10);
+    this.drawSine(api);
+  },
+
+  /**
+   * Draw the sine curve, with a 24 slice approximation:
+   */
+  drawFineIntegral: function(api) {
+    api.reset();
+    this.drawSlices(api, 24);
+    this.drawSine(api);
+  },
+
+  /**
+   * Draw the sine curve, with a 99 slice approximation:
+   */
+  drawSuperFineIntegral: function(api) {
+    api.reset();
+    this.drawSlices(api, 99);
+    this.drawSine(api);
+  },
+
+  /**
+   * Set up a default cubic curve for which we'll be determining
+   * its length, using the iterative integral approach:
+   */
+  setupCurve: function(api) {
+    var curve = api.getDefaultCubic();
+    api.setCurve(curve);
+  },
+
+  /**
+   * Draw our curve, and show its computed length:
+   */
+  drawCurve: function(api, curve) {
+    api.reset();
+    api.drawSkeleton(curve);
+    api.drawCurve(curve);
+    var len = curve.length();
+    api.setFill("black");
+    api.text("Curve length: "+len+" pixels", {x:10, y:15});
+  }
+};

chapters/arclength/index.js

@@ -0,0 +1,3 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+module.exports = generateBase("arclength", handler);

chapters/arclengthapprox/content.en-GB.md

@@ -0,0 +1,10 @@
+# Approximated arc length
+
+Sometimes, we don't actually need the precision of a true arc length, and we can get away with simply computing the approximate arc length instead. The by far fastest way to do this is to flatten the curve and then simply calculate the linear distance from point to point. This will come with an error, but this can be made arbitrarily small by increasing the segment count.
+
+If we combine the work done in the previous sections on curve flattening and arc length computation, we can implement these with minimal effort:
+
+<Graphic title="Approximate quadratic curve arc length" setup={this.setupQuadratic} draw={this.draw} onKeyDown={this.props.onKeyDown} />
+<Graphic title="Approximate cubic curve arc length" setup={this.setupCubic} draw={this.draw} onKeyDown={this.props.onKeyDown} />
+
+Try clicking on the sketch and using your up and down arrow keys to lower the number of segments for both the quadratic and cubic curve. You may notice that the error in length is actually pretty significant, even if the percentage is fairly low: if the number of segments used yields an error of 0.1% or higher, the flattened curve already looks fairly obviously flattened. And of course, the longer the curve, the more significant the error will be.

chapters/arclengthapprox/handler.js

@@ -0,0 +1,72 @@
+module.exports = {
+  // These are functions that can be called "From the page",
+  // rather than being internal to the sketch. This is useful
+  // for making on-page controls hook into the sketch code.
+  statics: {
+    keyHandlingOptions: {
+      propName: "steps",
+      values: {
+        "38": 1,  // up arrow
+        "40": -1 // down arrow
+      },
+      controller: function(api) {
+        if (api.steps < 1) {
+          api.steps = 1;
+        }
+      }
+    }
+  },
+
+  /**
+   * Set up the default quadratic curve.
+   */
+  setupQuadratic: function(api) {
+    var curve = api.getDefaultQuadratic();
+    api.setCurve(curve);
+    api.steps = 10;
+  },
+
+  /**
+   * Set up the default cubic curve.
+   */
+  setupCubic: function(api) {
+    var curve = api.getDefaultCubic();
+    api.setCurve(curve);
+    api.steps = 16;
+  },
+
+  /**
+   * Draw a curve and its polygon-approximation,
+   * showing the "true" length of the curve vs. the
+   * length based on tallying up the polygon sections.
+   */
+  draw: function(api, curve) {
+    api.reset();
+    api.drawSkeleton(curve);
+
+    var pts = curve.getLUT(api.steps);
+
+    var step = 1 / api.steps;
+    var p0 = curve.points[0], pc;
+    for(var t=step; t<1.0+step; t+=step) {
+      pc = curve.get(Math.min(t,1));
+      api.setColor("red");
+      api.drawLine(p0,pc);
+      p0 = pc;
+    }
+
+    var len = curve.length();
+    var alen = 0;
+    for(var i=0,p1,dx,dy; i<pts.length-1; i++) {
+      p0 = pts[i];
+      p1 = pts[i+1];
+      dx = p1.x-p0.x;
+      dy = p1.y-p0.y;
+      alen += Math.sqrt(dx*dx+dy*dy);
+    }
+    alen = ((100*alen)|0)/100;
+    len = ((100*len)|0)/100;
+
+    api.text("Approximate length, "+api.steps+" steps: "+alen+" (true: "+len+")", {x:10, y: 15});
+  }
+};

chapters/arclengthapprox/index.js

@@ -0,0 +1,4 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+var keyHandling = require("../../decorators/keyhandling-decorator.jsx");
+module.exports = keyHandling(generateBase("arclengthapprox", handler));

chapters/boundingbox/content.en-GB.md

@@ -0,0 +1,16 @@
+# Bounding boxes
+
+If we have the extremities, and the start/end points, a simple for loop that tests for min/max values for x and y means we have the four values we need to box in our curve:
+
+*Computing the bounding box for a Bézier curve*:
+
+1. Find all *t* value(s) for the curve derivative's x- and y-roots.
+2. Discard any *t* value that's lower than 0 or higher than 1, because Bézier curves only use the interval [0,1].
+3. Determine the lowest and highest value when plugging the values *t=0*, *t=1* and each of the found roots into the original functions: the lowest value is the lower bound, and the highest value is the upper bound for the bounding box we want to construct.
+
+Applying this approach to our previous root finding, we get the following bounding boxes (with all curve extremity points shown on the curve):
+
+<Graphic title="Quadratic Bézier bounding box" setup={this.setupQuadratic} draw={this.draw} />
+<Graphic title="Cubic Bézier bounding box" setup={this.setupCubic} draw={this.draw} />
+
+We can construct even nicer boxes by aligning them along our curve, rather than along the x- and y-axis, but in order to do so we first need to look at how aligning works.

chapters/boundingbox/handler.js

@@ -0,0 +1,24 @@
+module.exports = {
+  setupQuadratic: function(api) {
+    var curve = api.getDefaultQuadratic();
+    api.setCurve(curve);
+  },
+
+  setupCubic: function(api) {
+    var curve = api.getDefaultCubic();
+    api.setCurve(curve);
+  },
+
+  draw: function(api, curve) {
+    api.reset();
+    api.setColor("#00FF00");
+    api.drawbbox(curve.bbox());
+    api.setColor("black");
+    api.drawSkeleton(curve);
+    api.drawCurve(curve);
+    api.setColor("red");
+    curve.extrema().values.forEach(t => {
+      api.drawCircle(curve.get(t), 3);
+    });
+  }
+};

chapters/boundingbox/index.js

@@ -0,0 +1,3 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+module.exports = generateBase("boundingbox", handler);

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')} />

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);
+  }
+};

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);
+  }
+};

chapters/bsplines/basic-sketch.js

@@ -0,0 +1,30 @@
+module.exports = {
+  degree: 3,
+  activeDistance: 9,
+
+  setup() {
+    this.size(600, 300);
+    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);
+  }
+};

chapters/bsplines/center-cut-bspline.js

@@ -0,0 +1,52 @@
+module.exports = {
+  degree: 3,
+  activeDistance: 9,
+
+  setup() {
+    this.size(400, 400);
+
+    var TAU = Math.PI*2;
+    for (let i=0; i<TAU; i+=TAU/9) {
+      this.points.push({
+        x: this.width/2 + 100 * Math.cos(i),
+        y: this.height/2 + 100 * Math.sin(i)
+      });
+    }
+
+    this.knots = this.formKnots(this.points);
+    var m = Math.round(this.points.length/2)|0;
+    this.knots[m+0] = this.knots[m];
+    this.knots[m+1] = this.knots[m];
+    this.knots[m+2] = this.knots[m];
+    for (let i=m+3; i<this.knots.length; i++) {
+      this.knots[i] = this.knots[i-1] + 1;
+    }
+
+    if(this.props.controller) {
+      this.props.controller(this, this.knots);
+    }
+
+    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);
+  }
+};

chapters/bsplines/content.en-GB.md

@@ -0,0 +1,224 @@
+# B-Splines
+
+No discussion on Bézier curves is complete without also giving mention of that other beast in the curve design space: B-Splines. Easily confused to mean Bézier splines, that's not actually what they are; they are "basis function" splines, which makes a lot of difference, and we'll be looking at those differences in this section. We're not going to dive as deep into B-Splines as we have for Bézier curves (that would be an entire primer on its own) but we'll be looking at how B-Splines work, what kind of maths is involved in computing them, and how to draw them based on a number of parameters that you can pick for individual B-Splines.
+
+First off: B-Splines are [piecewise polynomial interpolation curves](https://en.wikipedia.org/wiki/Piecewise), where the "single curve" is built by performing polynomial interpolation over a set of points, using a sliding window of a fixed number of points. For instance, a "cubic" B-Spline defined by twelve points will have its curve built by evaluating the polynomial interpolation of four points, and the curve can be treated as a lot of different sections, each controlled by four points at a time, such that the full curve consists of smoothly connected sections defined by points {1,2,3,4}, {2,3,4,5}, ..., {8,9,10,11}, and finally {9,10,11,12}, for eight sections.
+
+What do they look like? They look like this! .. okay that's an empty graph, but simply click to place some point, with the stipulation that you need at least four point to see any curve. More than four points simply draws a longer B-Spline curve:
+
+<BSplineGraphic sketch={this.basicSketch} />
+
+The important part to notice here is that we are **not** doing the same thing with B-Splines that we do for poly-Béziers or Catmull-Rom curves: both of the latter simply define new sections as literally "new sections based on new points", so a 12 point cubic poly-Bézier curve is actually impossible, because we start with a four point curve, and then add three more points for each section that follows, so we can only have 4, 7, 10, 13, 16, etc point Poly-Béziers. Similarly, while Catmull-Rom curves can grow by adding single points, this addition of a single point introduces three implicit Bézier points. Cubic B-Splines, on the other hand, are smooth interpolations of *each possible curve involving four consecutive points*, such that at any point along the curve except for our start and end points, our on-curve coordinate is defined by four control points.
+
+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 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.
+
+## How to compute a B-Spline curve: some maths
+
+Given a B-Spline of degree `d` and thus order `k=d+1` (so a quadratic B-Spline is degree 2 and order 3, a cubic B-Spline is degree 3 and order 4, etc) and `n` control points `P<sub>0</sub>` through `P<sub>n-1</sub>`, we can compute a point on the curve for some value `t` in the interval [0,1] (where 0 is the start of the curve, and 1 the end, just like for Bézier curves), by evaluating the following function:
+
+\[
+  Point(t) = \sum^n_{i=0} P_i \cdot N_{i,k}(t)
+\]
+
+Which, honestly, doesn't tell us all that much. All we can see is that a point on a B-Spline curve is defined as "a mix of all the control points, weighted somehow", where the weighting is achieved through the *N(...)* function, subscripted with an obvious parameter `i`, which comes from our summation, and some magical parameter `k`. So we need to know two things: 1. what does N(t) do, and 2. what is that `k`? Let's cover both, in reverse order.
+
+The parameter `k` represents the "knot interval" over which a section of curve is defined. As we learned earlier, a B-Spline curve is itself an interpoliation of curves, and we can treat each transition where a control point starts or stops influencing the total curvature as a "knot on the curve".
+Doing so for a degree `d` B-Spline with `n` control point gives us `d + n + 1` knots, defining `d + n` intervals along the curve, and it is these intervals that the above `k` subscript to the N() function applies to.
+
+Then the N() function itself. What does it look like?
+
+\[
+  N_{i,k}(t) = \left ( \frac{t-knot_i}{knot_{(i+k-1)} - knot_i}\right ) \cdot N_{i,k-1}(t) + \left ( \frac{knot_{(i+k)}-t}{knot_{(i+k)} - knot_{(i+1)}} \right ) \cdot N_{i+1,k-1}(t)
+\]
+
+So this is where we see the interpolation: N(t) for an (i,k) pair (that is, for a step in the above summation, on a specific knot interval) is a mix between N(t) for (i,k-1) and N(t) for (i+1,k-1), so we see that this is a recursive iteration where `i` goes up, and `k` goes down, so it seem reasonable to expect that this recursion has to stop at some point; obviously, it does, and specifically it does so for the following `i`/`k` values:
+
+\[
+  N_{i,1}(t) = \left\{\begin{matrix}
+               1& \text{if } t \in [knot_i,knot_{i+1}) \\
+               0& \text{otherwise}
+               \end{matrix}\right.
+\]
+
+And this function finally has a straight up evaluation: if a `t` value lies within a knot-specific interval once we reach a `k=1` value, it "counts", otherwise it doesn't. We did cheat a little, though, because for all these values we need to scale our `t` value first, so that it lies in the interval bounded by `knots[d]` and `knots[n]`, which are the start point and end point where curvature is controlled by exactly `order` control points. For instance, for degree 3 (=order 4) and 7 control points, with knot vector [1,2,3,4,5,6,7,8,9,10,11], we map `t` from [the interval 0,1] to the interval [4,8], and then use that value in the functions above, instead.
+
+## Can we simplify that?
+
+We can, yes.
+
+People far smarter than us have looked at this work, and two in particular — [Maurice Cox](http://www.npl.co.uk/people/maurice-cox) and [Carl de Boor](https://en.wikipedia.org/wiki/Carl_R._de_Boor) — came to a mathematically pleasing solution: to compute a point P(t), we can compute this point by evaluating *d(t)* on a curve section between knots *i* and *i+1*:
+
+\[
+  d^k_i(t) = \alpha_{i,k} \cdot d^{k-1}_i(t) + (1-\alpha_{i,k}) \cdot d^{k-1}_{i-1}(t)
+\]
+
+This is another recursive function, with *k* values decreasing from the curve order to 1, and the value *α* (alpha) defined by:
+
+\[
+  \alpha_{i,k} = \frac{t - knots[i]}{knots[i+1+n-k] - knots[i]}
+\]
+
+That looks complicated, but it's not. Computing alpha is just a fraction involving known, plain numbers and once we have our alpha value, computing (1-alpha) is literally just "computing one minus alpha". Computing this d() function is thus simply a matter of "computing simple arithmetics but with recursion", which might be computationally expensive because we're doing "a lot of" steps, but is also computationally cheap because each step only involves very simple maths. Of course as before the recursion has to stop:
+
+\[
+  d^k_0(t) = 0, \ d^0_i(t) = N_{i,1}(t) =
+  \left\{\begin{matrix}
+    1& \text{if } t \in [knot_i,knot_{i+1}) \\
+    0& \text{otherwise}
+  \end{matrix}\right.
+\]
+
+So, we see two stopping conditions: either `i` becomes 0, in which case d() is zero, or `k` becomes zero, in which case we get the same "either 1 or 0" that we saw in the N() function above.
+
+Thanks to Cox and de Boor, we can compute points on a B-Spline pretty easily: we just need to compute a triangle of interconnected values. For instance, d() for i=3, k=3 yields the following triangle:
+
+\[
+  \begin{array}{ccccccc}
+  d^3_3 &→& d^2_3 &→& d^1_3 &→& d^0_3 (= 0 \text{ or } 1) \\
+  &+^{α^3_3 \times …}_{(1-{α^3_3}) \times …}&       &+^{α^2_3 \times …}_{(1-{α^2_3}) \times …}& &+^{α^1_3 \times …}_{(1-{α^1_3}) \times …}&\\
+  &↘&       &↘&       &↘& \\
+  & & d^2_2 &→& d^1_2 &→& d^0_2 (= 0 \text{ or } 1) \\
+  & &       &+^{α^2_2 \times …}_{(1-{α^2_2}) \times …}&  &+^{α^1_2 \times …}_{(1-{α^1_2}) \times …}&\\
+  & &       &↘&        &↘& \\
+  & &       & &  d^1_1 &→&  d^0_1 (= 0 \text{ or } 1) \\
+  & &       & &        &+^{α^1_1 \times …}_{(1-{α^1_1}) \times …}&\\
+  & &       & &        &↘& \\
+  & &       & &        & &  d^0_0 (= 0)
+  \end{array}
+\]
+
+That is, we compute d(3,3) as a mixture of d(2,3) and d(2,2): d(3,3) = a(3,3) x d(2,3) + (1-a(3,3)) x d(2,2)... and we simply keep expanding our triangle until we reach the terminating function parameters. Done deal!
+
+One thing we need to keep in mind is that we're working with a spline that is constrained by its control points, so even though the `d(..., k)` values are zero or one at the lowest level, they are really "zero or one, times their respective control point", so in the next section you'll see the algorithm for running through the computation in a way that starts with a copy of the control point vector and then works its way up to that single point: that's pretty essential!
+
+If we run this computation "down", starting at d(3,3), then without special code in place we would be computing quite a few terms multiple times at each step. On the other hand, we can also start with that last "column", we can generate the terminating d() values first, then compute the a() constants, perform our multiplications, generate the previous step's d() values, compute their a() constants, do the multiplications, etc. until we end up all the way back at the top. If we run our computation this way, we don't need any explicit caching, we can just "recycle" the list of numbers we start with and simply update them as we move up the triangle. So, let's implement that!
+
+## Cool, cool... but I don't know what to do with that information
+
+I know, this is pretty mathy, so let's have a look at what happens when we change parameters here. We can't change the maths for the interpolation functions, so that gives us only one way to control what happens here: the knot vector itself. As such, let's look at the graph that shows the interpolation functions for a cubic B-Spline with seven points with a uniform knot vector (so we see seven identical functions), representing how much each point (represented by one function each) influences the total curvature, given our knot values. And, because exploration is the key to discovery, let's make the knot vector a thing we can actually manipulate. Normally a proper knot vector has a constraint that any value is strictly equal to, or larger than the previous ones, but screw it this is programming, let's ignore that hard restriction and just mess with the knots however we like.
+
+<div className="two-column">
+  <KnotController ref="interpolation-graph" />
+  <BSplineGraphic sketch={this.interpolationGraph} controller={(owner, knots) => this.bindKnots(owner, knots, "interpolation-graph")}/>
+</div>
+
+Changing the values in the knot vector changes how much each point influences the total curvature (with some clever knot value manipulation, we can even make the influence of certain points disappear entirely!), so we can see that while the control points define the hull inside of which we're going to be drawing a curve, it is actually the knot vector that determines the actual *shape* of the curve inside that hull.
+
+After reading the rest of this section you may want to come back here to try some specific knot vectors, and see if the resulting interpolation landscape makes sense given what you will now think should happen!
+
+## Running the computation
+
+Unlike the de Casteljau algorithm, where the `t` value stays the same at every iteration, for B-Splines that is not the case, and so we end having to (for each point we evaluate) run a fairly involving bit of recursive computation. The algorithm is discussed on [this Michigan Tech](http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/de-Boor.html) page, but an easier to read version is implemented by [b-spline.js](https://github.com/thibauts/b-spline/blob/master/index.js#L59-L71), so we'll look at its code.
+
+Given an input value `t`, we first map the input to a value from the domain [0,1] to the domain [knots[degree], knots[knots.length - 1 - degree]. Then, we find the section number `s` that this mapped `t` value lies on:
+
+```
+for(s=domain[0]; s < domain[1]; s++) {
+  if(knots[s] <= t && t <= knots[s+1]) break;
+}
+```
+
+after running this code, `s` is the index for the section the point will lie on. We then run the algorithm mentioned on the MU page (updated to use this description's variable names):
+
+```
+let v = copy of control points
+
+for(let L = 1; L <= order; L++) {
+  for(let i=s; i > s + L - order; i--) {
+    let numerator = t - knots[i]
+    let denominator = knots[i - L + order] - knots[i]
+    let alpha = numerator / denominator
+    let v[i] = alpha * v[i] + (1-alpha) * v[i-1]
+  }
+}
+```
+
+(A nice bit of behaviour in this code is that we work the interpolation "backwards", starting at `i=s` at each level of the interpolation, and we stop when `i = s - order + level`, so we always end up with a value for `i` such that those `v[i-1]` don't try to use an array index that doesn't exist)
+
+## Open vs. closed paths
+
+Much like poly-Béziers, B-Splines can be either open, running from the first point to the last point, or closed, where the first and last point are *the same point*. However, because B-Splines are an interpolation of curves, not just point, we can't simply make the first and last point the same, we need to link a few point point: for an order `d` B-Spline, we need to make the last `d` point the same as the first `d` points. And the easiest way to do this is to simply append `points.splice(0,d)` to `points`. Done!
+
+Of course if we want to manipulate these kind of curves we need to make sure to mark them as "closed" so that we know the coordinate for `points[0]` and `points[n-k]` etc. are the same coordinate, and manipulating one will equally manipulate the other, but programming generally makes this really easy by storing references to coordinates (or other linked values such as coordinate weights, discussed in the NURBS section) rather than separate coordinate objects.
+
+## Manipulating the curve through the knot vector
+
+The most important thing to understand when it comes to B-Splines is that they work *because* of the concept of a knot vector. As mentioned above, knots represent "where individual control points start/stop influencing the curve", but we never looked at the *values* that go in the knot vector. If you look back at the N() and a() functions, you see that interpolations are based on intervals in the knot vector, rather than the actual values in the knot vector, and we can exploit this to do some pretty interesting things with clever manipulation of the knot vector. Specifically there are four things we can do that are worth looking at:
+
+1. we can use a uniform knot vector, with equally spaced intervals,
+2. we can use a non-uniform knot vector, without enforcing equally spaced intervals,
+3. we can collapse sequential knots to the same value, locally lowering curve complexity using "null" intervals, and
+4. we can form a special case non-uniform vector, by combining (1) and (3) to for a vector with collapsed start and end knots, with a uniform vector in between.
+
+### Uniform B-Splines
+
+The most straightforward type of B-Spline is the uniform spline. In a uniform spline, the knots are distributed uniformly over the entire curve interval. For instance, if we have a knot vector of length twelve, then a uniform knot vector would be [0,1,2,3,...,9,10,11]. Or [4,5,6,...,13,14,15], which defines *the same intervals*, or even [0,2,3,...,18,20,22], which also defines *the same intervals*, just scaled by a constant factor, which becomes normalised during interpolation and so does not contribute to the curvature.
+
+<div className="two-column">
+  <KnotController ref="uniform-spline" />
+  <BSplineGraphic sketch={this.uniformBSpline} controller={(owner, knots) => this.bindKnots(owner, knots, "uniform-spline")}/>
+</div>
+
+This is an important point: the intervals that the knot vector defines are *relative* intervals, so it doesn't matter if every interval is size 1, or size 100 - the relative differences between the intervals is what shapes any particular curve.
+
+The problem with uniform knot vectors is that, as we need `order` control points before we have any curve with which we can perform interpolation, the curve does not "start" at the first point, nor "ends" at the last point. Instead there are "gaps". We can get rid of these, by being clever about how we apply the following uniformity-breaking approach instead...
+
+### Reducing local curve complexity by collapsing intervals
+
+By collapsing knot intervals by making two or more consecutive knots have the same value, we can reduce the curve complexity in the sections that are affected by the knots involved. This can have drastic effects: for every interval collapse, the curve order goes down, and curve continuity goes down, to the point where collapsing `order` knots creates a situation where all continuity is lost and the curve "kinks".
+
+<div className="two-column">
+  <KnotController ref="center-cut-bspline" />
+  <BSplineGraphic sketch={this.centerCutBSpline} controller={(owner, knots) => this.bindKnots(owner, knots, "center-cut-bspline")}/>
+</div>
+
+### Open-Uniform B-Splines
+
+By combining knot interval collapsing at the start and end of the curve, with uniform knots in between, we can overcome the problem of the curve not starting and ending where we'd kind of like it to:
+
+For any curve of degree `D` with control points `N`, we can define a knot vector of length `N+D+1` in which the values `0 ... D+1` are the same, the values `D+1 ... N+1` follow the "uniform" pattern, and the values `N+1 ... N+D+1` are the same again. For example, a cubic B-Spline with 7 control points can have a knot vector [0,0,0,0,1,2,3,4,4,4,4], or it might have the "identical" knot vector [0,0,0,0,2,4,6,8,8,8,8], etc. Again, it is the relative differences that determine the curve shape.
+
+<div className="two-column">
+  <KnotController ref="open-uniform-bspline" />
+  <BSplineGraphic sketch={this.openUniformBSpline} controller={(owner, knots) => this.bindKnots(owner, knots, "open-uniform-bspline")}/>
+</div>
+
+### Non-uniform B-Splines
+
+This is essentially the "free form" version of a B-Spline, and also the least interesting to look at, as without any specific reason to pick specific knot intervals, there is nothing particularly interesting going on. There is one constraint to the knot vector, and that is that any value `knots[k+1]` should be equal to, or greater than `knots[k]`.
+
+## One last thing: Rational B-Splines
+
+While it is true that this section on B-Splines is running quite long already, there is one more thing we need to talk about, and that's "Rational" splines, where the rationality applies to the "ratio", or relative weights, of the control points themselves. By introducing a ratio vector with weights to apply to each control point, we greatly increase our influence over the final curve shape: the more weight a control point carries, the close to that point the spline curve will lie, a bit like turning up the gravity of a control point.
+
+<div className="two-column">
+  {
+    // <KnotController ref="rational-uniform-bspline" />
+  }
+  <WeightController ref="rational-uniform-bspline-weights" />
+  <BSplineGraphic scrolling={true} sketch={this.rationalUniformBSpline} controller={(owner, knots, weights, closed) => {
+    // this.bindKnots(owner, knots, "rational-uniform-bspline");
+    this.bindWeights(owner, weights, closed, "rational-uniform-bspline-weights");
+  }} />
+</div>
+
+Of course this brings us to the final topic that any text on B-Splines must touch on before calling it a day: the NURBS, or Non-Uniform Rational B-Spline (NURBS is not a plural, the capital S actually just stands for "spline", but a lot of people mistakenly treat it as if it is, so now you know better). NURBS are an important type of curve in computer-facilitated design, used a lot in 3D modelling (as NURBS surfaces) as well as in arbitrary-precision 2D design due to the level of control a NURBS curve offers designers.
+
+While a true non-uniform rational B-Spline would be hard to work with, when we talk about NURBS we typically mean the Open-Uniform Rational B-Spline, or OURBS, but that doesn't roll off the tongue nearly as nicely, and so remember that when people talk about NURBS, they typically mean open-uniform, which has the useful property of starting the curve at the first control point, and ending it at the last.
+
+## Extending our implementation to cover rational splines
+
+The algorithm for working with Rational B-Splines is virtually identical to the regular algorithm, and the extension to work in the control point weights is fairly simple: we extend each control point from a point in its original number of dimensions (2D, 3D, etc) to one dimension higher, scaling the original dimensions by the control point's weight, and then assigning that weight as its value for the extended dimension.
+
+For example, a 2D point `(x,y)` with weight `w` becomes a 3D point `(w * x, w * y, w)`.
+
+We then run the same algorithm as before, which will automatically perform weight interpolation in addition to regular coordinate interpolation, because all we've done is pretended we have coordinates in a higher dimension. The algorithm doesn't really care about how many dimensions it needs to interpolate.
+
+In order to recover our "real" curve point, we take the final result of the point generation algorithm, and "unweigh" it: we take the final point's derived weight `w'` and divide all the regular coordinate dimensions by it, then throw away the weight information.
+
+Based on our previous example, we take the final 3D point `(x', y', w')`, which we then turn back into a 2D point by computing `(x'/w', y'/w')`. And that's it, we're done!

chapters/bsplines/handler.js

@@ -0,0 +1,16 @@
+module.exports = {
+  basicSketch: require('./basic-sketch'),
+  interpolationGraph: require('./interpolation-graph'),
+  uniformBSpline: require('./uniform-bspline'),
+  centerCutBSpline: require('./center-cut-bspline'),
+  openUniformBSpline: require('./open-uniform-bspline'),
+  rationalUniformBSpline: require('./rational-uniform-bspline'),
+
+  bindKnots: function(owner, knots, ref) {
+    this.refs[ref].bindKnots(owner, knots);
+  },
+
+  bindWeights: function(owner, weights, closed, ref) {
+    this.refs[ref].bindWeights(owner, weights, closed);
+  }
+};

chapters/bsplines/index.js

@@ -0,0 +1,3 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+module.exports = generateBase("bsplines", handler);

chapters/bsplines/interpolation-graph.js

@@ -0,0 +1,113 @@
+var colors = [
+  '#C00',
+  '#CC0',
+  '#0C0',
+  '#0CC',
+  '#00C',
+  '#C0C',
+  '#600',
+  '#660',
+  '#060',
+  '#066',
+  '#006',
+  '#606'
+];
+
+module.exports = {
+  degree: 3,
+  activeDistance: 9,
+  cache: { N: [] },
+
+  setup() {
+    this.size(600, 300);
+    this.points = [
+      {x:0,   y:   0},
+      {x:100, y:-100},
+      {x:200, y: 100},
+      {x:300, y:-100},
+      {x:400, y: 100},
+      {x:500, y:   0}
+    ];
+    this.knots = this.formKnots(this.points);
+    if(this.props.controller) {
+      this.props.controller(this, this.knots);
+    }
+    this.draw();
+  },
+
+  draw() {
+    this.clear();
+    var pad = 25;
+    this.grid(pad);
+    this.stroke(0);
+    this.line(pad,0,pad,this.height);
+    var y = this.height - pad;
+    this.line(0,y,this.width,y);
+
+    var k = this.degree;
+    var n = this.points.length || 4;
+
+    for (let i=0; i<n+1+k; i++) {
+      this.drawN(i, k, pad, (this.width-pad)/(2*(n+2)), this.height-2*pad);
+    }
+  },
+
+  drawN(i, k, pad, w, h) {
+    this.stroke(colors[i]);
+    let knots = this.knots;
+    this.beginPath();
+    for (let start=i-1, t=start, step=0.1, end=i+k+1; t<end; t+=step) {
+      let x = pad + i*w + t*w;
+      let y = this.height - pad - this.N(i, k, t) * h;
+      this.vertex(x, y);
+    }
+    this.endPath();
+  },
+
+  N(i, k, t) {
+    let t_i   = this.knots[i];
+    let t_i1  = this.knots[i+1];
+    let t_ik1 = this.knots[i+k-1];
+    let t_ik  = this.knots[i+k];
+
+    if (k===1) {
+      return (t_i <= t && t <= t_i1) ? 1 : 0;
+    }
+
+    let n1 = t - t_i;
+    let d1 = t_ik1 - t_i;
+    let a1 = d1===0? 0: n1/d1;
+
+    let n2 = t_ik - t;
+    let d2 = t_ik - t_i1;
+    let a2 = d2===0? 0: n2/d2;
+
+    let N1 = 0;
+    if (a1 !== 0) {
+      let n1v = this.ensureN(i,k-1,t);
+      N1 = n1v === undefined ? this.N(i,k-1,t) : n1v;
+    }
+
+    let N2 = 0;
+    if (a2 !== 0) {
+      let n2v = this.ensureN(i+1,k-1,t);
+      N2 = n2v === undefined ? this.N(i+1,k-1,t) : n2v;
+    }
+
+    this.cacheN(i,k,t, a1 * N1 + a2 * N2);
+    return this.cache.N[i][k][t];
+  },
+
+  ensureN(i,k,t) {
+    if (!this.cache.N) { this.cache.N = []; }
+    let N = this.cache.N;
+    if (!N[i]) { N[i] = []; }
+    if (!N[i][k]) { N[i][k] = []; }
+    return N[i][k][t];
+  },
+
+  cacheN(i,k,t,value) {
+    this.ensureN(i,k,t);
+    this.cache.N[i][k][t] = value;
+  }
+};

chapters/bsplines/open-uniform-bspline.js

@@ -0,0 +1,45 @@
+module.exports = {
+  degree: 3,
+  activeDistance: 9,
+
+  setup() {
+    this.size(400, 400);
+
+    var TAU = Math.PI*2;
+    for (let i=0; i<TAU; i+=TAU/10) {
+      this.points.push({
+        x: this.width/2 + 100 * Math.cos(i),
+        y: this.height/2 + 100 * Math.sin(i)
+      });
+    }
+
+    this.knots = this.formKnots(this.points, true);
+
+    if(this.props.controller) {
+      this.props.controller(this, this.knots);
+    }
+
+    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);
+  }
+};

chapters/bsplines/rational-non-uniform-bspline.js

@@ -0,0 +1,42 @@
+module.exports = {
+  degree: 3,
+  activeDistance: 9,
+  weights: [],
+
+  setup() {
+    this.size(400, 400);
+
+    var TAU = Math.PI*2;
+    for (let i=0; i<TAU; i+=TAU/10) {
+      this.points.push({
+        x: this.width/2 + 100 * Math.cos(i),
+        y: this.height/2 + 100 * Math.sin(i)
+      });
+    }
+
+    this.knots = this.formKnots(this.points, true);
+    this.weights = this.formWeights(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);
+  }
+};

chapters/bsplines/rational-uniform-bspline.js

@@ -0,0 +1,50 @@
+module.exports = {
+  degree: 3,
+  activeDistance: 9,
+  weights: [],
+
+  setup() {
+    this.size(400, 400);
+
+    var TAU = Math.PI*2;
+    var r = this.width/3;
+    for (let i=0; i<6; i++) {
+      this.points.push({
+        x: this.width/2 + r * Math.cos(i/6 * TAU),
+        y: this.height/2 + r * Math.sin(i/6 * TAU)
+      });
+    }
+    this.points = this.points.concat(this.points.slice(0,3));
+    this.closed = this.degree;
+
+    this.knots = this.formKnots(this.points);
+    this.weights = this.formWeights(this.points);
+
+    if(this.props.controller) {
+      this.props.controller(this, this.knots, this.weights, this.closed);
+    }
+
+    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);
+  }
+};

chapters/bsplines/uniform-bspline.js

@@ -0,0 +1,43 @@
+module.exports = {
+  degree: 3,
+  activeDistance: 9,
+
+  setup() {
+    this.size(400, 400);
+
+    var TAU = Math.PI*2;
+    for (let i=0; i<TAU; i+=TAU/10) {
+      this.points.push({
+        x: this.width/2 + 100 * Math.cos(i),
+        y: this.height/2 + 100 * Math.sin(i)
+      });
+    }
+
+    this.knots = this.formKnots(this.points);
+    if(this.props.controller) {
+      this.props.controller(this, this.knots);
+    }
+    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);
+  }
+};

chapters/canonical/content.en-GB.md

@@ -0,0 +1,283 @@
+# Canonical form (for cubic curves)
+
+While quadratic curves are relatively simple curves to analyze, the same cannot be said of the cubic curve. As a curvature is controlled by more than one control point, it exhibits all kinds of features like loops, cusps, odd colinear features, and as many as two inflection points because the curvature can change direction up to three times. Now, knowing what kind of curve we're dealing with means that some algorithms can be run more efficiently than if we have to implement them as generic solvers, so is there a way to determine the curve type without lots of work?
+
+As it so happens, the answer is yes, and the solution we're going to look at was presented by Maureen C. Stone from Xerox PARC and Tony D. deRose from the University of Washington in their joint paper ["A Geometric Characterization of Parametric Cubic curves"](http://graphics.pixar.com/people/derose/publications/CubicClassification/paper.pdf). It was published in 1989, and defines curves as having a "canonical" form (i.e. a form that all curves can be reduced to) from which we can immediately tell what features a curve will have. So how does it work?
+
+The first observation that makes things work is that if we have a cubic curve with four points, we can apply a linear transformation to these points such that three of the points end up on (0,0), (0,1) and (1,1), with the last point then being "somewhere". After applying that transformation, the location of that last point can then tell us what kind of curve we're dealing with. Specifically, we see the following breakdown:
+
+<Graphic static={true} title="The canonical curve map" setup={this.setup} draw={this.drawBase} />
+
+This is a fairly funky image, so let's see how it breaks down. We see the three fixed points at (0,0), (0,1) and (1,1), and then the fourth point is somewhere. Depending on where it is, our curve will have certain features. Namely, if the fourth point is...
+
+1. anywhere on and in the red zone, the curve will either be self-intersecting (yielding a loop), or it will have a sharp discontinuity (yielding a cusp). Anywhere inside the red zone, this will be a loop. We won't know *where* that loop is (in terms of *t* values), but we are guaranteed that there is one.
+2. on the left (red) edge, the curve will have a cusp. We again don't know <em>where</em>, just that it
+has one. This edge is described by the function:
+
+  \[
+    y = \frac{-x^2 + 2x + 3}{4}, \{ x \leq 1 \}
+  \]
+
+3. on the lower right (pink) edge, the curve will have a loop at t=1, so we know the end coordinate of
+the curve also lies <em>on</em> the curve. This edge is described by the function:
+
+  \[
+    y = \frac{\sqrt{3(4x - x^2)} - x}{2}, \{ 0 \leq x \leq 1 \}
+  \]
+
+4. on the top (blue) edge, the curve will have a loop at t=0, so we know the start coordinate of
+the curve also lies <em>on</em> the curve. This edge is described by the function:
+
+  \[
+    y = \frac{-x^2 + 3x}{3}, \{ x \leq 0 \}
+  \]
+
+5. inside the green zone, the curve will have a single inflection, switching concave/convex once.
+6. between the red and green zones, the curve has two inflections, meaning its curvature switches between
+concave/convex form twice.
+7. anywhere on the right of the red zone, the curve will have no inflections. It'll just be a well-behaved arch.
+
+Of course, this map is fairly small, but the regions extend to infinity, with well defined boundaries.
+
+<div className="note">
+
+### Wait, where do those lines come from?
+
+Without repeating the paper mentioned at the top of this section, the loop-boundaries come from rewriting the curve into canonical form, and then solving the formulae for which constraints must hold for which possible curve properties. In the paper these functions yield formulae for where you will find cusp points, or loops where we know t=0 or t=1, but those functions are derived for the full cubic expression, meaning they apply to t=-∞ to t=∞... For Bézier curves we only care about the "clipped interval" t=0 to t=1, so some of the properties that apply when you look at the curve over an infinite interval simply don't apply to the Bézier curve interval.
+
+The right bound for the loop region, indicating where the curve switches from "having inflections" to "having a loop", for the general cubic curve, is actually mirrored over x=1, but for Bézier curves this right half doesn't apply, so we don't need to pay attention to it. Similarly, the boundaries for t=0 and t=1 loops are also nice clean curves but get "cut off" when we only look at what the general curve does over the interval t=0 to t=1.
+
+For the full details, head over to the paper and read through sections 3 and 4. If you still remember your high school precalculus, you can probably follow along with this paper, although you might have to read it a few times before all the bits "click".
+
+</div>
+
+So now the question becomes: how do we manipulate our curve so that it fits this canonical form, with three fixed points, and one "free" point? Enter linear algebra. Don't worry, I'll be doing all the math for you, as well as show you what the effect is on our curves, but basically we're going to be using linear algebra, rather than calculus, because "it's way easier". Sometimes a calculus approach is very hard to work with, when the equivalent geometrical solution is super obvious.
+
+The approach is going to start with a curve that doesn't have all-colinear points (so we need to make sure the points don't all fall on a straight line), and then applying four graphics operations that you will probably have heard of: translation (moving all points by some fixed x- and y-distance), scaling (multiplying all points by some x and y scale factor), and shearing (an operation that turns rectangles into parallelograms).
+
+Step 1: we translate any curve by -p1.x and -p1.y, so that the curve starts at (0,0). We're going to make use of an interesting trick here, by pretending our 2D coordinates are 3D, with the *z* coordinate simply always being 1. This is an old trick in graphics to overcome the limitations of 2D transformations: without it, we can only turn (x,y) coordinates into new coordinates of the form (ax + by, cx + dy), which means we can't do translation, since that requires we end up with some kind of (x + a, y + b). If we add a bogus *z* coordinate that is always 1, then we can suddenly add arbitrary values. For example:
+
+\[
+\left [ \begin{array}{ccc}
+    01 & 0 & a \\
+    0 & 1 & b \\
+    0 & 0 & 1
+  \end{array} \right ]
+\cdot
+\left [
+  \begin{matrix}
+    x \\
+    y \\
+    z=1
+  \end{matrix}
+\right ]
+=
+\left [
+  \begin{matrix}
+    1 \cdot x + 0 \cdot y + a \cdot z \\
+    0 \cdot x + 1 \cdot y + b \cdot z \\
+    0 \cdot x + 0 \cdot y + 1 \cdot z
+  \end{matrix}
+\right ]
+=
+\left [
+  \begin{matrix}
+    x + a \cdot 1 \\
+    y + b \cdot 1 \\
+    1 \cdot z
+  \end{matrix}
+\right ]
+=
+\left [
+  \begin{matrix}
+    x + a \\
+    y + b \\
+    z=1
+  \end{matrix}
+\right ]
+\]
+
+Sweet! *z* stays 1, so we can effectively ignore it entirely, but we added some plain values to our x and y coordinates. So, if we want to subtract p1.x and p1.y, we use:
+
+\[
+T_1 =
+\left [ \begin{array}{ccc}
+    01 & 0 & -{P_1}_x \\
+    0 & 1 & -{P_1}_y \\
+    0 & 0 & 1
+  \end{array} \right ]
+\cdot
+\left [
+  \begin{matrix}
+    x \\
+    y \\
+    1
+  \end{matrix}
+\right ]
+=
+\left [
+  \begin{matrix}
+    1 \cdot x + 0 \cdot y - {P_1}_x \cdot 1 \\
+    0 \cdot x + 1 \cdot y - {P_1}_y \cdot 1 \\
+    0 \cdot x + 0 \cdot y + 1 \cdot 1
+  \end{matrix}
+\right ]
+=
+\left [
+  \begin{matrix}
+    x - {P_1}_x \\
+    y - {P_1}_y \\
+    1
+  \end{matrix}
+\right ]
+\]
+
+Running all our coordinates through this transformation gives a new set of coordinates, let's call those **U**, where the first coordinate lies on (0,0), and the rest is still somewhat free. Our next job is to make sure point 2 ends up lying on the *x=0* line, so what we want is a transformation matrix that, when we run it, subtracts *x* from whatever *x* we currently have. This is called [shearing](https://en.wikipedia.org/wiki/Shear_matrix), and the typical x-shear matrix and its transformation looks like this:
+
+\[
+\left [
+  \begin{matrix}
+    1 & S & 0 \\
+    0 & 1 & 0 \\
+    0 & 0 & 1
+  \end{matrix}
+\right ]
+\cdot
+\left [
+  \begin{matrix}
+    x \\
+    y \\
+    1
+  \end{matrix}
+\right ]
+=
+\left [
+  \begin{matrix}
+    x + S \cdot y \\
+    y \\
+    1
+  \end{matrix}
+\right ]
+\]
+
+So we want some shearing value that, when multiplied by *y*, yields *-x*, so our x coordinate becomes zero. That value is simply *-x/y*, because *-x/y * y = -x*. Done:
+
+\[
+T_2 =
+\left [
+  \begin{matrix}
+    1 & -\frac{ {U_2}_x }{ {U_2}_y } & 0 \\
+    0 & 1 & 0 \\
+    0 & 0 & 1
+  \end{matrix}
+\right ]
+\]
+
+Now, running this on all our points generates a new set of coordinates, let's call those **V**, which now have point 1 on (0,0) and point 2 on (0, some-value), and we wanted it at (0,1), so we need to [do some scaling](https://en.wikipedia.org/wiki/Scaling_%28geometry%29) to make sure it ends up at (0,1). Additionally, we want point 3 to end up on (1,1), so we can also scale x to make sure its x-coordinate will be 1 after we run the transform. That means we'll be x-scaling by 1/point3<sub>x</sub>, and y-scaling by point2<sub>y</sub>. This is really easy:
+
+\[
+T_3 =
+\left [
+  \begin{matrix}
+    \frac{1}{ {V_3}_x } & 0 & 0 \\
+    0 & \frac{1}{ {V_2}_y } & 0 \\
+    0 & 0 & 1
+  \end{matrix}
+\right ]
+\]
+
+Then, finally, this generates a new set of coordinates, let's call those W, of which point 1 lies on (0,0), point 2 lies on (0,1), and point three lies on (1, ...) so all that's left is to make sure point 3 ends up at (1,1) - but we can't scale! Point 2 is already in the right place, and y-scaling would move it out of (0,1) again, so our only option is to y-shear point three, just like how we x-sheared point 2 earlier. In this case, we do the same trick, but with `y/x` rather than `x/y` because we're not x-shearing but y-shearing. Additionally, we don't actually want to end up at zero (which is what we did before) so we need to shear towards an offset, in this case 1:
+
+\[
+T_4 =
+\left [
+  \begin{matrix}
+    1 & 0 & 0 \\
+    \frac{1 - {W_3}_y}{ {W_3}_x } & 1 & 0 \\
+    0 & 0 & 1
+  \end{matrix}
+\right ]
+\]
+
+And this generates our final set of four coordinates. Of these, we already know that points 1 through 3 are (0,0), (0,1) and (1,1), and only the last coordinate is "free". In fact, given any four starting coordinates, the resulting "transformation mapped" coordinate will be:
+
+\[
+mapped_4 = \left (
+  \begin{matrix}
+   x =  \left (
+    \frac
+    {
+      -x_1 + x_4 - \frac{(-x_1+x_2)(-y_1+y_4)}{-y_1+y_2}
+    }
+    {
+      -x_1+x_3-\frac{(-x_1+x_2)(-y_1+y_3)}{-y_1+y_2}
+    }
+    \right )
+\\
+   y = \left (
+    \frac{(-y_1+y_4)}{-y_1+y_2}
+    +
+    \frac
+    {
+      \left ( 1 - \frac{-y_1+y_3}{-y_1+y_2} \right )
+      \left ( -x_1 + x_4 - \frac{(-x_1+x_2)(-y_1+y_4)}{-y_1+y_2} \right )
+    }
+    {
+      -x_1+x_3-\frac{(-x_1+x_2)(-y_1+y_3)}{-y_1+y_2}
+    }
+    \right )
+  \end{matrix}
+\right )
+\]
+
+That looks very complex, but notice that every coordinate value is being offset by the initial translation, and a lot of terms in there repeat: it's pretty easy to calculate this fast, since there's so much we can cache and reuse while we compute this mapped coordinate!
+
+First, let's just do that translation step as a "preprocessing" operation so we don't have to subtract the values all the time. What does that leave?
+
+\[
+... = \left (
+  \begin{matrix}
+   x = \left (  x_4 - \frac{x_2 \cdot y_4}{y_2} \middle/ x_3-\frac{x_2 \cdot y_3}{y_2} \right )
+\\
+   y =
+    \frac{y_4}{y_2}
+    +
+    \left ( 1 - \frac{y_3}{y_2} \right )
+    \cdot
+    \left (  x_4 - \frac{x_2 \cdot y_4}{y_2} \middle/ x_3-\frac{x_2 \cdot y_3}{y_2} \right )
+  \end{matrix}
+\right )
+\]
+
+Suddenly things look a lot simpler: the mapped x is fairly straight forward to compute, and we see that the mapped y actually contains the mapped x in its entirety, so we'll have that part already available when we need to evaluate it. In fact, let's pull out all those common factors to see just how simple this is:
+
+\[
+... = \left (
+  \begin{matrix}
+   x = (x_4 - x_2 \cdot f_{42}) / ( x_3- x_2 \cdot f_{32} )
+\\
+   y =
+    f_{42}
+    +
+    \left ( 1 - f_{32} \right )
+    \cdot
+    x
+  \end{matrix}
+\right ), f_{32} = \frac{y_3}{y_2}, f_{42} = \frac{y_4}{y_2}
+\]
+
+That's kind of super-simple to write out in code, I think you'll agree. Coding math tends to be easier than the formulae initially make it look!
+
+<div className="note">
+
+### How do you track all that?
+
+Doing maths can be a pain, so whenever possible, I like to make computers do the work for me. Especially for things like this, I simply use [Mathematica](http://www.wolfram.com/mathematica). Tracking all this math by hand is insane, and we invented computers, literally, to do this for us. I have no reason to use pen and paper when I can write out what I want to do in a program, and have the program do the math for me. And real math, too, with symbols, not with numbers. In fact, [here's](http://pomax.github.io/gh-weblog-2/downloads/canonical-curve.nb) the Mathematica notebook if you want to see how this works for yourself.
+
+Now, I know, you're thinking "but Mathematica is super expensive!" and that's true, it's [$295 for home use](http://www.wolfram.com/mathematica-home-edition), but it's **also** [free when you buy a $35 raspberry pi](http://www.wolfram.com/raspberry-pi). Obviously, I bought a raspberry pi, and I encourage you to do the same. With that, as long as you know what you want to *do*, Mathematica can just do it for you. And we don't have to be geniuses to work out what the maths looks like. That's what we have computers for.
+
+</div>
+
+So, let's write up a sketch that'll show us the canonical form for any curve drawn in blue, overlaid on our canonical map, so that we can immediately tell which features our curve must have, based on where the fourth coordinate is located on the map:
+
+<Graphic title="A cubic curve mapped to canonical form" setup={this.setup} draw={this.draw} />

chapters/canonical/handler.js

@@ -0,0 +1,159 @@
+module.exports = {
+  setup: function(api) {
+    var curve = api.getDefaultCubic();
+    api.setCurve(curve);
+    api.reset();
+    api._map_loaded = false;
+  },
+
+  draw: function(api, curve) {
+    var w = 400,
+        h = w,
+        unit = this.unit,
+        center = {x:w/2, y:h/2};
+
+    api.setSize(w,h);
+    api.setPanelCount(2);
+    api.reset();
+
+    api.drawSkeleton(curve);
+    api.drawCurve(curve);
+
+    api.offset.x += 400;
+
+    if (api._map_loaded) { api.image(api._map_image); }
+    else { setTimeout((
+      function() {
+        this.drawBase(api, curve);
+        this.draw(api, curve);
+      }
+    ).bind(this), 100); }
+
+    api.drawLine({x:0,y:0}, {x:0, y:h});
+
+    var npts = [
+      {x:0, y: 0},
+      {x:0, y: unit},
+      {x:unit, y: unit},
+      this.forwardTransform(curve.points, unit)
+    ];
+
+    var canonical = new api.Bezier(npts);
+    api.setColor("blue");
+    api.drawCurve(canonical, center);
+    api.drawCircle(npts[3], 3, center);
+  },
+
+  forwardTransform: function(pts, s) {
+    s = s || 1;
+    var p1 = pts[0], p2 = pts[1], p3 = pts[2], p4 = pts[3];
+
+    var xn = -p1.x + p4.x - (-p1.x+p2.x)*(-p1.y+p4.y)/(-p1.y+p2.y);
+    var xd = -p1.x + p3.x - (-p1.x+p2.x)*(-p1.y+p3.y)/(-p1.y+p2.y);
+    var np4x = s*xn/xd;
+
+    var yt1 = s*(-p1.y+p4.y) / (-p1.y+p2.y);
+    var yt2 = s - (s*(-p1.y+p3.y)/(-p1.y+p2.y));
+    var yp = yt2 * xn / xd;
+    var np4y = yt1 + yp;
+
+    return {x:np4x, y:np4y};
+  },
+
+  drawBase: function(api, curve) {
+    api.reset();
+
+    var w = 400,
+        h = w,
+        unit = this.unit = w/5,
+        center = {x:w/2, y:h/2};
+
+    api.setSize(w,h);
+
+    // axes + gridlines
+    api.setColor("lightgrey");
+    for(var x=0; x<w; x+= unit/2) { api.drawLine({x:x, y:0}, {x:x, y:h}); }
+    for(var y=0; y<h; y+= unit/2) { api.drawLine({x:0, y:y}, {x:w, y:y}); }
+    api.setColor("black");
+    api.drawLine({x:w/2,y:0}, {x:w/2, y:h});
+    api.drawLine({x:0,y:h/2}, {x:w, y:h/2});
+
+    // Inflection border:
+    api.setColor("green");
+    api.drawLine({x:-w/2,y:unit}, {x:w/2,y:unit}, center);
+
+    // the three stable points
+    api.setColor("black");
+    api.setFill("black");
+    api.drawCircle({x:0, y:0}, 4, center);
+    api.text("(0,0)", {x: 5+center.x, y:15+center.y});
+    api.drawCircle({x:0, y:unit}, 4, center);
+    api.text("(0,1)", {x: 5+center.x, y:unit+15+center.y});
+    api.drawCircle({x:unit, y:unit}, 4, center);
+    api.text("(1,1)", {x: unit+5+center.x, y:unit+15+center.y});
+
+    // cusp parabola:
+    api.setWeight(1.5);
+    api.setColor("#FF0000");
+    api.setFill(api.getColor());
+    var pts = [];
+    var px = 1, py = 1;
+    for (x=-10; x<=1; x+=0.01) {
+      y = (-x*x + 2*x + 3)/4;
+      if (x>-10) {
+        pts.push({x:unit*px, y:unit*py});
+        api.drawLine({x:unit*px, y:unit*py}, {x:unit*x, y:unit*y}, center);
+      }
+      px = x;
+      py = y;
+    }
+    pts.push({x:unit*px, y:unit*py});
+    api.text("Curve form has cusp →", {x:w/2-unit*2, y: h/2+unit/2.5});
+
+    // loop/arch transition boundary, elliptical section
+    api.setColor("#FF00FF");
+    api.setFill(api.getColor());
+    var sqrt = Math.sqrt;
+    for (x=1; x>=0; x-=0.005) {
+      pts.push({x:unit*px, y:unit*py});
+      y = 0.5 * (sqrt(3) * sqrt(4*x - x*x) - x);
+      api.drawLine({x:unit*px, y:unit*py}, {x:unit*x, y:unit*y}, center);
+      px = x;
+      py = y;
+    }
+    pts.push({x:unit*px, y:unit*py});
+    api.text("← Curve forms a loop at t = 1", {x:w/2+unit/4, y: h/2+unit/1.5});
+
+
+    // loop/arch transition boundary, parabolic section
+    api.setColor("#3300FF");
+    api.setFill(api.getColor());
+    for (x=0; x>-w; x-=0.01) {
+      pts.push({x:unit*px, y:unit*py});
+      y = (-x*x + 3*x)/3;
+      api.drawLine({x:unit*px, y:unit*py}, {x:unit*x, y:unit*y}, center);
+      px = x;
+      py = y;
+    }
+    pts.push({x:unit*px, y:unit*py});
+    api.text("← Curve forms a loop at t = 0", {x:w/2-unit+10, y: h/2-unit*1.25});
+
+    // shape fill
+    api.setColor("transparent");
+    api.setFill("rgba(255,120,100,0.2)");
+    api.drawPath(pts, center);
+    pts = [{x:-w/2,y:unit}, {x:w/2,y:unit}, {x:w/2,y:h}, {x:-w/2,y:h}];
+    api.setFill("rgba(0,200,0,0.2)");
+    api.drawPath(pts, center);
+
+    // further labels
+    api.setColor("black");
+    api.setFill(api.getColor());
+    api.text("← Curve form has one inflection →", {x:w/2 - unit, y: h/2 + unit*1.75});
+    api.text("← Plain curve ↕", {x:w/2 + unit/2, y: h/6});
+    api.text("↕ Double inflection", {x:10, y: h/2 - 10});
+
+    api._map_image = api.toImage();
+    api._map_loaded = true;
+  }
+};

chapters/canonical/index.js

@@ -0,0 +1,3 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+module.exports = generateBase("canonical", handler);

chapters/catmullconv/content.en-GB.md

@@ -0,0 +1,565 @@
+# Bézier curves and Catmull-Rom curves
+
+Taking an excursion to different splines, the other common design curve is the [Catmull-Rom spline](https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Catmull.E2.80.93Rom_spline). Now, a Catmull-Rom spline is a form of [cubic Hermite spline](https://en.wikipedia.org/wiki/Cubic_Hermite_spline), and as it so happens the cubic Bézier curve is _also_ a cubic Hermite spline, so maybe... maybe we can convert one into the other, and back, with some simple substitutions?
+
+Unlike Bézier curves, Catmull-Rom splines pass through each point used to define the curve, except the first and last, which makes sense if you read the "natural language" description for how a Catmull-Rom spline works: a Catmull-Rom spline is a curve that, at each point  P<sub>x</sub>, has a tangent along the line P<sub>x-1</sub> to P<sub>x+1</sub>. The curve runs from points P<sub>2</sub> to P<sub>n-1</sub>, and has a "tension" that determines how fast the curve passes through each point. The lower the tension, the faster the curve  goes through each point, and the bigger its local tangent is.
+
+I'll be showing the conversion to and from Catmull-Rom curves for the tension that the Processing language uses for its Catmull-Rom algorithm.
+
+We start with showing the Catmull-Rom matrix form, which looks similar to the Bézier matrix form, with slightly different values in the matrix:
+
+\[
+  CatmullRom(t) =
+  \begin{bmatrix}
+  1 & t & t^2 & t^3
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+   1 &  0 &  0 &  0 \\
+   0 &  0 &  1 &  0 \\
+  -3 &  3 & -2 & -1 \\
+   2 & -2 &  1 &  1
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  V_1 \\ V_2 \\ V'_1 \\ V'_2
+  \end{bmatrix}
+\]
+
+However, there's something funny going on here: the coordinate column matrix looks weird. The reason is that Catmull-Rom curves are actually curve segments that are described by two coordinate points, and two tangents; the curve starts at coordinate V1, and ends at coordinate V2, with the curve "departing" V1 with a tangent vector V'1 and "arriving" at V2 with tangent vector V'2.
+
+This is not particularly useful if we want to draw Catmull-Rom curves in the same way we draw Bézier curves, i.e. by providing four points. However, we can fairly easily go from the former to the latter, but it's going to require some linear algebra, so if you just want to know how to convert between the two coordinate systems: skip the following bit.
+
+But... if you want to know <em>why</em> that conversion works, let's do some maths!
+
+<div className="note">
+
+## Deriving the conversion formulae
+
+In order to convert between Catmull-Rom curves and Bézier curves, we need to know two things. Firstly, how to express the Catmull-Rom curve using a "set of four coordinates", rather than a mix of coordinates and tangents, and secondly, how to convert those Catmull-Rom coordinates to and from Bézier form.
+
+So, let's start with the first, where we want to satisfy the following equality:
+
+\[
+  \begin{bmatrix}
+  V_1 \\ V_2 \\ V'_1 \\ V'_2
+  \end{bmatrix}
+  =
+  T
+  \cdot
+  \begin{bmatrix}
+  P_1 \\ P_2 \\ P_3 \\ P_4
+  \end{bmatrix}
+  =
+  \begin{bmatrix}
+  P_2 \\ P_3 \\ \frac{P_3 - P_1}{2} \\ \frac{P_4 - P_2}{2}
+  \end{bmatrix}
+\]
+
+This mapping says that in order to map a Catmull-Rom "point + tangent" vector to something based on an "all coordinates" vector, we need to determine the mapping matrix such that applying <em>T</em> yields P2 as start point, P3 as end point, and two tangents based on the lines between P1 and P3, and P2 nd P4, respectively.
+
+Computing <em>T</em> is really more "arranging the numbers":
+
+\[
+  T
+  \cdot
+  \begin{bmatrix}
+  P_1 \\ P_2 \\ P_3 \\ P_4
+  \end{bmatrix}
+  =
+  \begin{bmatrix}
+  P_2 \\ P_3 \\ \frac{P_3 - P_1}{2} \\ \frac{P_4 - P_2}{2}
+  \end{bmatrix}
+  =
+  \begin{bmatrix}
+   0 \cdot P1 &+ 1 \cdot P2 &+ 0 \cdot P3 &+ 0 \cdot P4 \\
+   0 \cdot P1 &+ 0 \cdot P2 &+ 1 \cdot P3 &+ 0 \cdot P4 \\
+  \frac{-1}{2} \cdot P1 &+ 0 \cdot P2 &+ \frac{1}{2} \cdot P3 &+ 0 \cdot P4 \\
+   0 \cdot P1 & \frac{-1}{2} \cdot P2 &+ 0 \cdot P3 &+ \frac{1}{2} \cdot P4
+  \end{bmatrix}
+  = 
+  \begin{bmatrix}
+   0 &  1 & 0 & 0 \\
+   0 &  0 & 1 & 0 \\
+  \frac{-1}{2} &  0 & \frac{1}{2} & 0 \\
+   0 & \frac{-1}{2} & 0 & \frac{1}{2}
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  P_1 \\ P_2 \\ P_3 \\ P_4
+  \end{bmatrix}
+\]
+
+Thus:
+
+\[
+  T
+  = 
+  \begin{bmatrix}
+   0 &  1 & 0 & 0 \\
+   0 &  0 & 1 & 0 \\
+  \frac{-1}{2} &  0 & \frac{1}{2} & 0 \\
+   0 & \frac{-1}{2} & 0 & \frac{1}{2}
+  \end{bmatrix}
+\]
+
+However, we're not <em>quite</em> done, because Catmull-Rom curves have a parameter called "tension", written as τ ("tau"), which is a scaling factor for the tangent vectors: the bigger the tension, the smaller the tangents, and the smaller the tension, the bigger the tangents. As such, the tension factor goes in the denominator for the tangents, and before we continue, let's add that tension factor into both our coordinate vector representation, and mapping matrix <em>T</em>:
+
+\[
+  \begin{bmatrix}
+  V_1 \\ V_2 \\ V'_1 \\ V'_2
+  \end{bmatrix}
+  =
+  \begin{bmatrix}
+  P_2 \\ P_3 \\ \frac{P_3 - P_1}{2τ} \\ \frac{P_4 - P_2}{2τ}
+  \end{bmatrix}
+  ,\ 
+  T
+  =
+  \begin{bmatrix}
+   0 &  1 & 0 & 0 \\
+   0 &  0 & 1 & 0 \\
+  \frac{-1}{2τ} &  0 & \frac{1}{2τ} & 0 \\
+   0 & \frac{-1}{2τ} & 0 & \frac{1}{2τ}
+  \end{bmatrix}
+\]
+
+With the mapping matrix properly done, let's rewrite the "point + tangent" Catmull-Rom matrix form to a matrix form in terms of four coordinates, and see what we end up with:
+
+\[
+  CatmullRom(t)
+  =
+  \begin{bmatrix}
+  1 & t & t^2 & t^3
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+   1 &  0 &  0 &  0 \\
+   0 &  0 &  1 &  0 \\
+  -3 &  3 & -2 & -1 \\
+   2 & -2 &  1 &  1
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  V_1 \\ V_2 \\ V'_1 \\ V'_2
+  \end{bmatrix}
+\]
+
+Replace point/tangent vector with the expression for all-coordinates:
+
+\[
+  CatmullRom(t)
+  =
+  \begin{bmatrix}
+  1 & t & t^2 & t^3
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+   1 &  0 &  0 &  0 \\
+   0 &  0 &  1 &  0 \\
+  -3 &  3 & -2 & -1 \\
+   2 & -2 &  1 &  1
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+   0 &  1 & 0 & 0 \\
+   0 &  0 & 1 & 0 \\
+  \frac{-1}{2τ} &  0 & \frac{1}{2τ} & 0 \\
+   0 & \frac{-1}{2τ} & 0 & \frac{1}{2τ}
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  P_1 \\ P_2 \\ P_3 \\ P_4
+  \end{bmatrix}
+\]
+
+and merge the matrices:
+
+\[
+  CatmullRom(t)
+  =
+  \begin{bmatrix}
+  1 & t & t^2 & t^3
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+    0 &    1 &       0 &  0 \\
+   \frac{-1}{2τ} &    0 &  \frac{1}{2τ} &  0 \\
+   \frac{1}{τ} &  \frac{1}{2t} - 3 & 3 - \frac{1}{t} & \frac{-1}{2t} \\
+   \frac{-1}{2t} &  2 - \frac{1}{2τ} & \frac{1}{2τ} - 2 &  \frac{1}{2t}
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  P_1 \\ P_2 \\ P_3 \\ P_4
+  \end{bmatrix}
+\]
+
+This looks a lot like the Bézier matrix form, which as we saw in the chapter on Bézier curves, should look like this:
+
+\[
+  Bézier(t)
+  =
+  \begin{bmatrix}
+  1 & t & t^2 & t^3
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  1 &  0 &  0 & 0 \\
+  -3 &  3 &  0 & 0 \\
+  3 & -6 &  3 & 0 \\
+  -1 &  3 & -3 & 1
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  P_1 \\ P_2 \\ P_3 \\ P_4
+  \end{bmatrix}
+\]
+
+So, if we want to express a Catmull-Rom curve using a Bézier curve, we'll need to turn this Catmull-Rom bit:
+
+\[
+  \begin{bmatrix}
+    0 &    1 &       0 &  0 \\
+   \frac{-1}{2τ} &    0 &  \frac{1}{2τ} &  0 \\
+   \frac{1}{τ} &  \frac{1}{2t} - 3 & 3 - \frac{1}{t} & \frac{-1}{2t} \\
+   \frac{-1}{2t} &  2 - \frac{1}{2τ} & \frac{1}{2τ} - 2 &  \frac{1}{2t}
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  P_1 \\ P_2 \\ P_3 \\ P_4
+  \end{bmatrix}
+\]
+
+Into something that looks like this:
+
+\[
+  \begin{bmatrix}
+  1 &  0 &  0 & 0 \\
+  -3 &  3 &  0 & 0 \\
+  3 & -6 &  3 & 0 \\
+  -1 &  3 & -3 & 1
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  P_1 \\ P_2 \\ P_3 \\ P_4
+  \end{bmatrix}
+\]
+
+And the way we do that is with a fairly straight forward bit of matrix rewriting. We start with the equality we need to ensure:
+
+\[
+  \begin{bmatrix}
+    0 &    1 &       0 &  0 \\
+  \frac{-1}{2τ} &    0 &  \frac{1}{2τ} &  0 \\
+  \frac{1}{τ} &  \frac{1}{2t} - 3 & 3 - \frac{1}{t} & \frac{-1}{2t} \\
+  \frac{-1}{2t} &  2 - \frac{1}{2τ} & \frac{1}{2τ} - 2 &  \frac{1}{2t}
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  P_1 \\ P_2 \\ P_3 \\ P_4
+  \end{bmatrix}
+  =
+  \begin{bmatrix}
+  1 &  0 &  0 & 0 \\
+  -3 &  3 &  0 & 0 \\
+  3 & -6 &  3 & 0 \\
+  -1 &  3 & -3 & 1
+  \end{bmatrix}
+  \cdot
+  V
+  \cdot
+  \begin{bmatrix}
+  P_1 \\ P_2 \\ P_3 \\ P_4
+  \end{bmatrix}
+\]
+
+Then we remove the coordinate vector from both sides without affecting the equality:
+
+\[
+    \begin{bmatrix}
+      0 &    1 &       0 &  0 \\
+    \frac{-1}{2τ} &    0 &  \frac{1}{2τ} &  0 \\
+    \frac{1}{τ} &  \frac{1}{2t} - 3 & 3 - \frac{1}{t} & \frac{-1}{2t} \\
+    \frac{-1}{2t} &  2 - \frac{1}{2τ} & \frac{1}{2τ} - 2 &  \frac{1}{2t}
+    \end{bmatrix}
+  =
+    \begin{bmatrix}
+    1 &  0 &  0 & 0 \\
+    -3 &  3 &  0 & 0 \\
+    3 & -6 &  3 & 0 \\
+    -1 &  3 & -3 & 1
+    \end{bmatrix}
+    \cdot
+    V
+\]
+
+Then we can "get rid of" the Bézier matrix on the right by left-multiply both with the inverse of the Bézier matrix:
+
+\[
+  {
+  \begin{bmatrix}
+   1 &  0 &  0 & 0 \\
+  -3 &  3 &  0 & 0 \\
+   3 & -6 &  3 & 0 \\
+  -1 &  3 & -3 & 1
+  \end{bmatrix}
+  }^{-1}
+  \cdot
+  \begin{bmatrix}
+    0 &    1 &       0 &  0 \\
+   \frac{-1}{2τ} &    0 &  \frac{1}{2τ} &  0 \\
+   \frac{1}{τ} &  \frac{1}{2t} - 3 & 3 - \frac{1}{t} & \frac{-1}{2t} \\
+   \frac{-1}{2t} &  2 - \frac{1}{2τ} & \frac{1}{2τ} - 2 &  \frac{1}{2t}
+  \end{bmatrix}
+  =
+  {
+  \begin{bmatrix}
+   1 &  0 &  0 & 0 \\
+  -3 &  3 &  0 & 0 \\
+   3 & -6 &  3 & 0 \\
+  -1 &  3 & -3 & 1
+  \end{bmatrix}
+  }^{-1}
+  \cdot
+  \begin{bmatrix}
+   1 &  0 &  0 & 0 \\
+  -3 &  3 &  0 & 0 \\
+   3 & -6 &  3 & 0 \\
+  -1 &  3 & -3 & 1
+  \end{bmatrix}
+  \cdot
+  V
+\]
+
+A matrix times its inverse is the matrix equivalent of 1, and because "something times 1" is the same as "something", so we can just outright remove any matrix/inverse pair:
+
+\[
+  {
+  \begin{bmatrix}
+   1 &  0 &  0 & 0 \\
+  -3 &  3 &  0 & 0 \\
+   3 & -6 &  3 & 0 \\
+  -1 &  3 & -3 & 1
+  \end{bmatrix}
+  }^{-1}
+  \cdot
+  \begin{bmatrix}
+    0 &    1 &       0 &  0 \\
+   \frac{-1}{2τ} &    0 &  \frac{1}{2τ} &  0 \\
+   \frac{1}{τ} &  \frac{1}{2t} - 3 & 3 - \frac{1}{t} & \frac{-1}{2t} \\
+   \frac{-1}{2t} &  2 - \frac{1}{2τ} & \frac{1}{2τ} - 2 &  \frac{1}{2t}
+  \end{bmatrix}
+  =
+  V
+\]
+
+And now we're <em>basically</em> done. We just multiply those two matrices and we know what <em>V</em> is:
+
+\[
+  \begin{bmatrix}
+  0 & 1 & 0 & 0 \\
+  \frac{-1}{6τ} & 1 & \frac{1}{6τ} & 0 \\
+  0 & \frac{1}{6τ} & 1 & \frac{-1}{6τ} \\
+  0 & 0 & 1 & 0
+  \end{bmatrix}
+  =
+  V
+\]
+
+We now have the final piece of our function puzzle. Let's run through each step.
+
+1. Start with the Catmull-Rom function:
+
+\[
+  CatmullRom(t)
+  =
+  \begin{bmatrix}
+  1 & t & t^2 & t^3
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+   1 &  0 &  0 &  0 \\
+   0 &  0 &  1 &  0 \\
+  -3 &  3 & -2 & -1 \\
+   2 & -2 &  1 &  1
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  V_1 \\ V_2 \\ V'_1 \\ V'_2
+  \end{bmatrix}
+\]
+
+2. rewrite to pure coordinate form:
+
+\[
+  =
+  \begin{bmatrix}
+  1 & t & t^2 & t^3
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+   1 &  0 &  0 &  0 \\
+   0 &  0 &  1 &  0 \\
+  -3 &  3 & -2 & -1 \\
+   2 & -2 &  1 &  1
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  P_2 \\ P_3 \\ \frac{P_3 - P_1}{2τ} \\ \frac{P_4 - P_2}{2τ}
+  \end{bmatrix}
+\]
+
+3. rewrite for "normal" coordinate vector:
+
+\[
+  =
+  \begin{bmatrix}
+  1 & t & t^2 & t^3
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+   1 &  0 &  0 &  0 \\
+   0 &  0 &  1 &  0 \\
+  -3 &  3 & -2 & -1 \\
+   2 & -2 &  1 &  1
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+   0 &  1 & 0 & 0 \\
+   0 &  0 & 1 & 0 \\
+  \frac{-1}{2τ} &  0 & \frac{1}{2τ} & 0 \\
+   0 & \frac{-1}{2τ} & 0 & \frac{1}{2τ}
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  P_1 \\ P_2 \\ P_3 \\ P_4
+  \end{bmatrix}
+\]
+
+4. merge the inner matrices:
+
+\[
+  =
+  \begin{bmatrix}
+  1 & t & t^2 & t^3
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+    0 &    1 &       0 &  0 \\
+   \frac{-1}{2τ} &    0 &  \frac{1}{2τ} &  0 \\
+   \frac{1}{τ} &  \frac{1}{2t} - 3 & 3 - \frac{1}{t} & \frac{-1}{2t} \\
+   \frac{-1}{2t} &  2 - \frac{1}{2τ} & \frac{1}{2τ} - 2 &  \frac{1}{2t}
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  P_1 \\ P_2 \\ P_3 \\ P_4
+  \end{bmatrix}
+\]
+
+5. rewrite for Bézier matrix form:
+
+\[
+  =
+  \begin{bmatrix}
+  1 & t & t^2 & t^3
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+   1 &  0 &  0 & 0 \\
+  -3 &  3 &  0 & 0 \\
+   3 & -6 &  3 & 0 \\
+  -1 &  3 & -3 & 1
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  0 & 1 & 0 & 0 \\
+  \frac{-1}{6τ} & 1 & \frac{1}{6τ} & 0 \\
+  0 & \frac{1}{6τ} & 1 & \frac{-1}{6τ} \\
+  0 & 0 & 1 & 0
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  P_1 \\ P_2 \\ P_3 \\ P_4
+  \end{bmatrix}
+\]
+
+6. and transform the coordinates so we have a "pure" Bézier expression:
+
+\[
+  =
+  \begin{bmatrix}
+  1 & t & t^2 & t^3
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+   1 &  0 &  0 & 0 \\
+  -3 &  3 &  0 & 0 \\
+   3 & -6 &  3 & 0 \\
+  -1 &  3 & -3 & 1
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  P_2 \\
+  P_2 + \frac{P_3-P_1}{6 \cdot τ} \\
+  P_3 - \frac{P_4-P_2}{6 \cdot τ} \\
+  P_3
+  \end{bmatrix}
+\]
+
+And we're done: we finally know how to convert these two curves!
+
+</div>
+
+If we have a Catmull-Rom curve defined by four coordinates P<sub>1</sub> through P<sub>4</sub>, then we can draw that curve using a Bézier curve that has the vector:
+
+\[
+  \begin{bmatrix}
+  P_1 \\
+  P_2 \\
+  P_3 \\
+  P_4
+  \end{bmatrix}_{CatmullRom}
+  \Rightarrow
+  \begin{bmatrix}
+  P_2 \\
+  P_2 + \frac{P_3-P_1}{6 \cdot τ} \\
+  P_3 - \frac{P_4-P_2}{6 \cdot τ} \\
+  P_3
+  \end{bmatrix}_{Bézier}
+\]
+
+Similarly, if we have a Bézier curve defined by four coordinates P<sub>1</sub> through P<sub>4</sub>, we can draw that using a standard tension Catmull-Rom curve with the following coordinate values:
+
+\[
+  \begin{bmatrix}
+  P_1 \\
+  P_2 \\
+  P_3 \\
+  P_4
+  \end{bmatrix}_{Bézier}
+  \Rightarrow
+  \begin{bmatrix}
+  P_4 + 6(P_1 - P_2) \\
+  P_1 \\
+  P_4 \\
+  P_1 + 6(P_4 - P_3)
+  \end{bmatrix}_{CatmullRom}
+\]
+
+or, if your API requires specifying Catmull-Rom curves using "point + tangent" form:
+
+\[
+  \begin{bmatrix}
+  P_1 \\
+  P_2 \\
+  P_3 \\
+  P_4
+  \end{bmatrix}_{Bézier}
+  \Rightarrow
+  \begin{bmatrix}
+  P_1 \\
+  P_4 \\
+  P_4 + 3(P_1 - P_2) \\
+  P_1 + 3(P_4 - P_3)
+  \end{bmatrix}_{CatmullRom}
+\]

chapters/catmullconv/index.js

@@ -0,0 +1,2 @@
+var generateBase = require("../../generate-base");
+module.exports = generateBase("catmullconv");

chapters/catmullmoulding/content.en-GB.md

@@ -0,0 +1,13 @@
+# Creating a Catmull-Rom curve from three points
+
+Now, we saw how to fit a Bézier curve to three points, but if Catmull-Rom curves go through points, why can't we just use those to do curve fitting, instead?
+
+As a matter of fact, we can, but there's a difference between the kind of curve fitting we did in the previous section, and the kind of curve fitting that we can do with Catmull-Rom curves. In the previous section we came up with a single curve that goes through three points. There was a decent amount of maths and computation involved, and the end result was three or four coordinates that described a single curve, depending on whether we were fitting a quadratic or cubic curve.
+
+Using Catmull-Rom curves, we need virtually no computation, but even though we end up with one Catmull-Rom curve of <i>n</i> points, in order to draw the equivalent curve using cubic Bézier curves we need a massive <i>3n-2</i> points (and that's without double-counting points that are shared by consecutive cubic curves).
+
+In the following graphic, on the left we see three points that we want to draw a Catmull-Rom curve through (which we can move around freely, by the way), with in the second panel some of the "interesting" Catmull-Rom information: in black there's the baseline start--end, which will act as tangent orientation for the curve at point p2. We also see a virtual point p0 and p4, which are initially just point p2 reflected over the baseline. However, by using the up and down cursor key we can offset these points parallel to the baseline. Why would we want to do this? Because the line p0--p2 acts as departure tangent at p1, and the line p2--p4 acts as arrival tangent at p3. Play around with the graphic a bit to get an idea of what all of that meant:
+
+<Graphic title="Catmull-Rom curve fitting" setup={this.setup} draw={this.draw} onKeyDown={this.props.onKeyDown}/>
+
+As should be obvious by now, Catmull-Rom curves are great for "fitting a curvature to some points", but if we want to convert that curve to Bézier form we're going to end up with a lot of separate (but visually joined) Bézier curves. Depending on what we want to do, that'll be either unnecessary work, or exactly what we want: which it is depends entirely on you.

chapters/catmullmoulding/handler.js

@@ -0,0 +1,131 @@
+module.exports = {
+  statics: {
+    keyHandlingOptions: {
+      propName: "distance",
+      values: {
+        "38": 1,  // up arrow
+        "40": -1 // down arrow
+      }
+    }
+  },
+
+  setup: function(api) {
+    api.setPanelCount(3);
+    api.lpts = [
+      {x:56, y:153},
+      {x:144,y:83},
+      {x:188,y:185}
+    ];
+    api.distance = 0;
+  },
+
+  convert: function(p1, p2, p3, p4) {
+    var t = 0.5;
+    return [
+      p2, {
+        x: p2.x + (p3.x-p1.x)/(6*t),
+        y: p2.y + (p3.y-p1.y)/(6*t)
+      }, {
+        x: p3.x - (p4.x-p2.x)/(6*t),
+        y: p3.y - (p4.y-p2.y)/(6*t)
+      }, p3
+    ];
+  },
+
+  draw: function(api) {
+    api.reset();
+    api.setColor("lightblue");
+    api.drawGrid(10,10);
+
+    var pts = api.lpts;
+    api.setColor("black");
+    api.setFill("black");
+    pts.forEach((p,pos) => {
+      api.drawCircle(p, 3);
+      api.text("point "+(pos+1), p, {x:10, y:7});
+    });
+
+    var w = api.getPanelWidth();
+    var h = api.getPanelHeight();
+    var offset = {x:w, y:0};
+    api.setColor("lightblue");
+    api.drawGrid(10,10,offset);
+    api.setColor("black");
+    api.drawLine({x:0,y:0}, {x:0,y:h}, offset);
+
+    pts.forEach((p,pos) => {
+      api.drawCircle(p, 3, offset);
+    });
+    var p1 = pts[0], p2 = pts[1], p3 = pts[2];
+    var dx = p3.x - p1.x,
+        dy = p3.y - p1.y,
+        m = Math.sqrt(dx*dx + dy*dy);
+    dx /= m;
+    dy /= m;
+    api.drawLine(p1, p3, offset);
+
+    var p0 = {
+      x: p1.x + (p3.x - p2.x) - api.distance * dx,
+      y: p1.y + (p3.y - p2.y) - api.distance * dy
+    };
+    var p4 = {
+      x: p1.x + (p3.x - p2.x) + api.distance * dx,
+      y: p1.y + (p3.y - p2.y) + api.distance * dy
+    };
+    var center = api.utils.lli4(p1,p3,p2,{
+      x: (p0.x + p4.x)/2,
+      y: (p0.y + p4.y)/2
+    });
+    api.setColor("blue");
+    api.drawCircle(center, 3, offset);
+    api.drawLine(pts[1],center, offset);
+    api.setColor("#666");
+    api.drawLine(center, p0, offset);
+    api.drawLine(center, p4, offset);
+
+    api.setFill("blue");
+    api.text("p0", p0, {x:-20 + offset.x, y:offset.y + 2});
+    api.text("p4", p4, {x:+10 + offset.x, y:offset.y + 2});
+
+    // virtual point p0
+    api.setColor("red");
+    api.drawCircle(p0, 3, offset);
+    api.drawLine(p2, p0, offset);
+    api.drawLine(p1, {
+      x: p1.x + (p2.x - p0.x)/5,
+      y: p1.y + (p2.y - p0.y)/5
+    }, offset);
+
+    // virtual point p4
+    api.setColor("#00FF00");
+    api.drawCircle(p4, 3, offset);
+    api.drawLine(p2, p4, offset);
+    api.drawLine(p3, {
+      x: p3.x + (p4.x - p2.x)/5,
+      y: p3.y + (p4.y - p2.y)/5
+    }, offset);
+
+    // Catmull-Rom curve for p0-p1-p2-p3-p4
+    var c1 = new api.Bezier(this.convert(p0,p1,p2,p3)),
+        c2 = new api.Bezier(this.convert(p1,p2,p3,p4));
+    api.setColor("lightgrey");
+    api.drawCurve(c1, offset);
+    api.drawCurve(c2, offset);
+
+
+    offset.x += w;
+    api.setColor("lightblue");
+    api.drawGrid(10,10,offset);
+    api.setColor("black");
+    api.drawLine({x:0,y:0}, {x:0,y:h}, offset);
+
+    api.drawCurve(c1, offset);
+    api.drawCurve(c2, offset);
+    api.drawPoints(c1.points, offset);
+    api.drawPoints(c2.points, offset);
+    api.setColor("lightgrey");
+    api.drawLine(c1.points[0], c1.points[1], offset);
+    api.drawLine(c1.points[2], c2.points[1], offset);
+    api.drawLine(c2.points[2], c2.points[3], offset);
+  }
+};

chapters/catmullmoulding/index.js

@@ -0,0 +1,4 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+var keyHandling = require("../../decorators/keyhandling-decorator.jsx");
+module.exports = keyHandling(generateBase("catmullmoulding", handler));

chapters/circles/content.en-GB.md

@@ -0,0 +1,125 @@
+# Circles and quadratic Bézier curves
+
+Circles and Bézier curves are very different beasts, and circles are infinitely easier to work with than Bézier curves. Their formula is much simpler, and they can be drawn more efficiently. But, sometimes you don't have the luxury of using circles, or ellipses, or arcs. Sometimes, all you have are Bézier curves. For instance, if you're doing font design, fonts have no concept of geometric shapes, they only know straight lines, and Bézier curves. OpenType fonts with TrueType outlines only know quadratic Bézier curves, and OpenType fonts with Type 2 outlines only know cubic Bézier curves. So how do you draw a circle, or an ellipse, or an arc?
+
+You approximate.
+
+We already know that Bézier curves cannot model all curves that we can think of, and this includes perfect circles, as well as ellipses, and their arc counterparts. However, we can certainly approximate them to a degree that is visually acceptable. Quadratic and cubic curves offer us different curvature control, so in order to approximate a circle we will first need to figure out what the error is if we try to approximate arcs of increasing degree with quadratic and cubic curves, and where the coordinates even lie.
+
+Since arcs are mid-point-symmetrical, we need the control points to set up a symmetrical curve. For quadratic curves this means that the control point will be somewhere on a line that intersects the baseline at a right angle. And we don't get any choice on where that will be, since the derivatives at the start and end point have to line up, so our control point will lie at the intersection of the tangents at the start and end point.
+
+First, let's try to fit the quadratic curve onto a circular arc. In the following sketch you can move the mouse around over a unit circle, to see how well, or poorly, a quadratic curve can approximate the arc from (1,0) to where your mouse cursor is:
+
+<Graphic title="Quadratic Bézier arc approximation" setup={this.setup} draw={this.draw} onMouseMove={this.onMouseMove}/>
+
+As you can see, things go horribly wrong quite quickly; even trying to approximate a quarter circle using a quadratic curve is a bad idea. An eighth of a turns might look okay, but how okay is okay? Let's apply some maths and find out. What we're interested in is how far off our on-curve coordinates are with respect to a circular arc, given a specific start and end angle. We'll be looking at how much space there is between the circular arc, and the quadratic curve's midpoint.
+
+We start out with our start and end point, and for convenience we will place them on a unit circle (a circle around 0,0 with radius 1), at some angle *φ*:
+
+\[
+  S = \begin{pmatrix} 1 \\ 0 \end{pmatrix} \ , \ \  E = \begin{pmatrix} cos(φ) \\ sin(φ) \end{pmatrix}
+\]
+
+What we want to find is the intersection of the tangents, so we want a point C such that:
+
+\[
+  C = S + a \cdot \begin{pmatrix} 0 \\ 1 \end{pmatrix} \ , \ \ C = E + b \cdot \begin{pmatrix} -sin(φ) \\ cos(φ) \end{pmatrix}
+\]
+
+i.e. we want a point that lies on the vertical line through S (at some distance *a* from S) and also lies on the tangent line through E (at some distance *b* from E). Solving this gives us:
+
+\[
+  \left\{ \begin{array}{l}
+    C_x = 1 = cos(φ) + b \cdot -sin(φ)\\
+    C_y = a = sin(φ) + b \cdot cos(φ)
+  \end{array} \right.
+\]
+
+First we solve for *b*:
+
+\[
+  \begin{array}{l}
+    1 = cos(φ) + b \cdot -sin(φ) \ → \
+    1 - cos(φ) = -b \cdot sin(φ) \ → \
+    -1 + cos(φ) = b \cdot sin(φ)
+  \end{array}
+\]
+
+which yields:
+
+\[
+  b = \frac{cos(φ)-1}{sin(φ)}
+\]
+
+which we can then substitute in the expression for *a*:
+
+\[
+  \begin{aligned}
+    a &= sin(φ) + b \cdot cos(φ) \\
+    .. &= sin(φ) + \frac{-1 + cos(φ)}{sin(φ)} \cdot cos(φ) \\
+    .. &= sin(φ) + \frac{-cos(φ) + cos^2(φ)}{sin(φ)} \\
+    .. &= \frac{sin^2(φ) + cos^2(φ) - cos(φ)}{sin(φ)} \\
+    a &= \frac{1 - cos(φ)}{sin(φ)}
+  \end{aligned}
+\]
+
+A quick check shows that plugging these values for *a* and *b* into the expressions for C<sub>x</sub> and C<sub>y</sub> give the same x/y coordinates for both "*a* away from A" and "*b* away from B", so let's continue: now that we know the coordinate values for C, we know where our on-curve point T for *t=0.5* (or angle φ/2) is, because we can just evaluate the Bézier polynomial, and we know where the circle arc's actual point P is for angle φ/2:
+
+\[
+  P_x = cos(\frac{φ}{2}) \ , \ \  P_y = sin(\frac{φ}{2})
+\]
+
+We compute T, observing that if *t=0.5*, the polynomial values (1-t)², 2(1-t)t, and t² are 0.25, 0.5, and 0.25 respectively:
+
+\[
+  T = \frac{1}{4}S + \frac{2}{4}C + \frac{1}{4}E = \frac{1}{4}(S + 2C + E)
+\]
+
+Which, worked out for the x and y components, gives:
+
+\[
+  \begin{array}{l}
+    \left\{\begin{aligned}
+    T_x &= \frac{1}{4}(3 + cos(φ))\\
+    T_y &= \frac{1}{4}\left(\frac{2-2cos(φ)}{sin(φ)} + sin(φ)\right)
+         = \frac{1}{4}\left(2tan\left(\frac{φ}{2}\right) + sin(φ)\right)
+    \end{aligned}\right.
+  \end{array}
+\]
+
+And the distance between these two is the standard Euclidean distance:
+
+\[
+  \begin{aligned}
+    d_x(φ) &= T_x - P_x = \frac{1}{4}(3 + cos(φ)) - cos(\frac{φ}{2}) = 2sin^4\left(\frac{φ}{4}\right) \ , \\
+    d_y(φ) &= T_y - P_y = \frac{1}{4}\left(2tan\left(\frac{φ}{2}\right) + sin(φ)\right) - sin(\frac{φ}{2}) \ , \\
+    &⇓\\
+    d(φ) &= \sqrt{d^2_x + d^2_y} = \ ... \  = 2sin^4(\frac{φ}{4})\sqrt{\frac{1}{cos^2(\frac{φ}{2})}}
+  \end{aligned}
+\]
+
+So, what does this distance function look like when we plot it for a number of ranges for the angle φ, such as a half circle, quarter circle and eighth circle?
+
+<table><tbody><tr><td>
+  <img src="images/arc-q-pi.gif" height="190"/>
+  plotted for 0 ≤ φ ≤ π:
+</td><td>
+  <img src="images/arc-q-pi2.gif" height="187"/>
+  plotted for 0 ≤ φ ≤ ½π:
+</td><td>
+  { this.props.showhref ? "http://www.wolframalpha.com/input/?i=plot+sqrt%28%281%2F4+*+%28sin%28x%29+%2B+2tan%28x%2F2%29%29+-+sin%28x%2F2%29%29%5E2+%2B+%282sin%5E4%28x%2F4%29%29%5E2%29+for+0+%3C%3D+x+%3C%3D+pi%2F4" : null }
+  <img src="images/arc-q-pi4.gif" height="174"/>
+  plotted for 0 ≤ φ ≤ ¼π:
+</td></tr></tbody></table>
+
+We now see why the eighth circle arc looks decent, but the quarter circle arc doesn't: an error of roughly 0.06 at *t=0.5* means we're 6% off the mark... we will already be off by one pixel on a circle with pixel radius 17. Any decent sized quarter circle arc, say with radius 100px, will be way off if approximated by a quadratic curve! For the eighth circle arc, however, the error is only roughly 0.003, or 0.3%, which explains why it looks so close to the actual eighth circle arc. In fact, if we want a truly tiny error, like 0.001, we'll have to contend with an angle of (rounded) 0.593667, which equates to roughly 34 degrees. We'd need 11 quadratic curves to form a full circle with that precision! (technically, 10 and ten seventeenth, but we can't do partial curves, so we have to round up). That's a whole lot of curves just to get a shape that can be drawn using a simple function!
+
+In fact, let's flip the function around, so that if we plug in the precision error, labelled ε, we get back the maximum angle for that precision:
+
+\[
+  φ = 4 \cdot arccos \left(\frac{\sqrt{2+ε-\sqrt{ε(2+ε)}}}{\sqrt{2}}\right)
+\]
+
+And frankly, things are starting to look a bit ridiculous at this point, we're doing way more maths than we've ever done, but thankfully this is as far as we need the maths to take us: If we plug in the precisions 0.1, 0.01, 0.001 and 0.0001 we get the radians values 1.748, 1.038, 0.594 and 0.3356; in degrees, that means we can cover roughly 100 degrees (requiring four curves), 59.5 degrees (requiring six curves), 34 degrees (requiring 11 curves), and 19.2 degrees (requiring a whopping nineteen curves).
+
+The bottom line? **Quadratic curves are kind of lousy** if you want circular (or elliptical, which are circles that have been squashed in one dimension) curves. We can do better, even if it's just by raising the order of our curve once. So let's try the same thing for cubic curves.

chapters/circles/handler.js

@@ -0,0 +1,57 @@
+var sin = Math.sin,
+    cos = Math.cos;
+
+module.exports = {
+  setup: function(api) {
+    api.w = api.getPanelWidth();
+    api.h = api.getPanelHeight();
+    api.pad = 20;
+    api.r = api.w/2 - api.pad;
+    api.mousePt = false;
+    api.angle = 0;
+    var spt = { x: api.w-api.pad, y: api.h/2 };
+    api.setCurve(new api.Bezier(spt, spt, spt));
+  },
+
+  draw: function(api, curve) {
+    api.reset();
+    api.setColor("lightgrey");
+    api.drawGrid(1,1);
+    api.setColor("red");
+    api.drawCircle({x:api.w/2,y:api.h/2},api.r);
+    api.setColor("transparent");
+    api.setFill("rgba(100,255,100,0.4)");
+    var p = {
+      x: api.w/2,
+      y: api.h/2,
+      r: api.r,
+      s: api.angle < 0 ? api.angle : 0,
+      e: api.angle < 0 ? 0 : api.angle
+    };
+    api.drawArc(p);
+    api.setColor("black");
+    api.drawSkeleton(curve);
+    api.drawCurve(curve);
+  },
+
+  onMouseMove: function(evt, api) {
+    var x = evt.offsetX - api.w/2,
+        y = evt.offsetY - api.h/2;
+    var angle = Math.atan2(y,x);
+    var pts = api.curve.points;
+    // new control
+    var r = api.r,
+        b = (cos(angle) - 1) / sin(angle);
+    pts[1] = {
+      x: api.w/2 + r * (cos(angle) - b * sin(angle)),
+      y: api.w/2 + r * (sin(angle) + b * cos(angle))
+    };
+    // new endpoint
+    pts[2] = {
+      x: api.w/2 + api.r * cos(angle),
+      y: api.w/2 + api.r * sin(angle)
+    };
+    api.setCurve(new api.Bezier(pts));
+    api.angle = angle;
+  }
+};

chapters/circles/index.js

@@ -0,0 +1,3 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+module.exports = generateBase("circles", handler);

chapters/circles_cubic/content.en-GB.md

@@ -0,0 +1,180 @@
+# Circles and cubic Bézier curves
+
+In the previous section we tried to approximate a circular arc with a quadratic curve, and it mostly made us unhappy. Cubic curves are much better suited to this task, so what do we need to do?
+
+For cubic curves, we basically want the curve to pass through three points on the circle: the start point, the mid point at "angle/2", and the end point at "angle". We then also need to make sure the control points are such that the start and end tangent lines line up with the circle's tangent lines at the start and end point.
+
+The first thing we can do is "guess" what the curve should look like, based on the previously outlined curve-through-three-points procedure. This will give use a curve with correct start, mid and end points, but possibly incorrect derivatives at the start and end, because the control points might not be in the right spot. We can then slide the control points along the lines that connect them to their respective end point, until they effect the corrected derivative at the start and end points.  However, if you look back at the section on fitting curves through three points, the rules used were such that they optimized for a near perfect hemisphere, so using the same guess won't be all that useful: guessing the solution based on knowing the solution is not really guessing.
+
+So have a graphical look at a "bad" guess versus the true fit, where we'll be using the bad guess and the description in the second paragraph to derive the maths for the true fit:
+
+<Graphic title="Cubic Bézier arc approximation" setup={this.setup} draw={this.draw} onMouseMove={this.onMouseMove}/>
+
+We see two curves here; in blue, our "guessed" curve and its control points, and in grey/black, the true curve fit, with proper control points that were shifted in, along line between our guessed control points, such that the derivatives at the start and end points are correct.
+
+We can already see that cubic curves are a lot better than quadratic curves, and don't look all that wrong until we go well past a quarter circle; ⅜th starts to hint at problems, and half a circle has an obvious "gap" between the real circle and the cubic approximation. Anything past that just looks plain ridiculous... but quarter curves actually look pretty okay!
+
+So, maths time again: how okay is "okay"? Let's apply some more maths to find out.
+
+Unlike for the quadratic curve, we can't use <i>t=0.5</i> as our reference point because by its very nature it's one of the three points that are actually guaranteed to lie on the circular curve. Instead, we need a different <i>t</i> value. If we run some analysis on the curve we find that the actual <i>t</i> value at which the curve is furthest from what it should be is 0.211325 (rounded), but we don't know "why", since finding this value involves root-finding, and is nearly impossible to do symbolically without pages and pages of math just to express one of the possible solutions.
+
+So instead of walking you through the derivation for that value, let's simply take that <i>t</i> value and see what the error is for circular arcs with an angle ranging from 0 to 2π:
+
+<table><tbody><tr><td>
+  <img src="images/arc-c-2pi.gif" height="187"/>
+  plotted for 0 ≤ φ ≤ 2π:
+</td><td>
+  <img src="images/arc-c-pi.gif" height="187"/>
+  plotted for 0 ≤ φ ≤ π:
+</td><td>
+  <img src="images/arc-c-pi2.gif" height="187"/>
+  plotted for 0 ≤ φ ≤ ½π:
+</td></tr></tbody></table>
+
+We see that cubic Bézier curves are much better when it comes to approximating circular arcs, with an error of less than 0.027 at the two "bulge" points for a quarter circle (which had an error of 0.06 for quadratic curves at the mid point), and an error near 0.001 for an eighth of a circle, so we're getting less than half the error for a quarter circle, or: at a slightly lower error, we're getting twice the arc. This makes cubic curves quite useful!
+
+In fact, the precision of a cubic curve at a quarter circle is considered "good enough" by so many people that it's generally considered "just fine" to use four cubic Bézier curves to fake a full circle when no circle primitives are available; generally, people won't notice that it's not a real circle unless you also happen to overlay an actual circle, so that the difference becomes obvious.
+
+So with the error analysis out of the way, how do we actually compute the coordinates needed to get that "true fit" cubic curve? The first observation is that we already know the start and end points, because they're the same as for the quadratic attempt:
+
+\[ S = \begin{pmatrix} 1 \\ 0 \end{pmatrix} \ , \ \  E = \begin{pmatrix} cos(φ) \\ sin(φ) \end{pmatrix} \]
+
+But we now need to find two control points, rather than one. If we want the derivatives at the start and end point to match the circle, then the first control point can only lie somewhere on the vertical line through S, and the second control point can only lie somewhere on the line tangent to point E, which means:
+
+\[
+  C_1 = S + a \cdot \begin{pmatrix} 0 \\ 1 \end{pmatrix}
+\]
+
+where "a" is some scaling factor, and:
+
+\[
+  C_2 = E + b \cdot \begin{pmatrix} -sin(φ) \\ cos(φ) \end{pmatrix}
+\]
+
+where "b" is also some scaling factor.
+
+Starting with this information, we slowly maths our way to success, but I won't lie: the maths for this is pretty trig-heavy, and it's easy to get lost if you remember (or know!) some of the core trigonometric identities, so if you just want to see the final result just skip past the next section!
+
+<div className="note">
+
+## Let's do this thing.
+
+Unlike for the quadratic case, we need some more information in order to compute <i>a</i> and <i>b</i>, since they're no longer dependent variables. First, we observe that the curve is symmetrical, so whatever values we end up finding for C<sub>1</sub> will apply to C<sub>2</sub> as well (rotated along its tangent), so we'll focus on finding the location of C<sub>1</sub> only. So here's where we do something that you might not expect: we're going to ignore for a moment, because we're going to have a much easier time if we just solve this problem with geometry first, then move to calculus to solve a much simpler problem.
+
+If we look at the triangle that is formed between our starting point, or initial guess C<sub>1</sub> and our real C<sub>1</sub>, there's something funny going on: if we treat the line {start,guess} as our opposite side, the line {guess,real} as our adjacent side, with {start,real} our hypotenuse, then the angle for the corner hypotenuse/adjacent is half that of the arc we're covering. Try it: if you place the end point at a quarter circle (pi/2, or 90 degrees), the angle in our triangle is half a quarter (pi/4, or 45 degrees). With that knowledge, and a knowledge of what the length of any of our lines segments are (as a function), we can determine where our control points are, and thus have everything we need to find the error distance function. Of the three lines, the one we can easiest determine is {start,guess}, so let's find out what the guessed control point is. Again geometrically, because we have the benefit of an on-curve <i>t=0.5</i> value.
+
+The distance from our guessed point to the start point is exactly the same as the projection distance we looked at earlier. Using <i>t=0.5</i> as our point "B" in the "A,B,C" projection, then we know the length of the line segment {C,A}, since it's d<sub>1</sub> = {A,B} + d<sub>2</sub> = {B,C}:
+
+\[
+  ||{A,C}|| = d_2 + d_1 = d_2 + d_2 \cdot ratio_3 \left(\frac{1}{2}\right) = d_2 + \frac{1}{3}d_2 = \frac{4}{3}d_2
+\]
+
+So that just leaves us to find the distance from <i>t=0.5</i> to the baseline for an arbitrary angle φ, which is the distance from the centre of the circle to our <i>t=0.5</i> point, minus the distance from the centre to the line that runs from start point to end point. The first is the same as the point P we found for the quadratic curve:
+
+\[
+  P_x = cos(\frac{φ}{2}) \ , \ \  P_y = sin(\frac{φ}{2})
+\]
+
+And the distance from the origin to the line start/end is another application of angles, since the triangle {origin,start,C} has known angles, and two known sides. We can find the length of the line {origin,C}, which lets us trivially compute the coordinate for C:
+
+\[
+  \begin{array}{l}
+    l = cos(\frac{φ}{2}) \ , \\
+    \left\{\begin{array}{l}
+      C_x = l \cdot cos\left(\frac{φ}{2}\right) = cos^2\left(\frac{φ}{2}\right)\ , \\
+      C_y = l \cdot sin\left(\frac{φ}{2}\right) = cos(\frac{φ}{2}) \cdot sin\left(\frac{φ}{2}\right)\ , \\
+    \end{array}\right.
+  \end{array}
+\]
+
+With the coordinate C, and knowledge of coordinate B, we can determine coordinate A, and get a vector that is identical to the vector {start,guess}:
+
+\[
+  \left\{\begin{array}{l}
+    B_x - C_x = cos\left(\frac{φ}{2}\right) - cos^2\left(\frac{φ}{2}\right) \\
+    B_y - C_y = sin\left(\frac{φ}{2}\right) - cos(\frac{φ}{2}) \cdot sin\left(\frac{φ}{2}\right)
+              = sin\left(\frac{φ}{2}\right) - \frac{sin(φ)}{2}
+  \end{array}\right.
+\]
+
+\[
+  \left\{\begin{array}{l}
+    \vec{v}_x = \{C,A\}_x = \frac{4}{3} \cdot (B_x - C_x) \\
+    \vec{v}_y = \{C,A\}_y = \frac{4}{3} \cdot (B_y - C_y)
+  \end{array}\right.
+\]
+
+Which means we can now determine the distance {start,guessed}, which is the same as the distance {C,A}, and use that to determine the vertical distance from our start point to our C<sub>1</sub>:
+
+\[
+  \left\{\begin{array}{l}
+    C_{1x} = 1 \\
+    C_{1y} = \frac{d}{sin\left(\frac{φ}{2}\right)}
+           = \frac{\sqrt{\vec{v}^2_x + \vec{v}^2_y}}{sin\left(\frac{φ}{2}\right)}
+           = \frac{4}{3} tan \left( \frac{φ}{4} \right)
+  \end{array}\right.
+\]
+
+And after this tedious detour to find the coordinate for C<sub>1</sub>, we can find C<sub>2</sub> fairly simply, since it's lies at distance -C<sub>1y</sub> along the end point's tangent:
+
+\[
+  \begin{array}{l}
+    E'_x = -sin(φ) \ , \ E'_y = cos(φ) \ , \ ||E'|| = \sqrt{ (-sin(φ))^2 + cos^2(φ)} = 1 \ , \\
+    \left\{\begin{array}{l}
+      C_2x = E_x - C_{1y} \cdot \frac{E_x'}{||E'||}
+           = cos(φ) + C_{1y} \cdot sin(φ)
+           = cos(φ) + \frac{4}{3} tan \left( \frac{φ}{4} \right) \cdot sin(φ) \\
+      C_2y = E_y - C_{1y} \cdot \frac{E_y'}{||E'||}
+           = sin(φ) - C_{1y} \cdot cos(φ)
+           = sin(φ) - \frac{4}{3} tan \left( \frac{φ}{4} \right) \cdot cos(φ)
+    \end{array}\right.
+  \end{array}
+\]
+
+And that's it, we have all four points now for an approximation of an arbitrary circular arc with angle φ.
+
+</div>
+
+So, to recap, given an angle φ, the new control coordinates are:
+
+\[
+  C_1 = \left [ \begin{matrix}
+    1 \\
+    f
+  \end{matrix} \right ],\ with\ f = \frac{4}{3} tan \left( \frac{φ}{4} \right)
+\]
+
+and
+
+\[
+  C_2 = \left [ \begin{matrix}
+    cos(φ) + f \cdot sin(φ) \\
+    sin(φ) - f \cdot cos(φ)
+  \end{matrix} \right ],\ with\ f = \frac{4}{3} tan \left( \frac{φ}{4} \right)
+\]
+
+And, because the "quarter curve" special case comes up so incredibly often, let's look at what these new control points mean for the curve coordinates of a quarter curve, by simply filling in φ = π/2:
+
+\[
+  \begin{array}{l}
+    S = (1, 0) \ , \
+    C_1 = \left ( 1, 4 \frac{\sqrt{2}-1}{3} \right ) \ , \
+    C_2 = \left ( 4 \frac{\sqrt{2}-1}{3} , 1 \right ) \ , \
+    E = (0, 1)
+  \end{array}
+\]
+
+Which, in decimal values, rounded to six significant digits, is:
+
+\[
+  \begin{array}{l}
+    S = (1, 0) \ , \
+    C_1 = (1, 0.55228) \ , \
+    C_2 = (0.55228 , 1) \ , \
+    E = (0, 1)
+  \end{array}
+\]
+
+Of course, this is for a circle with radius 1, so if you have a different radius circle, simply multiply the coordinate by the radius you need. And then finally, forming a full curve is now a simple a matter of mirroring these coordinates about the origin:
+
+<Graphic title="Cubic Bézier circle approximation" draw={this.drawCircle} static={true}/>

chapters/circles_cubic/handler.js

@@ -0,0 +1,205 @@
+var sin = Math.sin, cos = Math.cos, tan = Math.tan;
+
+module.exports = {
+  setup: function(api) {
+    api.setSize(400,400);
+    api.w = api.getPanelWidth();
+    api.h = api.getPanelHeight();
+    api.pad = 80;
+    api.r = api.w/2 - api.pad;
+    api.mousePt = false;
+    api.angle = 0;
+    var spt = { x: api.w-api.pad, y: api.h/2 };
+    api.setCurve(new api.Bezier(spt, spt, spt, spt));
+  },
+
+  guessCurve: function(S, B, E)  {
+    var C = {
+          x: (S.x + E.x)/2,
+          y: (S.y + E.y)/2
+        },
+        A = {
+          x: B.x + (B.x-C.x)/3, // cubic ratio at t=0.5 is 1/3
+          y: B.y + (B.y-C.y)/3
+        },
+        bx = (E.x-S.x)/4,
+        by = (E.y-S.y)/4,
+        e1 = {
+          x: B.x - bx,
+          y: B.y - by
+        },
+        e2 = {
+          x: B.x + bx,
+          y: B.y + by
+        },
+
+        v1 = {
+          x: A.x + (e1.x-A.x)*2,
+          y: A.y + (e1.y-A.y)*2
+        },
+        v2 = {
+          x: A.x + (e2.x-A.x)*2,
+          y: A.y + (e2.y-A.y)*2
+        },
+
+        nc1 = {
+          x: S.x + (v1.x-S.x)*2,
+          y: S.y + (v1.y-S.y)*2
+        },
+        nc2 = {
+          x: E.x + (v2.x-E.x)*2,
+          y: E.y + (v2.y-E.y)*2
+        };
+    return [nc1, nc2];
+  },
+
+  draw: function(api, curve) {
+    api.reset();
+
+    api.setColor("lightgrey");
+    api.drawGrid(1,1);
+    api.setColor("rgba(255,0,0,0.4)");
+    api.drawCircle({x:api.w/2,y:api.h/2},api.r);
+    api.setColor("transparent");
+    api.setFill("rgba(100,255,100,0.4)");
+    var p = {
+      x: api.w/2,
+      y: api.h/2,
+      r: api.r,
+      s: api.angle < 0 ? api.angle : 0,
+      e: api.angle < 0 ? 0 : api.angle
+    };
+    api.drawArc(p);
+
+    // guessed curve
+    var B = {
+      x: api.w/2 + api.r * cos(api.angle/2),
+      y: api.w/2 + api.r * sin(api.angle/2)
+    };
+    var S = curve.points[0],
+        E = curve.points[3],
+        nc = this.guessCurve(S,B,E);
+    var guess = new api.Bezier([S, nc[0], nc[1], E]);
+    api.setColor("rgb(140,140,255)");
+    api.drawLine(guess.points[0], guess.points[1]);
+    api.drawLine(guess.points[1], guess.points[2]);
+    api.drawLine(guess.points[2], guess.points[3]);
+    api.setColor("blue");
+    api.drawCurve(guess);
+    api.drawCircle(guess.points[1], 3);
+    api.drawCircle(guess.points[2], 3);
+
+    // real curve
+    api.drawSkeleton(curve);
+    api.setColor("black");
+    api.drawLine(curve.points[1], curve.points[2]);
+    api.drawCurve(curve);
+  },
+
+  onMouseMove: function(evt, api) {
+    var x = evt.offsetX - api.w/2,
+        y = evt.offsetY - api.h/2;
+    if (x>api.w/2) return;
+
+    var angle = Math.atan2(y,x);
+    if (angle < 0) {
+      angle = 2*Math.PI + angle;
+    }
+    var pts = api.curve.points;
+    // new control 1
+    var r = api.r,
+        f = (4 * tan(angle/4)) /3;
+    pts[1] = {
+      x: api.w/2 + r,
+      y: api.w/2 + r * f
+    };
+    // new control 2
+    pts[2] = {
+      x: api.w/2 + api.r * (cos(angle) + f*sin(angle)),
+      y: api.w/2 + api.r * (sin(angle) - f*cos(angle))
+    };
+    // new endpoint
+    pts[3] = {
+      x: api.w/2 + api.r * cos(angle),
+      y: api.w/2 + api.r * sin(angle)
+    };
+    api.setCurve(new api.Bezier(pts));
+    api.angle = angle;
+  },
+
+  drawCircle: function(api) {
+    api.setSize(325,325);
+    api.reset();
+
+    var w = api.getPanelWidth(),
+        h = api.getPanelHeight(),
+        pad = 60,
+        r = w/2 - pad,
+        k = 0.55228,
+        offset = {x: -pad/2, y:-pad/4};
+
+    var curve = new api.Bezier([
+      {x:w/2 + r,   y:h/2},
+      {x:w/2 + r,   y:h/2 + k*r},
+      {x:w/2 + k*r, y:h/2 + r},
+      {x:w/2,       y:h/2 + r}
+    ]);
+
+    api.setColor("lightgrey");
+    api.drawLine({x:0,y:h/2}, {x:w+pad,y:h/2}, offset);
+    api.drawLine({x:w/2,y:0}, {x:w/2,y:h+pad}, offset);
+
+    var pts = curve.points;
+
+    api.setColor("red");
+    api.drawPoint(pts[0], offset);
+    api.drawPoint(pts[1], offset);
+    api.drawPoint(pts[2], offset);
+    api.drawPoint(pts[3], offset);
+    api.drawCurve(curve, offset);
+    api.setColor("rgb(255,160,160)");
+    api.drawLine(pts[0],pts[1],offset);
+    api.drawLine(pts[1],pts[2],offset);
+    api.drawLine(pts[2],pts[3],offset);
+
+    api.setFill("red");
+    api.text((pts[0].x - w/2) + "," + (pts[0].y - h/2), {x: pts[0].x + 7, y: pts[0].y + 3}, offset);
+    api.text((pts[1].x - w/2) + "," + (pts[1].y - h/2), {x: pts[1].x + 7, y: pts[1].y + 3}, offset);
+    api.text((pts[2].x - w/2) + "," + (pts[2].y - h/2), {x: pts[2].x + 7, y: pts[2].y + 7}, offset);
+    api.text((pts[3].x - w/2) + "," + (pts[3].y - h/2), {x: pts[3].x, y: pts[3].y + 13}, offset);
+
+    pts.forEach(p => { p.x = -(p.x - w); });
+    api.setColor("blue");
+    api.drawCurve(curve, offset);
+    api.drawLine(pts[2],pts[3],offset);
+    api.drawPoint(pts[2],offset);
+    api.setFill("blue");
+    api.text("reflected", {x: pts[2].x - pad/2, y: pts[2].y + 13}, offset);
+    api.setColor("rgb(200,200,255)");
+    api.drawLine(pts[1],pts[0],offset);
+    api.drawPoint(pts[1],offset);
+
+    pts.forEach(p => { p.y = -(p.y - h); });
+    api.setColor("green");
+    api.drawCurve(curve, offset);
+
+    pts.forEach(p => { p.x = -(p.x - w); });
+    api.setColor("purple");
+    api.drawCurve(curve, offset);
+    api.drawLine(pts[1],pts[0],offset);
+    api.drawPoint(pts[1],offset);
+    api.setFill("purple");
+    api.text("reflected", {x: pts[1].x + 10, y: pts[1].y + 3}, offset);
+    api.setColor("rgb(200,200,255)");
+    api.drawLine(pts[2],pts[3],offset);
+    api.drawPoint(pts[2],offset);
+
+
+
+    api.setColor("black");
+    api.setFill("black");
+    api.drawLine({x:w/2, y:h/2}, {x:w/2 + r -2, y:h/2}, offset);
+    api.drawLine({x:w/2, y:h/2}, {x:w/2, y:h/2 + r -2}, offset);
+    api.text("r = " + r, {x:w/2 + r/3, y:h/2 + 10}, offset);
+  }
+};

chapters/circles_cubic/index.js

@@ -0,0 +1,3 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+module.exports = generateBase("circles_cubic", handler);

chapters/comments/content.en-GB.md

@@ -0,0 +1,18 @@
+<script>
+/* ----------------------------------------------------------------------------- *
+ *
+ *                    PLEASE DO NOT LOCALISE THIS FILE
+ *
+ * I can't respond to questions that aren't asked in English, so this is one of
+ * the few cases where there is a content.en-GB.md but you should not localize it.
+ *
+ * ----------------------------------------------------------------------------- */
+</script>
+
+# Comments and questions
+
+First off, if you enjoyed this book, or you simply found it useful for something you were trying to get done, and you were wondering how to let me know you appreciated this book, you have two options: you can either head on over to the [Patreon page](https://patreon.com/bezierinfo) for this book, or if you prefer to make a one-time donation, head on over to the [buy Pomax a coffee](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QPRDLNGDANJSW) page. This work has grown from a small primer to a 70-plus print-page-equivalent reader on the subject of Bézier curves over the years, and a lot of coffee went into the making of it. I don't regret a minute I spent on writing it, but I can always do with some more coffee to keep on writing.
+
+With that said, on to the comments!
+
+<div id="disqus_thread" />

chapters/comments/handler.js

@@ -0,0 +1,38 @@
+/**
+ * We REALLY don't want disqus to load unless the user
+ * is actually looking at the comments section, because it
+ * tacks on 2.5+ MB in network transfers...
+ */
+module.exports = {
+  componentDidMount() {
+    if (typeof document === "undefined") {
+      return this.silence();
+    }
+    this.heading = document.getElementById(this.props.page);
+    document.addEventListener("scroll", this.scrollHandler, {passive:true});
+  },
+
+  scrollHandler(evt) {
+    var bbox = this.heading.getBoundingClientRect();
+    var top = bbox.top;
+    var limit = window.innerHeight;
+    if (top<limit) { this.loadDisqus(); }
+  },
+
+  loadDisqus() {
+    var script = document.createElement("script");
+    script.src = "lib/site/disqus.js";
+    script.async = true;
+    document.head.appendChild(script);
+    this.silence();
+    this.unlisten();
+  },
+
+  silence() {
+    this.loadDisqus = () => {};
+  },
+
+  unlisten() {
+    document.removeEventListener("scroll", this.scrollHandler);
+  }
+};

chapters/comments/index.js

@@ -0,0 +1,3 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+module.exports = generateBase("comments", handler);

chapters/components/content.en-GB.md

@@ -0,0 +1,12 @@
+# Component functions
+
+One of the first things people run into when they start using Bézier curves in their own programs is "I know how to draw the curve, but how do I determine the bounding box?". It's actually reasonably straightforward to do so, but it requires having some knowledge on exploiting math to get the values we need. For bounding boxes, we aren't actually interested in the curve itself, but only in its "extremities": the minimum and maximum values the curve has for its x- and y-axis values. If you remember your calculus (provided you ever took calculus, otherwise it's going to be hard to remember) we can determine function extremities using the first derivative of that function, but this poses a problem, since our function is parametric: every axis has its own function.
+
+The solution: compute the derivative for each axis separately, and then fit them back together in the same way we do for the original.
+
+Let's look at how a parametric Bézier curve "splits up" into two normal functions, one for the x-axis and one for the y-axis. Note the leftmost figure is again an interactive curve, without labeled axes (you get coordinates in the graph instead).  The center and rightmost figures are the component functions for computing the x-axis value, given a value for <i>t</i> (between 0 and 1 inclusive), and the y-axis value, respectively.
+
+If you move points in a curve sideways, you should only see the middle graph change; likely, moving points vertically should only show a change in the right graph.
+
+<Graphic title="Quadratic Bézier curve components" setup={this.setupQuadratic} draw={this.draw}/>
+<Graphic title="Cubic Bézier curve components" setup={this.setupCubic} draw={this.draw}/>

chapters/components/handler.js

@@ -0,0 +1,47 @@
+module.exports = {
+  setupQuadratic: function(api) {
+    var curve = api.getDefaultQuadratic();
+    curve.points[2].x = 210;
+    api.setCurve(curve);
+  },
+
+  setupCubic: function(api) {
+    var curve = api.getDefaultCubic();
+    api.setCurve(curve);
+  },
+
+  draw: function(api, curve) {
+    api.setPanelCount(3);
+    api.reset();
+    api.drawSkeleton(curve);
+    api.drawCurve(curve);
+
+    var tf = curve.order,
+        pad = 20,
+        pts = curve.points,
+        w = api.getPanelWidth(),
+        wp = w - 2 * pad,
+        h = api.getPanelHeight(),
+        offset = { x: w, y: 0 };
+
+    var x_pts = JSON.parse(JSON.stringify(pts)).map((p,t) => {
+      return {x:wp*t/tf, y:p.x};
+    });
+    api.drawLine({x:0,y:0}, {x:0,y:h}, offset);
+    api.drawAxes(pad, "t",0,1, "x",0,w-pad, offset);
+    offset.x += pad;
+    offset.y += pad;
+    api.drawCurve(new api.Bezier(x_pts), offset);
+
+    offset.x += w-pad;
+    offset.y -= pad;
+    var y_pts = JSON.parse(JSON.stringify(pts)).map((p,t) => {
+      return {x:wp*t/tf, y:p.y};
+    });
+    api.drawLine({x:0,y:0}, {x:0,y:h}, offset);
+    api.drawAxes(pad, "t",0,1, "y",0,w-pad, offset);
+    offset.x += pad;
+    offset.y += pad;
+    api.drawCurve(new api.Bezier(y_pts), offset);
+  }
+};

chapters/components/index.js

@@ -0,0 +1,3 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+module.exports = generateBase("components", handler);

chapters/control/content.en-GB.md

@@ -0,0 +1,75 @@
+# Controlling Bézier curvatures
+
+Bézier curves are, like all "splines", interpolation functions. This means that they take a set of points, and generate values somewhere "between" those points. (One of the consequences of this is that you'll never be able to generate a point that lies outside the outline for the control points, commonly called the "hull" for the curve. Useful information!). In fact, we can visualize how each point contributes to the value generated by the function, so we can see which points are important, where, in the curve.
+
+The following graphs show the interpolation functions for quadratic and cubic curves, with "S" being the strength of a point's contribution to the total sum of the Bézier function. Click or click-drag to see the interpolation percentages for each curve-defining point at a specific <i>t</i> value.
+
+<div className="figure">
+  <Graphic inline={true} title="Quadratic interpolations"  draw={this.drawQuadraticLerp}/>
+  <Graphic inline={true} title="Cubic interpolations"      draw={this.drawCubicLerp}/>
+  <Graphic inline={true} title="15th degree interpolations" draw={this.draw15thLerp}/>
+</div>
+
+Also shown is the interpolation function for a 15<sup>th</sup> order Bézier function. As you can see, the start and end point contribute considerably more to the curve's shape than any other point in the control point set.
+
+If we want to change the curve, we need to change the weights of each point, effectively changing the interpolations. The way to do this is about as straightforward as possible: just multiply each point with a value that changes its strength. These values are conventionally called "weights", and we can add them to our original Bézier function:
+
+\[
+  Bézier(n,t) = \sum_{i=0}^{n}
+                \underset{binomial\ term}{\underbrace{\binom{n}{i}}}
+                \cdot\
+                \underset{polynomial\ term}{\underbrace{(1-t)^{n-i} \cdot t^{i}}}
+                \cdot\
+                \underset{weight}{\underbrace{w_i}}
+\]
+
+That looks complicated, but as it so happens, the "weights" are actually just the coordinate values we want our curve to have: for an <i>n<sup>th</sup></i> order curve, w<sub>0</sub> is our start coordinate, w<sub>n</sub> is our last coordinate, and everything in between is a controlling coordinate. Say we want a cubic curve that starts at (120,160), is controlled by (35,200) and (220,260) and ends at (220,40), we use this Bézier curve:
+
+\[
+\left \{ \begin{matrix}
+  x = BLUE[120] \cdot (1-t)^3 + BLUE[35] \cdot 3 \cdot (1-t)^2 \cdot t + BLUE[220] \cdot 3 \cdot (1-t) \cdot t^2 + BLUE[220] \cdot t^3 \\
+  y = BLUE[160] \cdot (1-t)^3 + BLUE[200] \cdot 3 \cdot (1-t)^2 \cdot t + BLUE[260] \cdot 3 \cdot (1-t) \cdot t^2 + BLUE[40] \cdot t^3
+\end{matrix} \right.
+\]
+
+Which gives us the curve we saw at the top of the article:
+
+<Graphic title="Our cubic Bézier curve" setup={this.drawCubic} draw={this.drawCurve}/>
+
+What else can we do with Bézier curves? Quite a lot, actually. The rest of this article covers a multitude of possible operations and algorithms that we can apply, and the tasks they achieve.
+
+<div className="howtocode">
+
+### How to implement the weighted basis function
+
+Given that we already know how to implement basis function, adding in the control points is remarkably easy:
+
+```
+function Bezier(n,t,w[]):
+  sum = 0
+  for(k=0; k<=n; k++):
+    sum += w[k] * binomial(n,k) * (1-t)^(n-k) * t^(k)
+  return sum
+```
+
+And now for the extremely optimized versions:
+
+```
+function Bezier(2,t,w[]):
+  t2 = t * t
+  mt = 1-t
+  mt2 = mt * mt
+  return w[0]*mt2 + w[1]*2*mt*t + w[2]*t2
+
+function Bezier(3,t,w[]):
+  t2 = t * t
+  t3 = t2 * t
+  mt = 1-t
+  mt2 = mt * mt
+  mt3 = mt2 * mt
+  return w[0]*mt3 + 3*w[1]*mt2*t + 3*w[2]*mt*t2 + w[3]*t3
+```
+
+And now we know how to program the weighted basis function.
+
+</div>

chapters/control/content.ja-JP.md

@@ -0,0 +1,75 @@
+# ベジエ曲線の曲率の制御
+
+ベジエ曲線は（すべての「スプライン」と同様に）補間関数です。これは点の集合を受け取って、それらの点のどこか「内側」の値を生成するということです。（このことから、制御点同士を結んで輪郭をつくったとき、その外側に位置する点は決して生成されないことがわかります。なお、この輪郭を曲線の「包」と呼びます。お役立ち情報でした！）実際に、補間関数によって生成された値に対する、各点の寄与の大きさを可視化することができますが、これを見れば、ベジエ曲線のどの場所でどの点が重要になるのかがわかります。
+
+下のグラフは、2次ベジエ曲線や3次ベジエ曲線の補間関数を表しています。ここでSは、ベジエ関数全体に対しての、その点の寄与の大きさを示します。ある<i>t</i>において、ベジエ曲線を定義する各点の補間率がどのようになっているのか、クリックやドラッグをして確かめてみてください。
+
+<div className="figure">
+  <Graphic inline={true} title="2次の補間" draw={this.drawQuadraticLerp}/>
+  <Graphic inline={true} title="3次の補間" draw={this.drawCubicLerp}/>
+  <Graphic inline={true} title="15次の補間" draw={this.draw15thLerp}/>
+</div>
+
+あわせて、15次ベジエ関数における補間関数も示しています。始点と終点は他の制御点と比較して、曲線の形に対してかなり大きな影響を与えていることがわかります。
+
+曲線を変更したい場合は、各点の重みを変える（実質的には補間率を変える）必要があります。これはとても単純で、寄与の大きさを変えるための値を、各点にただ掛ければいいのです。この値は「重み」と呼ばれていますが、これを元のベジエ関数に組み込めば、次のようになります。
+
+\[
+  Bézier(n,t) = \sum_{i=0}^{n}
+                \underset{二項係数部分の項}{\underbrace{\binom{n}{i}}}
+                \cdot\
+                \underset{多項式部分の項}{\underbrace{(1-t)^{n-i} \cdot t^{i}}}
+                \cdot\
+                \underset{重み}{\underbrace{w_i}}
+\]
+
+複雑そうに見えますが、運がいいことに「重み」というのは実はただの座標値です。というのは<i>n</i>次の曲線の場合、w<sub>0</sub>が始点の座標、w<sub>n</sub>が終点の座標となり、その間はどれも制御点の座標になります。例えば、始点が(120,160)、制御点が(35,200)と(220,260)、終点が(220,40)となる3次ベジエ曲線は、次のようになります。
+
+\[
+\left \{ \begin{matrix}
+  x = BLUE[120] \cdot (1-t)^3 + BLUE[35] \cdot 3 \cdot (1-t)^2 \cdot t + BLUE[220] \cdot 3 \cdot (1-t) \cdot t^2 + BLUE[220] \cdot t^3 \\
+  y = BLUE[160] \cdot (1-t)^3 + BLUE[200] \cdot 3 \cdot (1-t)^2 \cdot t + BLUE[260] \cdot 3 \cdot (1-t) \cdot t^2 + BLUE[40] \cdot t^3
+\end{matrix} \right.
+\]
+
+この式からは、記事の冒頭に出てきた曲線が得られます。
+
+<Graphic title="あの3次ベジエ曲線" setup={this.drawCubic} draw={this.drawCurve}/>
+
+ベジエ曲線で、他にはどんなことができるでしょうか？実は、非常にたくさんのことが可能です。この記事の残りの部分では、実現可能な各種操作や適用可能なアルゴリズム、そしてこれによって達成できるタスクについて扱います。
+
+<div className="howtocode">
+
+### 重みつき基底関数の実装方法
+
+基底関数の実装方法はすでに知っていますし、これに制御点を組み込むのは非常に簡単です。
+
+```
+function Bezier(n,t,w[]):
+  sum = 0
+  for(k=0; k<n; k++):
+    sum += w[k] * binomial(n,k) * (1-t)^(n-k) * t^(k)
+  return sum
+```
+
+そして、最適化を行ったバージョンは以下のようになります。
+
+```
+function Bezier(2,t,w[]):
+  t2 = t * t
+  mt = 1-t
+  mt2 = mt * mt
+  return w[0]*mt2 + w[1]*2*mt*t + w[2]*t2
+
+function Bezier(3,t,w[]):
+  t2 = t * t
+  t3 = t2 * t
+  mt = 1-t
+  mt2 = mt * mt
+  mt3 = mt2 * mt
+  return w[0]*mt3 + 3*w[1]*mt2*t + 3*w[2]*mt*t2 + w[3]*t3
+```
+
+これで、重みつき基底関数をプログラムする方法がわかりました。
+
+</div>

chapters/control/content.zh-CN.md

@@ -0,0 +1,75 @@
+# 控制贝塞尔的曲率
+
+贝塞尔曲线是插值方程（就像所有曲线一样），这表示它们取一系列的点，生成一些处于这些点之间的值。（一个推论就是你永远无法生成一个位于这些控制点轮廓线外面的点，更普遍是称为曲线的外壳。这信息很有用！）实际上，我们可以将每个点对方程产生的曲线做出的贡献进行可视化，因此可以看出曲线上哪些点是重要的，它们处于什么位置。
+
+下面的图形显示了二次曲线和三次曲线的差值方程，“S”代表了点对贝塞尔方程总和的贡献。点击或拖动点来看看在特定的<i>t</i>值时，每个曲线定义的点的插值百分比。
+
+<div className="figure">
+  <Graphic inline={true} title="二次插值"  draw={this.drawQuadraticLerp}/>
+  <Graphic inline={true} title="三次插值"      draw={this.drawCubicLerp}/>
+  <Graphic inline={true} title="15次插值" draw={this.draw15thLerp}/>
+</div>
+
+上面有一张是15<sup>th</sup>阶的插值方程。如你所见，在所有控制点中，起点和终点对曲线形状的贡献比其他点更大些。
+
+如果我们要改变曲线，就需要改变每个点的权重，有效地改变插值。可以很直接地做到这个：只要用一个值乘以每个点，来改变它的强度。这个值照惯例称为“权重”，我们可以将它加入我们原始的贝塞尔函数：
+
+\[
+  Bézier(n,t) = \sum_{i=0}^{n}
+                \underset{binomial\ term}{\underbrace{\binom{n}{i}}}
+                \cdot\
+                \underset{polynomial\ term}{\underbrace{(1-t)^{n-i} \cdot t^{i}}}
+                \cdot\
+                \underset{weight}{\underbrace{w_i}}
+\]
+
+看起来很复杂，但实际上“权重”只是我们想让曲线所拥有的坐标值：对于一条n<sup>th</sup>阶曲线，w<sup>0</sup>是起始坐标，w<sup>n</sup>是终点坐标，中间的所有点都是控制点坐标。假设说一条曲线的起点为（120，160），终点为（220，40），并受点（35，200）和点（220，260）的控制，贝塞尔曲线方程就为：
+
+\[
+\left \{ \begin{matrix}
+  x = BLUE[120] \cdot (1-t)^3 + BLUE[35] \cdot 3 \cdot (1-t)^2 \cdot t + BLUE[220] \cdot 3 \cdot (1-t) \cdot t^2 + BLUE[220] \cdot t^3 \\
+  y = BLUE[160] \cdot (1-t)^3 + BLUE[200] \cdot 3 \cdot (1-t)^2 \cdot t + BLUE[260] \cdot 3 \cdot (1-t) \cdot t^2 + BLUE[40] \cdot t^3
+\end{matrix} \right.
+\]
+
+这就是我们在文章开头看到的曲线：
+
+<Graphic title="我们的三次贝塞尔曲线" setup={this.drawCubic} draw={this.drawCurve}/>
+
+我们还能对贝塞尔曲线做些什么？实际上还有很多。文章接下来涉及到我们可能运用到的一系列操作和算法，以及它们可以完成的任务。
+
+<div className="howtocode">
+
+### 如何实现权重基本函数
+
+鉴于我们已经知道怎样实现基本函数，在其加入控制点是非常简单的：
+
+```
+function Bezier(n,t,w[]):
+  sum = 0
+  for(k=0; k<n; k++):
+    sum += w[k] * binomial(n,k) * (1-t)^(n-k) * t^(k)
+  return sum
+```
+
+下面是优化过的版本：
+
+```
+function Bezier(2,t,w[]):
+  t2 = t * t
+  mt = 1-t
+  mt2 = mt * mt
+  return w[0]*mt2 + w[1]*2*mt*t + w[2]*t2
+
+function Bezier(3,t,w[]):
+  t2 = t * t
+  t3 = t2 * t
+  mt = 1-t
+  mt2 = mt * mt
+  mt3 = mt2 * mt
+  return w[0]*mt3 + 3*w[1]*mt2*t + 3*w[2]*mt*t2 + w[3]*t3
+```
+
+现在我们知道如何编程实现基本权重函数了。
+
+</div>

chapters/control/handler.js

@@ -0,0 +1,159 @@
+module.exports = {
+  drawCubic: function(api) {
+    var curve = api.getDefaultCubic();
+    api.setCurve(curve);
+  },
+
+  drawCurve: function(api, curve) {
+    api.reset();
+    api.drawSkeleton(curve);
+    api.drawCurve(curve);
+  },
+
+  drawFunction: function(api, label, where, generator) {
+    api.setRandomColor();
+    api.drawFunction(generator);
+    api.setFill(api.getColor());
+    if (label) api.text(label, where);
+  },
+
+  drawLerpBox: function(api, dim, pad, p) {
+    api.noColor();
+    api.setFill("rgba(0,0,100,0.2)");
+    var p1 = {x: p.x-5, y:pad},
+        p2 = {x:p.x + 5, y:dim};
+    api.drawRect(p1, p2);
+    api.setColor("black");
+  },
+
+  drawLerpPoint: function(api, tf, pad, fwh, p) {
+    p.y = pad + tf*fwh;
+    api.drawCircle(p, 3);
+    api.setFill("black");
+    api.text(((tf*10000)|0)/100 + "%", {x:p.x+10, y:p.y+4});
+    api.noFill();
+  },
+
+  drawQuadraticLerp: function(api) {
+    api.reset();
+
+    var dim = api.getPanelWidth(),
+        pad = 20,
+        fwh = dim - pad*2;
+
+    api.drawAxes(pad, "t",0,1, "S","0%","100%");
+
+    var p = api.hover;
+    if (p && p.x >= pad && p.x <= dim-pad) {
+      this.drawLerpBox(api, dim, pad, p);
+      var t = (p.x-pad)/fwh;
+      this.drawLerpPoint(api, (1-t)*(1-t), pad, fwh, p);
+      this.drawLerpPoint(api, 2*(1-t)*(t), pad, fwh, p);
+      this.drawLerpPoint(api, (t)*(t), pad, fwh, p);
+    }
+
+    this.drawFunction(api, "first term", {x: pad*2, y: fwh}, function(t) {
+      return {
+        x: pad + t * fwh,
+        y: pad + fwh * (1-t) * (1-t)
+      };
+    });
+    this.drawFunction(api, "second term", {x: dim/2 - 1.5*pad, y: dim/2 + pad}, function(t) {
+      return {
+        x: pad + t * fwh,
+        y: pad + fwh * 2 * (1-t) * (t)
+      };
+    });
+    this.drawFunction(api, "third term", {x: fwh - pad*2.5, y: fwh}, function(t) {
+      return {
+        x: pad + t * fwh,
+        y: pad + fwh * (t) * (t)
+      };
+    });
+  },
+
+  drawCubicLerp: function(api) {
+    api.reset();
+
+    var dim = api.getPanelWidth(),
+        pad = 20,
+        fwh = dim - pad*2;
+
+    api.drawAxes(pad, "t",0,1, "S","0%","100%");
+
+    var p = api.hover;
+    if (p && p.x >= pad && p.x <= dim-pad) {
+      this.drawLerpBox(api, dim, pad, p);
+      var t = (p.x-pad)/fwh;
+      this.drawLerpPoint(api, (1-t)*(1-t)*(1-t), pad, fwh, p);
+      this.drawLerpPoint(api, 3*(1-t)*(1-t)*(t), pad, fwh, p);
+      this.drawLerpPoint(api, 3*(1-t)*(t)*(t), pad, fwh, p);
+      this.drawLerpPoint(api, (t)*(t)*(t), pad, fwh, p);
+    }
+
+    this.drawFunction(api, "first term", {x: pad*2, y: fwh}, function(t) {
+      return {
+        x: pad + t * fwh,
+        y: pad + fwh * (1-t) * (1-t) * (1-t)
+      };
+    });
+    this.drawFunction(api, "second term", {x: dim/2 - 4*pad, y: dim/2 }, function(t) {
+      return {
+        x: pad + t * fwh,
+        y: pad + fwh * 3 * (1-t) * (1-t) * (t)
+      };
+    });
+    this.drawFunction(api, "third term", {x: dim/2 + 2*pad, y: dim/2}, function(t) {
+      return {
+        x: pad + t * fwh,
+        y: pad + fwh * 3 * (1-t) * (t) * (t)
+      };
+    });
+    this.drawFunction(api, "fourth term", {x: fwh - pad*2.5, y: fwh}, function(t) {
+      return {
+        x: pad + t * fwh,
+        y: pad + fwh * (t) * (t) * (t)
+      };
+    });
+  },
+
+  draw15thLerp: function(api) {
+    api.reset();
+
+    var dim = api.getPanelWidth(),
+        pad = 20,
+        fwh = dim - pad*2;
+
+    api.drawAxes(pad, "t",0,1, "S","0%","100%");
+
+    var factors = [1,15,105,455,1365,3003,5005,6435,6435,5005,3003,1365,455,105,15,1];
+
+    var p = api.hover, n;
+    if (p && p.x >= pad && p.x <= dim-pad) {
+      this.drawLerpBox(api, dim, pad, p);
+      for(n=0; n<=15; n++) {
+        var t = (p.x-pad)/fwh,
+            tf = factors[n] * Math.pow(1-t, 15-n) * Math.pow(t, n);
+        this.drawLerpPoint(api, tf, pad, fwh, p);
+      }
+    }
+
+    for(n=0; n<=15; n++) {
+      var label = false, position = false;
+      if (n===0) {
+        label = "first term";
+        position = {x: pad + 5, y: fwh};
+      }
+      if (n===15) {
+        label = "last term";
+        position = {x: dim - 3.5*pad, y: fwh};
+      }
+      this.drawFunction(api, label, position, function(t) {
+        return {
+          x: pad + t * fwh,
+          y: pad + fwh * factors[n] * Math.pow(1-t, 15-n) * Math.pow(t, n)
+        };
+      });
+    }
+  }
+};

chapters/control/index.js

@@ -0,0 +1,3 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+module.exports = generateBase("control", handler);

chapters/curvature/content.en-GB.md

@@ -0,0 +1,71 @@
+# Curvature of a curve
+
+Imagine we have two curves, and we want to line them in up in a way that "looks right". What would we use as metric to let a computer decide what "looks right" means? For instance, we can start by ensuring that the two curves share an end coordinate, so that there is no "gap" between leaving one curve and entering the next, but that won't guarantee that things look right: both curves can be going in wildly different directions, and the resulting joined geometry will have a corner in it, rather than a smooth transition from one curve to the next. What we want is to ensure that the [_curvature_](https://en.wikipedia.org/wiki/Curvature) at the transition from one curve to the next "looks good". So, we could have them share an end coordinate, and then ensure that the derivatives for both curves match at that coordinate, and at a casual glance, that seems the perfect solution: if we make the derivatives match, then both the "direction" in which we travel from one curve to the next is the same, and the "speed" at which we travel the curve will be the same.
+
+Problem solved!
+
+But, if we think about this a little more, this cannot possible work, because of something that you may have noticed in the section on [reordering curves](#reordering): what a curve looks like, and the function that draws that curve, are not in some kind of universal, fixed, one-to-one relation. If we have some quadratic curve, then simply by raising the curve order we can get corresponding cubic, quartic, and higher and higher mathematical expressions that all draw the _exact same curve_ but with wildly different derivatives. So: if we want to make a transition from one curve to the next look good, and we want to use the derivative, then we suddenly need to answer the question: "Which derivative?".
+
+How would you even decide? What makes the cubic derivatives better or less suited than, say, quintic derivatives? Wouldn't it be nicer if we could use something that was inherent to the curve, without being tied to the functions that yield that curve? And (of course) as it turns out, there is a way to define curvature in such a way that it only relies on what the curve actually looks like, and given where this section is in the larger body of this Primer, it should hopefully not be surprising that we thing we can use to define curvature is the thing we talked about in the previous section: arc length.
+
+Intuitively, this should make sense, even if we have no idea what the maths would look like: if we travel some fixed distance along some curve, then the point at that distance is simply the point at that distance. It doesn't matter what function we used to draw the curve: once we know what the curve looks like, the function(s) used to draw it become irrelevant: a point a third along the full distance of the curve is simply the point a third along the distance of the curve.
+
+You might think that in order to find the curvature of a curve, we now need to find and then solve the arc length function, and that would be a problem because we just saw that there is no way to actually do that: don't worry, we don't. We do need to know the _form_ of the arc length function, which we saw above, but it's not the thing we're actually interested in, and we're going to be rewriting it in a way that makes most of the crazy complex things about it just... disappear.
+
+In fact, after [running through the steps necessary](http://mathworld.wolfram.com/Curvature.html) to determine what we're left with if we use the arclength function's derivative (with another run-through of the maths [here](https://math.stackexchange.com/a/275324/71940)), rather than the curve's original function's derivative, then the integral disappears entirely (because of the [fundamental therem of calculus](https://en.wikipedia.org/wiki/Fundamental_theorem_of_calculus)), and we're left with some surprisingly simple maths that relates curvature (denoted as κ, "kappa") to—and this is the truly surprising bit—a specific combination of derivatives of our original function.
+
+Let me just highlight that before we move on: we calculate the curvature of a curve using the arc length function derivative, because the original function's derivative is entirely unreliable, and in doing so we end up with a formula that expresses curvature in terms of the original function's derivatives.
+
+*That's crazy!*
+
+But, that's what makes maths such an interesting thing: it can show you that all your assumptions are completely wrong, only to then go "but actually, you were on the right track all along, here: ..." with a solution that is so easy to work with as to almost seem mundane. So: enough of all this text, how do we calculate curvature? What is the function for κ? Concisely, the function is this:
+
+\[
+  \kappa = \frac{{x}'{y}'' - {x}''{y}'}{({x}'^2+{y}'^2)^{\frac{3}{2}}}
+\]
+
+Which is really just a "short form" that glosses over the fact that we're dealing with functions:
+
+\[
+  \kappa(t) = \frac{{B_x}'(t){B_y}''(t) - {B_x}''(t){B_y}'(t)}{({B_x}'(t)^2+{B_y}'(t)^2)^{\frac{3}{2}}}
+\]
+
+And while that's a litte more verbose, it's still just as simple to work with as the first function: the curvature at some point on any (and this cannot be overstated: _any_) curve is a ratio between the first and second derivative cross product, and something that looks oddly similar to the standard Euclidean distance function. And nothing in these functions is hard to calculate either: for Bézier curves, simply knowing our curve coordinates means [we know what the first and second derivatives are](#derivatives), and so evaluating this function for any **t** value is just a matter of basic arithematics.
+
+<div className="howtocode">
+
+### Implement the kappa function
+
+In fact, let's just implement it right now:
+
+```
+function kappa(t, B):
+  d = B.getDerivative()
+  dd = d.getDerivative()
+  dx = d.getX(t)
+  dy = d.getY(t)
+  ddx = dd.getX(t)
+  ddy = dd.getY(t)
+  numerator = dx * ddy - ddx * dy
+  denominator = pow(dx*dx + dy*dy, 1.5)
+  return numerator / denominator
+```
+That was easy!
+
+In fact, it stays easy because we can also compute the associated "radius of curvature", which gives us the implicit circle that "fits" the curve's curvature at any point, using what is possibly the simplest relation in this entire primer:
+
+\[
+  R(t) = \frac{1}{\kappa(t)}
+\]
+
+So that's a rather convenient fact to know, too.
+
+</div>
+
+So with all of that covered, let's line up some curves! The following graphic gives you two curves that look identical, but use quadratic and cubic functions, respectively. As you can see, despite their derivatives being necessarily different, their curvature (thanks to being derived based on maths that "ignores" specific function derivative, and instead gives a formulat that smooths out any differences) is exactly the same. And because of that, we can put them together such that the point where they overlap has the same curvature for both curves, giving us the smoothest looking transition we could ask for.
+
+<Graphic title="Matching curvatures for a quadratic and cubic Bézier curve" setup={this.setup} draw={this.draw} />
+
+One thing you may have noticed in this sketch is that sometimes the curvature looks fine, but seems to be pointing in the wrong direction, making it hard to line up the curves properly. In your code you typically solve this by matching absolute values, but that's not super easy to program visually... however, we _can_ just show the curvature on both sides of the curve, making lining things up a bit easier:
+
+<Graphic title="(Easier) curvature matching for a quadratic and cubic Bézier curve" setup={this.setup} draw={this.drawOmni} />

chapters/curvature/handler.js

@@ -0,0 +1,70 @@
+module.exports = {
+  setup: function(api) {
+    let d = api.defaultWidth;
+    api.setSize(d*3, api.defaultHeight);
+
+    // Set up two curves with identical form, but different functions:
+    var q = this.q = new api.Bezier(115, 250, 10, 35, 190, 45);
+    var c = this.c = q.raise();
+    q.points.forEach(p => (p.x += d/2));
+    c.points.forEach(p => (p.x += 3*d/2));
+
+    // And "fake" a master curve that we'll never draw, but which
+    // will allow us to move interact with the curve points.
+    api.setCurve({
+      points: q.points.concat(c.points)
+    });
+  },
+
+  updateCurves(api, curve) {
+    // update the quadratic and cubic curves by grabbing
+    // whatever the points in our "fake" master curve are
+
+    let q = this.q;
+    q.points = curve.points.slice(0,3);
+    q.update();
+
+    let c = this.c;
+    c.points = curve.points.slice(3,7);
+    c.update();
+  },
+
+  drawCurvature(api, curve, omni) {
+    api.drawSkeleton(curve);
+    api.drawCurve(curve);
+
+    var s, t, p, n, c, ox, oy;
+    for( s=0; s<256; s++) {
+      // Draw the curvature as a coloured line at the
+      // current point, along the normal.
+      api.setColor('rgba(255,127,'+s+',0.6)');
+      t = s/255;
+      p = curve.get(t);
+      n = curve.normal(t);
+      c = curve.curvature(t);
+      ox = c.k * n.x;
+      oy = c.k * n.y;
+      api.drawLine(p, { x: p.x + ox, y: p.y + oy });
+
+      // And if requested, also draw it along the anti-normal.
+      if (omni) {
+        api.setColor('rgba('+s+',127,255,0.6)');
+        api.drawLine(p, { x: p.x - ox, y: p.y - oy });
+      }
+    }
+  },
+
+  proxyDraw: function(api, curve, omni) {
+    api.reset();
+    this.updateCurves(api, curve);
+    [this.q, this.c].forEach(curve => this.drawCurvature(api, curve, omni));
+  },
+
+  draw: function(api, curve) {
+    this.proxyDraw(api, curve);
+  },
+
+  drawOmni: function(api, curve) {
+    this.proxyDraw(api, curve, true);
+  }
+};

chapters/curvature/index.js

@@ -0,0 +1,3 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+module.exports = generateBase("curvature", handler);

chapters/curvefitting/comments.txt

@@ -0,0 +1,3 @@
+## Additionals
+
+http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.96.5193&rep=rep1&type=pdf ?

chapters/curvefitting/content.en-GB.md

@@ -0,0 +1,261 @@
+# Curve fitting
+
+Given the previous section, one question you might have is "what if I don't want to guess `t` values?". After all, plenty of graphics packages do automated curve fitting, so how can we implement that in a way that just finds us reasonable `t` values all on its own?
+
+And really this is just a variation on the question "how do I get the curve through these X points?", so let's look at that. Specifically, let's look at the answer: "curve fitting". This is in fact a rather rich field in geometry, applying to anything from data modelling to path abstraction to "drawing", so there's a fair number of ways to do curve fitting, but we'll look at one of the most common approaches: something called a [least squares](https://en.wikipedia.org/wiki/Least_squares) [polynomial regression](https://en.wikipedia.org/wiki/Polynomial_regression). In this approach, we look at the number of points we have in our data set, roughly determine what would be an appropriate order for a curve that would fit these points, and then tackle the question "given that we want an `nth` order curve, what are the coordinates we can find such that our curve is "off" by the least amount?".
+
+Now, there are many ways to determine how "off" points are from the curve, which is where that "least squares" term comes in. The most common tool in the toolbox is to minimise the _squared distance_ between each point we have, and the corresponding point on the curve we end up "inventing". A curve with a snug fit will have zero distance between those two, and a bad fit will have non-zero distances between every such pair. It's a workable metric. You might wonder why we'd need to square, rather than just ensure that distance is a positive value (so that the total error is easy to compute by just summing distances) and the answer really is "because it tends to be a little better". There's lots of literature on the web if you want to deep-dive the specific merits of least squared error metrics versus least absolute error metrics, but those are <em>well</em> beyond the scope of this material.
+
+So let's look at what we end up with in terms of curve fitting if we start with the idea of performing least squares Bézier fitting. We're going to follow a procedure similar to the one described by Jim Herold over on his ["Least Squares Bézier Fit"](https://web.archive.org/web/20180403213813/http://jimherold.com/2012/04/20/least-squares-bezier-fit/) article, and end with some nice interactive graphics for doing some curve fitting.
+
+Before we begin, we're going to use the curve in matrix form. In the [section on matrices](#matrix), I mentioned that some things are easier if we use the matrix representation of a Bézier curve rather than its calculus form, and this is one of those things.
+
+As such, the first step in the process is expressing our Bézier curve as powers/coefficients/coordinate matrix **T x M x C**, by expanding the Bézier functions.
+
+<div className="note">
+
+## Revisiting the matrix representation
+
+Rewriting Bézier functions to matrix form is fairly easy, if you first expand the function, and then arrange them into a multiple line form, where each line corresponds to a power of t, and each column is for a specific coefficient. First, we expand the function:
+
+\[
+  \begin{aligned}
+    B_{quadratic} & = a (1-t)^2 + 2 b (1-t) t + c t^2 \\
+                  & = a - 2at + at^2 + 2bt - 2bt^2 + ct^2
+  \end{aligned}
+\]
+
+And then we (trivially) rearrange the terms across multiple lines:
+
+\[
+  \begin{aligned}
+    B_{quadratic} &=& a      &         &     \\
+                  & & - 2at  & + 2bt   &     \\
+                  & & + at^2 & - 2bt^2 & + ct^2
+  \end{aligned}
+\]
+
+This rearrangement has "factors of t" at each row (the first row is t⁰, i.e. "1", the second row is t¹, i.e. "t", the third row is t²) and "coefficient" at each column (the first column is all terms involving "a", the second all terms involving "b", the third all terms involving "c").
+
+With that arrangement, we can easily decompose this as a matrix multiplication:
+
+\[
+  \begin{aligned}
+    B_{quadratic} &= T \cdot M \cdot C
+      =
+      \begin{bmatrix}1 & t & t^2 \end{bmatrix}
+      \cdot
+      \begin{bmatrix}
+         a &  0 & 0 \\
+       -2a & 2b & 0 \\
+         a &-2b & c
+      \end{bmatrix}
+      =
+      \begin{bmatrix}1 & t & t^2 \end{bmatrix}
+      \cdot
+      \begin{bmatrix}
+         1 & 0 & 0 \\
+        -2 & 2 & 0 \\
+         1 &-2 & 1
+      \end{bmatrix}
+      \cdot
+      \begin{bmatrix}a  \\ b \\ c \end{bmatrix}
+  \end{aligned}
+\]
+
+We can do the same for the cubic curve, of course. We know the base function for cubics:
+
+\[
+  \begin{aligned}
+    B_{cubic} & = & a(1-t)^3 + 3b(1-t)^2 t + 3c(1-t)t^2 + dt^3
+  \end{aligned}
+\]
+
+So we write out the expansion and rearrange:
+
+\[
+  \begin{aligned}
+    B_{cubic} & = & a        &          &          &   \\
+              &   & - 3at    & + 3bt    &          &   \\
+              &   & + 3at^2  & - 6bt^2  & +3ct^2   &   \\
+              &   & - at^3   & + 3bt^3  & -3ct^3   & + dt^3
+  \end{aligned}
+\]
+
+Which we can then decompose:
+
+\[
+  \begin{aligned}
+    B_{cubic} &= T \cdot M \cdot C =
+      \begin{bmatrix}1 & t & t^2 & t^3 \end{bmatrix}
+      \cdot
+      \begin{bmatrix}
+        1 & 0 & 0 & 0 \\
+       -3 & 3 & 0 & 0 \\
+        3 &-6 & 3 & 0 \\
+       -1 & 3 &-3 & 1
+      \end{bmatrix}
+      \cdot
+      \begin{bmatrix}a  \\ b \\ c \\ d \end{bmatrix}
+  \end{aligned}
+\]
+
+And, of course, we can do this for quartic curves too (skipping the expansion step):
+
+\[
+  \begin{aligned}
+    B_{quartic} &= T \cdot M \cdot C =
+      \begin{bmatrix}1 & t & t^2 & t^3 & t^4 \end{bmatrix}
+      \cdot
+      \begin{bmatrix}
+        1 &   0 &   0 &  0 & 0 \\
+       -4 &   4 &   0 &  0 & 0 \\
+        6 & -12 &   6 &  0 & 0 \\
+       -4 &  12 & -12 &  4 & 0 \\
+        1 &  -4 &   6 & -4 & 1
+      \end{bmatrix}
+      \cdot
+      \begin{bmatrix}a  \\ b \\ c \\ d \\ e \end{bmatrix}
+  \end{aligned}
+\]
+
+And so and on so on. Now, let's see how to use these **T**, **M**, and **C**, to do some curve fitting.
+
+</div>
+
+Let's get started: we're going to assume we picked the right order curve: for `n` points we're fitting an `n-1`<sup>th</sup> order curve, so we "start" with a vector **P** that represents the coordinates we already know, and for which we want to do curve fitting:
+
+\[
+  P = \begin{bmatrix} p_1 \\ p_2 \\ ... \\ p_n \end{bmatrix}
+\]
+
+Next, we need to figure out appropriate `t` values for each point in the curve, because we need something that lets us tie "the actual coordinate" to "some point on the curve". There's a fair number of different ways to do this (and a large part of optimizing "the perfect fit" is about picking appropriate `t` values), but in this case let's look at two "obvious" choices:
+
+1. equally spaced `t` values, and
+2. `t` values that align with distance along the polygon.
+
+The first one is really simple: if we have `n` points, then we'll just assign each point `i` a `t` value of `(i-1)/(n-1)`. So if we have four points, the first point will have `t=(1-1)/(4-1)=0/3`, the second point will have `t=(2-1)/(4-1)=1/3`, the third point will have `t=2/3`, and the last point will be `t=1`. We're just straight up spacing the `t` values to match the number of points we have.
+
+The second one is a little more interesting: since we're doing polynomial regression, we might as well exploit the fact that our base coordinates just constitute a collection of line segments. At the first point, we're fixing t=0, and the last point, we want t=1, and anywhere in between we're simply going to say that `t` is equal to the distance along the polygon, scaled to the [0,1] domain.
+
+To get these values, we first compute the general "distance along the polygon" matrix:
+
+\[
+  D = \begin{bmatrix}d_1 & d_2 & ... & d_n \end{bmatrix}, \textit{ where }
+  \left \{
+  \begin{matrix}
+    d_1 = 0 \\
+    d_i = d_{i-1} + \textit{length}(p_{i-1}, p_i)
+  \end{matrix}
+  \right.
+\]
+
+Where  `length()` is literally just that: the length of the line segment between the point we're looking at, and the previous point. This isn't quite enough, of course: we still need to make sure that all the values between `i=1` and `i=n` fall in the [0,1] interval, so we need to scale all values down by whatever the total length of the polygon is:
+
+\[
+  \begin{aligned}
+    S = \begin{bmatrix}s_1 & s_2 & ... & s_n \end{bmatrix}, \textit{ where }
+  \left \{
+  \begin{matrix}
+    s_1 = 0 \\
+    s_i = d_i / d_n \\
+    s_n = 1
+  \end{matrix}
+  \right.
+  \end{aligned}
+\]
+
+And now we can move on to the actual "curve fitting" part: what we want is a function that lets us compute "ideal" control point values such that if we build a Bézier curve with them, that curve passes through all our original points. Or, failing that, have an overall error distance that is as close to zero as we can get it. So, let's write out what the error distance looks like.
+
+As mentioned before, this function is really just "the distance between the actual coordinate, and the coordinate that the curve evaluates to for the associated `t` value", which we'll square to get rid of any pesky negative signs:
+
+\[
+  E(C)_i = \left ( p_i - Bézier(s_i) \right )^2
+\]
+
+Since this function only deals with individual coordinates, we'll need to sum over all coordinates in order to get the full error function. So, we literally just do that; the total error function is simply the sum of all these individual errors:
+
+\[
+  E(C) = \sum^n_{i=1} \left ( p_i - Bézier(s_i) \right )^2
+\]
+
+And here's the trick that justifies using matrices: while we can work with individual values using calculus, with matrices we can compute as many values as we make our matrices big, all at the "same time", We can replace the individual terms p<sub>i</sub> with the full **P** coordinate matrix, and we can replace Bézier(s<sub>i</sub>) with the matrix representation **T x M x C** we talked about before, which gives us:
+
+\[
+  E(C) = \left ( P - TMC \right )^2
+\]
+
+In which we can replace the rather cumbersome "squaring" operation with a more conventional matrix equivalent:
+
+\[
+  E(C) = \left ( P - TMC \right )^T \left ( P - TMC \right )
+\]
+
+Here, the letter `T` is used instead of the number 2, to represent the [matrix transpose](https://en.wikipedia.org/wiki/Transpose); each row in the original matrix becomes a column in the transposed matrix instead (row one becomes column one, row two becomes column two, and so on).
+
+This leaves one problem: **T** isn't actually the matrix we want: we don't want symbolic `t` values, we want the actual numerical values that we computed for **S**, so we need to form a new matrix, which we'll call 𝕋, that makes use of those, and then use that 𝕋 instead of **T** in our error function:
+
+\[
+𝕋 = \begin{bmatrix}
+ s^0_1 & s^1_1 & ... & s^{n-2}_1 & s^{n-1}_1 \\
+       &       &     &     &        \\
+\vdots &       & ... &     & \vdots \\
+       &       &     &     &        \\
+ s^0_n & s^1_n & ... & s^{n-2}_n &  s^{n-1}_n
+\end{bmatrix}
+\]
+
+Which, because of the first and last values in **S**, means:
+
+\[
+𝕋 = \begin{bmatrix}
+ 1      &       0 & ... &             0 &             0 \\
+ 1      &     s_2 &    &     s^{n-2}_2 &     s^{n-1}_2 \\
+ \vdots &         & ... &               &        \vdots \\
+ 1      & s_{n-1} &    & s^{n-2}_{n-1} & s^{n-1}_{n-1} \\
+ 1      &       1 & ... &             1 &             1
+\end{bmatrix}
+\]
+
+Now we can properly write out the error function as matrix operations:
+
+\[
+  E(C) = \left ( P - 𝕋MC \right )^T \left ( P - 𝕋MC \right )
+\]
+
+So, we have our error function: we now need to figure out the expression for where that function has minimal value, e.g. where the error between the true coordinates and the coordinates generated by the curve fitting is smallest. Like in standard calculus, this requires taking the derivative, and determining where that derivative is zero:
+
+\[
+  \frac{\partial E}{\partial C} = 0 = -2𝕋^T \left ( P - 𝕋MC \right )
+\]
+
+<div className="note">
+  ## Where did this derivative come from?
+
+  That... is a good question. In fact, when trying to run through this approach, I ran into the same question! And you know what? I straight up had no idea. I'm decent enough at calculus, I'm decent enough at linear algebra, and I just don't know.
+
+  So I did what I always do when I don't understand something: I asked someone to help me understand how things work. In this specific case, I [posted a question](https://math.stackexchange.com/questions/2825438) to [Math.stackexchange](https://math.stackexchange.com), and received a answer that goes into way more detail than I had hoped to receive.
+
+  Is that answer useful to you? Probably: no. At least, not unless you like understanding maths on a recreational level. And I do mean maths in general, not just basic algebra. But it does help in giving us a reference in case you ever wonder "Hang on. Why was that true?". There are answers. They might just require some time to come to understand.
+</div>
+
+Now, given the above derivative, we can rearrange the terms (following the rules of matrix algebra) so that we end up with an expression for **C**:
+
+\[
+  C = M^{-1} \left ( 𝕋^T 𝕋 \right )^{-1} 𝕋^T P
+\]
+
+Here, the "to the power negative one" is the notation for the [matrix inverse](https://en.wikipedia.org/wiki/Invertible_matrix). But that's all we have to do: we're done. Starting with **P** and inventing some `t` values based on the polygon the coordinates in **P** define, we can compute the corresponding Bézier coordinates **C** that specify a curve that goes through our points. Or, if it can't go through them exactly, as near as possible.
+
+So before we try that out, how much code is involved in implementing this? Honestly, that answer depends on how much you're going to be writing yourself. If you already have a matrix maths library available, then really not that much code at all. On the other hand, if you are writing this from scratch, you're going to have to write some utility functions for doing your matrix work for you, so it's really anywhere from 50 lines of code to maybe 200 lines of code. Not a bad price to pay for being able to fit curves to prespecified coordinates.
+
+So let's try it out! The following graphic lets you place points, and will start computing exact-fit curves once you've placed at least three. You can click for more points, and the code will simply try to compute an exact fit using a Bezier curve of the appropriate order. Four points? Cubic Bezier. Five points? Quartic. And so on. Of course, this does break down at some point: depending on where you place your points, it might become mighty hard for the fitter to find an exact fit, and things might actually start looking horribly off once you hit 10<sup>th</sup> or higher order curves. But it might not!
+
+<div className="figure">
+  <Graphic title="Fitting a Bézier curve" setup={this.setup} draw={this.draw} onClick={this.onClick}>
+    <button onClick={this.toggle} style="position:absolute; right: 0;">toggle</button>
+    <SliderSet ref={ set => (this.sliders=set) } onChange={this.processTimeUpdate} />
+  </Graphic>
+</div>
+
+You'll note there is a convenient "toggle" buttons that lets you toggle between equidistance `t` values, and distance ratio along the polygon. Arguably more interesting is that once you have points to abstract a curve, you also get <em>direct control</em> over the time values through sliders for each, because if the time values are our degree of freedom, you should be able to freely manipulate them and see what the effect on your curve is.

chapters/curvefitting/handler.js

@@ -0,0 +1,87 @@
+var fit = require('../../../lib/curve-fitter.js');
+
+module.exports = {
+  setup: function(api) {
+    this.api = api;
+    api.noDrag = true; // do not allow points to be dragged around
+    this.reset();
+  },
+
+  reset: function() {
+    this.points = [];
+    this.sliders.setOptions([]);
+    this.curveset = false;
+    this.mode = 0;
+    if (this.api) {
+      let api = this.api;
+      api.setCurve(false);
+      api.reset();
+      api.redraw();
+    }
+  },
+
+  toggle: function() {
+    if (this.api) {
+      this.customTimeValues = false;
+      this.mode = (this.mode + 1) % fit.modes.length;
+      this.fitCurve(this.api);
+      this.api.redraw();
+    }
+  },
+
+  draw: function(api, curve) {
+    api.setPanelCount(1);
+    api.reset();
+    api.setColor('lightgrey');
+    api.drawGrid(10,10);
+
+    api.setColor('black');
+
+    if (!this.curveset && this.points.length > 2) {
+      curve = this.fitCurve(api);
+    }
+
+    if (curve) {
+      api.drawCurve(curve);
+      api.drawSkeleton(curve);
+    }
+
+    api.drawPoints(this.points);
+
+    if (!this.customTimeValues) {
+      api.setFill(0);
+      api.text("using "+fit.modes[this.mode]+" t values", {x: 5, y: 10});
+    }
+  },
+
+  processTimeUpdate(sliderid, timeValues) {
+    var api = this.api;
+    this.customTimeValues = true;
+    this.fitCurve(api, timeValues);
+    api.redraw();
+  },
+
+  fitCurve(api, timeValues) {
+    let bestFitData = fit(this.points, timeValues || this.mode),
+        x = bestFitData.C.x,
+        y = bestFitData.C.y,
+        bpoints = [];
+    x.forEach((r,i) => {
+      bpoints.push({
+        x: r[0],
+        y: y[i][0]
+      });
+    });
+    var curve = new api.Bezier(bpoints);
+    api.setCurve(curve);
+    this.curveset = true;
+    this.sliders.setOptions(bestFitData.S);
+    return curve;
+  },
+
+  onClick: function(evt, api) {
+    this.curveset = false;
+    this.points.push({x: api.mx, y: api.my });
+    api.redraw();
+  }
+};

chapters/curvefitting/index.js

@@ -0,0 +1,3 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+module.exports = generateBase("curvefitting", handler);

chapters/curveintersection/content.en-GB.md

@@ -0,0 +1,21 @@
+# Curve/curve intersection
+
+Using de Casteljau's algorithm to split the curve we can now implement curve/curve intersection finding using a "divide and conquer" technique:
+
+- Take two curves *C<sub>1</sub>* and *C<sub>2</sub>*, and treat them as a pair.
+- If their bounding boxes overlap, split up each curve into two sub-curves
+- With *C<sub>1.1</sub>*, *C<sub>1.2</sub>*, *C<sub>2.1</sub>* and *C<sub>2.2</sub>*, form four new pairs (*C<sub>1.1</sub>*,*C<sub>2.1</sub>*), (*C<sub>1.1</sub>*, *C<sub>2.2</sub>*), (*C<sub>1.2</sub>*,*C<sub>2.1</sub>*), and (*C<sub>1.2</sub>*,*C<sub>2.2</sub>*).
+- For each pair, check whether their bounding boxes overlap.
+  - If their bounding boxes do not overlap, discard the pair, as there is no intersection between this pair of curves.
+  - If there <em>is</em> overlap, rerun all steps for this pair.
+- Once the sub-curves we form are so small that they effectively occupy sub-pixel areas, we consider an intersection found, noting that we might have a cluster of multiple intersections at the sub-pixel level, out of which we pick one to act as "found" `t` value (we can either throw all but one away, we can average the cluster's `t` values, or you can do something even more creative).
+
+This algorithm will start with a single pair, "balloon" until it runs in parallel for a large number of potential sub-pairs, and then taper back down as it homes in on intersection coordinates, ending up with as many pairs as there are intersections.
+
+The following graphic applies this algorithm to a pair of cubic curves, one step at a time, so you can see the algorithm in action. Click the button to run a single step in the algorithm, after setting up your curves in some creative arrangement. The algorithm resets once it's found a solution, so you can try this with lots of different curves (can you find the configuration that yields the maximum number of intersections between two cubic curves? Nine intersections!)
+
+<Graphic title="Curve/curve intersections" setup={this.setup} draw={this.draw}>
+  <button onClick={this.stepUp}>advance one step</button>
+</Graphic>
+
+Self-intersection is dealt with in the same way, except we turn a curve into two or more curves first based on the inflection points. We then form all possible curve pairs with the resultant segments, and run exactly the same algorithm. All non-overlapping curve pairs will be removed after the first iteration, and the remaining steps home in on the curve's self-intersection points.

chapters/curveintersection/handler.js

@@ -0,0 +1,117 @@
+var abs = Math.abs;
+
+module.exports = {
+  setup: function(api) {
+    this.api = api;
+    api.setPanelCount(3);
+    var curve1 = new api.Bezier(10,100,90,30,40,140,220,220);
+    var curve2 = new api.Bezier(5,150,180,20,80,250,210,190);
+    api.setCurve(curve1, curve2);
+    this.pairReset();
+  },
+
+  pairReset: function() {
+    this.prevstep = 0;
+    this.step = 0;
+  },
+
+  draw: function(api, curves) {
+    api.reset();
+    var offset = {x:0, y:0};
+    curves.forEach(curve => {
+      api.drawSkeleton(curve);
+      api.drawCurve(curve);
+    });
+
+    // next panel: iterations
+    var w = api.getPanelWidth();
+    var h = api.getPanelHeight();
+    offset.x += w;
+    api.drawLine({x:0,y:0}, {x:0,y:h}, offset);
+
+    if (this.step === 0) {
+      this.pairs = [{c1: curves[0], c2: curves[1]}];
+    }
+
+    if(this.step !== this.prevstep) {
+      var pairs = this.pairs;
+      this.pairs = [];
+      this.finals = [];
+      pairs.forEach(p => {
+
+        if(p.c1.length() < 0.6 && p.c2.length() < 0.6) {
+          return this.finals.push(p);
+        }
+
+        var s1 = p.c1.split(0.5);
+        api.setColor("black");
+        api.drawCurve(p.c1, offset);
+        api.setColor("red");
+        api.drawbbox(s1.left.bbox(), offset);
+        api.drawbbox(s1.right.bbox(), offset);
+
+        var s2 = p.c2.split(0.5);
+        api.setColor("black");
+        api.drawCurve(p.c2, offset);
+        api.setColor("blue");
+        api.drawbbox(s2.left.bbox(), offset);
+        api.drawbbox(s2.right.bbox(), offset);
+
+        if (s1.left.overlaps(s2.left)) { this.pairs.push({c1: s1.left, c2: s2.left}); }
+        if (s1.left.overlaps(s2.right)) { this.pairs.push({c1: s1.left, c2: s2.right}); }
+        if (s1.right.overlaps(s2.left)) { this.pairs.push({c1: s1.right, c2: s2.left}); }
+        if (s1.right.overlaps(s2.right)) { this.pairs.push({c1: s1.right, c2: s2.right}); }
+      });
+      this.prevstep = this.step;
+    } else {
+      this.pairs.forEach(p => {
+        api.setColor("black");
+        api.drawCurve(p.c1, offset);
+        api.drawCurve(p.c2, offset);
+        api.setColor("red");
+        api.drawbbox(p.c1.bbox(), offset);
+        api.setColor("blue");
+        api.drawbbox(p.c2.bbox(), offset);
+      });
+    }
+
+    if (this.pairs.length === 0) {
+      this.pairReset();
+      this.draw(api, curves);
+    }
+
+    // next panel: results
+    offset.x += w;
+    api.setColor("black");
+    api.drawLine({x:0,y:0}, {x:0,y:h}, offset);
+
+    // get intersections as coordinates
+    var results = curves[0].intersects(curves[1]).map(s => {
+      var tvals = s.split('/').map(v => parseFloat(v));
+      return {t1: tvals[0], t2: tvals[1]};
+    });
+
+    // filter out likely duplicates
+    var curr = results[0], _, i, same = ((a,b) => abs(a.t1-b.t1) < 0.01 && abs(a.t2-b.t2) < 0.01);
+    for(i=1; i<results.length; i++) {
+      _ = results[i];
+      if (same(curr, _)) {
+        results.splice(i--,1);
+      } else { curr = _; }
+    }
+
+    api.setColor("lightblue");
+    api.drawCurve(curves[0], offset);
+    api.drawCurve(curves[1], offset);
+
+    api.setColor("blue");
+    results.forEach(tvals => {
+      api.drawCircle(curves[0].get(tvals.t1), 3, offset);
+    });
+  },
+
+  stepUp: function() {
+    this.step++;
+    this.api.redraw();
+  }
+};

chapters/curveintersection/index.js

@@ -0,0 +1,3 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+module.exports = generateBase("curveintersection", handler);

chapters/decasteljau/content.en-GB.md

@@ -0,0 +1,54 @@
+# de Casteljau's algorithm
+
+If we want to draw Bézier curves, we can run through all values of `t` from 0 to 1 and then compute the weighted basis function at each value, getting the `x/y` values we need to plot. Unfortunately, the more complex the curve gets, the more expensive this computation becomes. Instead, we can use *de Casteljau's algorithm* to draw curves. This is a geometric approach to curve drawing, and it's really easy to implement. So easy, in fact, you can do it by hand with a pencil and ruler.
+
+Rather than using our calculus function to find `x/y` values for `t`, let's do this instead:
+
+- treat `t` as a ratio (which it is). t=0 is 0% along a line, t=1 is 100% along a line.
+- Take all lines between the curve's defining points. For an order `n` curve, that's `n` lines.
+- Place markers along each of these line, at distance `t`. So if `t` is 0.2, place the mark at 20% from the start, 80% from the end.
+- Now form lines between `those` points. This gives `n-1` lines.
+- Place markers along each of these line at distance `t`.
+- Form lines between `those` points. This'll be `n-2` lines.
+- Place markers, form lines, place markers, etc.
+- Repeat this until you have only one line left. The point `t` on that line coincides with the original curve point at `t`.
+
+<div className="howtocode">
+
+### How to implement de Casteljau's algorithm
+
+Let's just use the algorithm we just specified, and implement that:
+
+```
+function drawCurve(points[], t):
+  if(points.length==1):
+    draw(points[0])
+  else:
+    newpoints=array(points.size-1)
+    for(i=0; i<newpoints.length; i++):
+      newpoints[i] = (1-t) * points[i] + t * points[i+1]
+    drawCurve(newpoints, t)
+```
+
+And done, that's the algorithm implemented. Except usually you don't get the luxury of overloading the "+" operator, so let's also give the code for when you need to work with `x` and `y` values:
+
+```
+function drawCurve(points[], t):
+  if(points.length==1):
+    draw(points[0])
+  else:
+    newpoints=array(points.size-1)
+    for(i=0; i<newpoints.length; i++):
+      x = (1-t) * points[i].x + t * points[i+1].x
+      y = (1-t) * points[i].y + t * points[i+1].y
+      newpoints[i] = new point(x,y)
+    drawCurve(newpoints, t)
+```
+
+So what does this do? This draws a point, if the passed list of points is only 1 point long. Otherwise it will create a new list of points that sit at the <i>t</i> ratios (i.e. the "markers" outlined in the above algorithm), and then call the draw function for this new list.
+
+</div>
+
+To see this in action, mouse-over the following sketch. Moving the mouse changes which curve point is explicitly evaluated using de Casteljau's algorithm, moving the cursor left-to-right (or, of course, right-to-left), shows you how a curve is generated using this approach.
+
+<Graphictitle="Traversing a curve using de Casteljau's algorithm" setup={this.setup} draw={this.draw}/>

chapters/decasteljau/content.ja-JP.md

@@ -0,0 +1,54 @@
+# ド・カステリョのアルゴリズム
+
+ベジエ曲線を描く場合は、`t`の値を0から1まで動かしながら重みつき基底関数を計算し、プロットに必要な`x/y`の値を求めます。しかし、曲線が複雑になればなるほど、計算コストがかかるようになってしまいます。そこでその代わりに、「ド・カステリョのアルゴリズム」を使って曲線を描くこともできます。こちらは幾何学的に曲線を描く方法で、実装も非常に簡単です。実際、鉛筆と定規を使って手描きすることもできるほど、とても簡単な方法なのです。
+
+`x/y`の値を求めるために関数を使うのではなく、次のようにします。
+
+- `t`を（そのまま）比率として考えます。t=0は直線上の0%の位置、t=1は100%の位置です。
+- 曲線を定める点同士を結ぶように、それぞれ直線を引きます。`n`次の曲線であれば、`n`本の直線を引きます。
+- 各直線上において、距離が`t`となる点にそれぞれ印をつけます。例えば`t`が0.2なら、始点から20%、終点から80%の位置になります。
+- 今度は、`それらの`点同士を直線で結びます。`n-1`本の直線が得られます。
+- 各直線上において、距離が`t`となる点にそれぞれ印をつけます。
+- `それらの`点同士を直線で結びます。`n-2`本の直線が得られます。
+- 印をつけ、直線で結び、印をつけ、……
+- 1本の直線になるまで繰り返します。その直線上の`t`の点は、元の曲線上で`t`となる点に一致しています。
+
+<div className="howtocode">
+
+### ド・カステリョのアルゴリズムの実装方法
+
+いま説明したアルゴリズムを実装すると、以下のようになります。
+
+```
+function drawCurve(points[], t):
+  if(points.length==1):
+    draw(points[0])
+  else:
+    newpoints=array(points.size-1)
+    for(i=0; i<newpoints.length; i++):
+      newpoints[i] = (1-t) * points[i] + t * points[i+1]
+    drawCurve(newpoints, t)
+```
+
+これで実装完了です。ただし、+演算子のオーバーロードなどという贅沢品はたいてい無いでしょうから、`x`や`y`の値を直接扱う場合のコードも示しておきます。
+
+```
+function drawCurve(points[], t):
+  if(points.length==1):
+    draw(points[0])
+  else:
+    newpoints=array(points.size-1)
+    for(i=0; i<newpoints.length; i++):
+      x = (1-t) * points[i].x + t * points[i+1].x
+      y = (1-t) * points[i].y + t * points[i+1].y
+      newpoints[i] = new point(x,y)
+    drawCurve(newpoints, t)
+```
+
+さて、これは何をしているのでしょう？関数に渡す点のリストが長さ1であれば、点を1つ描きます。それ以外であれば、比率<i>t</i>の位置の点（すなわち、さきほどの説明に出てきた「印」）のリストを作り、そしてこの新しいリストを引数にして関数を呼び出します。
+
+</div>
+
+下の図にマウスを乗せると、この様子を実際に見ることができます。ド・カステリョのアルゴリズムによって曲線上の点を明示的に計算していますが、マウスを動かすと求める点が変わります。マウスカーソルを左から右へ（もちろん、右から左へでも）動かせば、このアルゴリズムによって曲線が生成される様子がわかります。
+
+<Graphic title="ド・カステリョのアルゴリズムで曲線をたどる" setup={this.setup} draw={this.draw}/>

chapters/decasteljau/content.zh-CN.md

@@ -0,0 +1,54 @@
+# de Casteljau's 算法
+
+要绘制贝塞尔曲线，我们可以从`0`到`1`遍历`t`的所有值，计算权重函数，得到需要画的`x/y`值。但曲线越复杂，计算量也变得越大。我们可以利用“de Casteljau算法"，这是一种几何画法，并且易于实现。实际上，你可以轻易地用笔和尺画出曲线。
+
+我们用以下步骤来替代用`t`计算`x/y`的微积分算法：
+
+- 把`t`看做一个比例（实际上它就是），`t=0`代表线段的0%，`t=1`代表线段的100%。
+- 画出所有点的连线，对`n`阶曲线来说可以画出`n`条线。
+- 在每条线的`t`处做一个记号。比如`t`是0.2，就在离起点20%（离终点80%）的地方做个记号。
+- 连接`这些`点，得到`n-1`条线。
+- 在这些新得到的线上同样用`t`为比例标记。
+- 把相邻的`那些`点连线，得到`n-2`条线。
+- 取记号，连线，取记号，等等。
+- 重复这些步骤，直到剩下一条线。这条线段上的`t`点就是原始曲线在`t`处的点。
+
+<div className="howtocode">
+
+### 如何实现de Casteljau算法
+
+让我们使用刚才描述过的算法，并实现它：
+
+```
+function drawCurve(points[], t):
+  if(points.length==1):
+    draw(points[0])
+  else:
+    newpoints=array(points.size-1)
+    for(i=0; i<newpoints.length; i++):
+      newpoints[i] = (1-t) * points[i] + t * points[i+1]
+    drawCurve(newpoints, t)
+```
+
+好了，这就是算法的实现。一般来说你不能随意重载“+”操作符，因此我们给出计算`x`和`y`坐标的实现：
+
+```
+function drawCurve(points[], t):
+  if(points.length==1):
+    draw(points[0])
+  else:
+    newpoints=array(points.size-1)
+    for(i=0; i<newpoints.length; i++):
+      x = (1-t) * points[i].x + t * points[i+1].x
+      y = (1-t) * points[i].y + t * points[i+1].y
+      newpoints[i] = new point(x,y)
+    drawCurve(newpoints, t)
+```
+
+以上算法做了什么？如果参数points列表只有一个点， 就画出一个点。如果有多个点，就生成以<i>t</i>为比例的一系列点（例如，以上算法中的"标记点"），然后为新的点列表调用绘制函数。
+
+</div>
+
+我们通过实际操作来观察这个过程。在以下的图表中，移动鼠标来改变用de Casteljau算法计算得到的曲线点，左右移动鼠标，可以实时看到曲线是如何生成的。
+
+<Graphictitle="用de Casteljau算法来遍历曲线" setup={this.setup} draw={this.draw}/>

chapters/decasteljau/handler.js

@@ -0,0 +1,36 @@
+module.exports = {
+  setup: function(api) {
+    var points = [
+      {x: 90, y:110},
+      {x: 25, y: 40},
+      {x:230, y: 40},
+      {x:150, y:240}
+    ];
+    api.setCurve(new api.Bezier(points));
+  },
+
+  draw: function(api, curve) {
+    api.reset();
+    api.drawSkeleton(curve);
+    api.drawCurve(curve);
+
+    if (api.hover) {
+      api.setColor("rgb(200,100,100)");
+      var dim = api.getPanelWidth();
+      var t = api.hover.x / dim;
+      var hull = api.drawHull(curve, t);
+
+      for(var i=4; i<=8; i++) {
+        api.drawCircle(hull[i],3);
+      }
+
+      var p = curve.get(t);
+      api.drawCircle(p, 5);
+      api.setFill("black");
+      api.drawCircle(p, 3);
+      var perc = (t*100)|0;
+      t = perc/100;
+      api.text("Sequential interpolation for "+perc+"% (t="+t+")", {x: 10, y:15});
+    }
+  }
+};

chapters/decasteljau/index.js

@@ -0,0 +1,3 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+module.exports = generateBase("decasteljau", handler);

chapters/derivatives/content.en-GB.md

@@ -0,0 +1,156 @@
+# Derivatives
+
+There's a number of useful things that you can do with Bézier curves based on their derivative, and one of the more amusing observations about Bézier curves is that their derivatives are, in fact, also Bézier curves. In fact, the differentiation of a Bézier curve is relatively straightforward, although we do need a bit of math.
+
+First, let's look at the derivative rule for Bézier curves, which is:
+
+\[
+  Bézier'(n,t) = n \cdot \sum_{i=0}^{n-1} (b_{i+1}-b_i) \cdot Bézier(n-1,t)_i
+\]
+
+which we can also write (observing that <i>b</i> in this formula is the same as our <i>w</i> weights, and that <i>n</i> times a summation is the same as a summation where each term is multiplied by <i>n</i>) as:
+
+\[
+  Bézier'(n,t) = \sum_{i=0}^{n-1} Bézier(n-1,t)_i \cdot n \cdot (w_{i+1}-w_i)
+\]
+
+Or, in plain text: the derivative of an n<sup>th</sup> degree Bézier curve is an (n-1)<sup>th</sup> degree Bézier curve, with one fewer term, and new weights w'<sub>0</sub>...w'<sub>n-1</sub> derived from the original weights as n(w<sub>i+1</sub> - w<sub>i</sub>). So for a 3<sup>rd</sup> degree curve, with four weights, the derivative has three new weights: w'<sub>0</sub> = 3(w<sub>1</sub>-w<sub>0</sub>), w'<sub>1</sub> = 3(w<sub>2</sub>-w<sub>1</sub>) and w'<sub>2</sub> = 3(w<sub>3</sub>-w<sub>2</sub>).
+
+<div className="note">
+
+### "Slow down, why is that true?"
+
+Sometimes just being told "this is the derivative" is nice, but you might want to see why this is indeed the case. As such, let's have a look at the proof for this derivative. First off, the weights are independent of the full Bézier function, so the derivative involves only the derivative of the polynomial basis function. So, let's find that:
+
+\[
+  B_{n,k}(t) \frac{d}{dt} = {n \choose k} t^k (1-t)^{n-k} \frac{d}{dt}
+\]
+
+Applying the [product](http://en.wikipedia.org/wiki/Product_rule) and [chain](http://en.wikipedia.org/wiki/Chain_rule) rules gives us:
+
+\[
+\begin{array}{l}
+  ... = {n \choose k} \left (
+    k \cdot t^{k-1} (1-t)^{n-k} + t^k \cdot (1-t)^{n-k-1} \cdot (n-k) \cdot -1
+  \right )
+\end{array}
+\]
+
+Which is hard to work with, so let's expand that properly:
+
+\[
+\begin{array}{l}
+  ... = \frac{kn!}{k!(n-k)!} t^{k-1} (1-t)^{n-k} - \frac{(n-k)n!}{k!(n-k)!} t^k (1-t)^{n-1-k}
+\end{array}
+\]
+
+Now, the trick is to turn this expression into something that has binomial coefficients again, so we want to end up with things that look like "x! over y!(x-y)!". If we can do that in a way that involves terms of <i>n-1</i> and <i>k-1</i>, we'll be on the right track.
+
+\[
+\begin{array}{l}
+  ... = \frac{n!}{(k-1)!(n-k)!} t^{k-1} (1-t)^{n-k} - \frac{(n-k)n!}{k!(n-k)!} t^k (1-t)^{n-1-k} \\
+
+  ... = n \left (
+    \frac{(n-1)!}{(k-1)!(n-k)!} t^{k-1} (1-t)^{n-k} - \frac{(n-k)(n-1)!}{k!(n-k)!} t^k (1-t)^{n-1-k}
+  \right ) \\
+
+  ... = n \left (
+    \frac{(n-1)!}{(k-1)!((n-1)-(k-1))!} t^{(k-1)} (1-t)^{(n-1)-(k-1)} - \frac{(n-1)!}{k!((n-1)-k)!} t^k (1-t)^{(n-1)-k}
+  \right )
+\end{array}
+\]
+
+And that's the first part done: the two components inside the parentheses are actually regular, lower-order Bézier expressions:
+
+\[\begin{array}{l}
+  ... = n \left (
+    \frac{x!}{y!(x-y)!} t^{y} (1-t)^{x-y} - \frac{x!}{k!(x-k)!} t^k (1-t)^{x-k}
+  \right )
+  \ ,\ with\ x=n-1,\ y=k-1
+  \\
+  ... = n \left ( B_{(n-1),(k-1)}(t) - B_{(n-1),k}(t) \right )
+\end{array}
+\]
+
+Now to apply this to our weighted Bézier curves. We'll write out the plain curve formula that we saw earlier, and then work our way through to its derivative:
+
+\[\begin{array}{lcl}
+  Bézier_{n,k}(t) &=& B_{n,0}(t) \cdot w_0 + B_{n,1}(t) \cdot w_1 + B_{n,2}(t) \cdot w_2 + B_{n,3}(t) \cdot w_3 + ... \\
+  Bézier_{n,k}(t) \frac{d}{dt} &=& n \cdot (B_{n-1,-1}(t) - B_{n-1,0}(t)) \cdot w_0 + \\
+                               & & n \cdot (B_{n-1,0}(t) - B_{n-1,1}(t)) \cdot w_1 + \\
+                               & & n \cdot (B_{n-1,1}(t) - B_{n-1,2}(t)) \cdot w_2 + \\
+                               & & n \cdot (B_{n-1,2}(t) - B_{n-1,3}(t)) \cdot w_3 + \\
+                               & & ...
+\end{array}\]
+
+If we expand this (with some color to show how terms line up), and reorder the terms by increasing values for <i>k</i> we see the following:
+
+\[\begin{array}{lclc}
+  n \cdot B_{n-1,-1}(t) \cdot w_0 &+& & \\
+  n \cdot B_{n-1,BLUE[0]}(t) \cdot w_1 &-& n \cdot B_{n-1,BLUE[0]}(t) \cdot w_0 & + \\
+  n \cdot B_{n-1,RED[1]}(t) \cdot w_2 &-& n \cdot B_{n-1,RED[1]}(t) \cdot w_1 & + \\
+  n \cdot B_{n-1,MAGENTA[2]}(t) \cdot w_3 &-& n \cdot B_{n-1,MAGENTA[2]}(t) \cdot w_2 & + \\
+  ... &-& n \cdot B_{n-1,3}(t) \cdot w_3 & + \\
+  ... & & &
+\end{array}\]
+
+Two of these terms fall way: the first term falls away because there is no -1<sup>st</sup> term in a summation. As such, it always contributes "nothing", so we can safely completely ignore it for the purpose of finding the derivative function. The other term is the very last term in this expansion: one involving <i>B<sub>n-1,n</sub></i>. This term would have a binomial coefficient of [<i>i</i> choose <i>i+1</i>], which is a non-existent binomial coefficient. Again, this term would contribute "nothing", so we can ignore it, too. This means we're left with:
+
+\[\begin{array}{lclc}
+  n \cdot B_{n-1,BLUE[0]}(t) \cdot w_1 &-& n \cdot B_{n-1,BLUE[0]}(t) \cdot w_0 &+ \\
+  n \cdot B_{n-1,RED[1]}(t) \cdot w_2 &-& \ n \cdot B_{n-1,RED[1]}(t) \cdot w_1 &+ \\
+  n \cdot B_{n-1,MAGENTA[2]}(t) \cdot w_3 &-& n \cdot B_{n-1,MAGENTA[2]}(t) \cdot w_2 &+ \\
+  ...
+\end{array}\]
+
+And that's just a summation of lower order curves:
+
+\[
+  Bézier_{n,k}(t) \frac{d}{dt} = n \cdot B_{(n-1),BLUE[0]}(t) \cdot (w_1 - w_0)
+                            + n \cdot B_{(n-1),RED[1]}(t) \cdot (w_2 - w_1)
+                            + n \cdot B_{(n-1),MAGENTA[2]}(t) \cdot (w_3 - w_2)
+                            \ + \ ...
+\]
+
+We can rewrite this as a normal summation, and we're done:
+
+\[
+  Bézier_{n,k}(t) \frac{d}{dt} = \sum_{k=0}^{n-1} n \cdot B_{n-1,k}(t) \cdot (w_{k+1} - w_k)
+                               = \sum_{k=0}^{n-1} B_{n-1,k}(t) \cdot \underset{derivative\ weights}
+                                 {\underbrace{n \cdot (w_{k+1} - w_k)}}
+\]
+
+</div>
+
+Let's rewrite that in a form similar to our original formula, so we can see the difference. We will first list our original formula for Bézier curves, and then the derivative:
+
+\[
+  Bézier(n,t) = \sum_{i=0}^{n}
+                \underset{binomial\ term}{\underbrace{\binom{n}{i}}}
+                \cdot\
+                \underset{polynomial\ term}{\underbrace{(1-t)^{n-i} \cdot t^{i}}}
+                \cdot\
+                \underset{weight}{\underbrace{w_i}}
+\]
+
+\[
+  Bézier'(n,t) = \sum_{i=0}^{k}
+                \underset{binomial\ term}{\underbrace{\binom{k}{i}}}
+                \cdot\
+                \underset{polynomial\ term}{\underbrace{(1-t)^{k-i} \cdot t^{i}}}
+                \cdot\
+                \underset{derivative\ weight}{\underbrace{n \cdot (w_{i+1} - w_i)}}
+                {\ , \ with \ k=n-1}
+\]
+
+
+What are the differences? In terms of the actual Bézier curve, virtually nothing! We lowered the order (rather than <i>n</i>, it's now <i>n-1</i>), but it's still the same Bézier function. The only real difference is in how the weights change when we derive the curve's function. If we have four points A, B, C, and D, then the derivative will have three points, the second derivative two, and the third derivative one:
+
+\[ \begin{array}{llll}
+  B(n,t),    &        & w = \{A,B,C,D\} \\
+  B'(n,t),   & n = 3, & w' = \{A',B',C'\}    &= \{3 \cdot (B-A), {\ } 3 \cdot (C-B), {\ } 3 \cdot (D-C)\} \\
+  B''(n,t),  & n = 2, & w'' = \{A'',B''\}    &= \{2 \cdot (B'-A'), {\ } 2 \cdot (C'-B')\} \\
+  B'''(n,t), & n = 1, & w''' = \{A'''\} &= \{1 \cdot (B''-A'')\}
+\end{array} \]
+
+We can keep performing this trick for as long as we have more than one weight. Once we have one weight left, the next step will see <i>k = 0</i>, and the result of our "Bézier function" summation is zero, because we're not adding anything at all. As such, a quadratic curve has no second derivative, a cubic curve has no third derivative, and generalized: an <i>n<sup>th</sup></i> order curve has <i>n-1</i> (meaningful) derivatives, with any further derivative being zero.

chapters/derivatives/index.js

@@ -0,0 +1,2 @@
+var generateBase = require("../../generate-base");
+module.exports = generateBase("derivatives");

chapters/drawing/content.en-GB.md

@@ -0,0 +1,17 @@
+# Drawing Bezier paths
+
+- draw with a mouse, stylus, or finger
+- RDP to reduce the number of points along the path
+- abstract curve through points:
+  - high order bezier, split and reduced
+  - fit compound bezier
+  - catmull-rom
+
+<div className="figure">
+  <Graphic title="Fitting a Bézier curve" setup={this.setup} draw={this.draw} onClick={this.onClick}>
+    <button onClick={this.toggle}>toggle</button>
+    <button onClick={this.reset}>reset</button>
+    <SliderSet ref={ set => (this.sliders=set) } onChange={this.processTimeUpdate} />
+  </Graphic>
+</div>
+

chapters/drawing/handler.js

@@ -0,0 +1,85 @@
+var fit = require('../../../lib/curve-fitter.js');
+
+module.exports = {
+  setup: function(api) {
+    this.api = api;
+    this.reset();
+  },
+
+  reset: function() {
+    this.points = [];
+    this.curveset = false;
+    this.mode = 0;
+    if (this.api) {
+      let api = this.api;
+      api.setCurve(false);
+      api.reset();
+      api.redraw();
+    }
+  },
+
+  toggle: function() {
+    if (this.api) {
+      this.customTimeValues = false;
+      this.mode = (this.mode + 1) % fit.modes.length;
+      this.fitCurve(this.api);
+      this.api.redraw();
+    }
+  },
+
+  draw: function(api, curve) {
+    api.setPanelCount(1);
+    api.reset();
+    api.setColor('lightgrey');
+    api.drawGrid(10,10);
+
+    api.setColor('black');
+
+    if (!this.curveset && this.points.length > 2) {
+      curve = this.fitCurve(api);
+    }
+
+    if (curve) {
+      api.drawCurve(curve);
+      api.drawSkeleton(curve);
+    }
+
+    api.drawPoints(this.points);
+
+    if (!this.customTimeValues) {
+      api.setFill(0);
+      api.text("using "+fit.modes[this.mode]+" t values", {x: 5, y: 10});
+    }
+  },
+
+  processTimeUpdate(sliderid, timeValues) {
+    var api = this.api;
+    this.customTimeValues = true;
+    this.fitCurve(api, timeValues);
+    api.redraw();
+  },
+
+  fitCurve(api, timeValues) {
+    let bestFitData = fit(this.points, timeValues || this.mode),
+        x = bestFitData.C.x,
+        y = bestFitData.C.y,
+        bpoints = [];
+    x.forEach((r,i) => {
+      bpoints.push({
+        x: r[0],
+        y: y[i][0]
+      });
+    });
+    var curve = new api.Bezier(bpoints);
+    api.setCurve(curve);
+    this.curveset = true;
+    this.sliders.setOptions(bestFitData.S);
+    return curve;
+  },
+
+  onClick: function(evt, api) {
+    this.curveset = false;
+    this.points.push({x: api.mx, y: api.my });
+    api.redraw();
+  }
+};

chapters/extended/content.en-GB.md

@@ -0,0 +1,28 @@
+# The Bézier interval [0,1]
+
+Now that we know the mathematics behind Bézier curves, there's one curious thing that you may have noticed: they always run from `t=0` to `t=1`. Why that particular interval?
+
+It all has to do with how we run from "the start" of our curve to "the end" of our curve. If we have a value that is a mixture of two other values, then the general formula for this is:
+
+\[
+  mixture = a \cdot value_1 + b \cdot value_2
+\]
+
+The obvious start and end values here need to be `a=1, b=0`, so that the mixed value is 100% value 1, and 0% value 2, and `a=0, b=1`, so that the mixed value is 0% value 1 and 100% value 2. Additionally, we don't want "a" and "b" to be independent: if they are, then we could just pick whatever values we like, and end up with a mixed value that is, for example, 100% value 1 **and** 100% value 2. In principle that's fine, but for Bézier curves we always want mixed values *between* the start and end point, so we need to make sure we can never set "a" and "b" to some values that lead to a mix value that sums to more than 100%. And that's easy:
+
+\[
+  m = a \cdot value_1 + (1 - a) \cdot value_2
+\]
+
+With this we can guarantee that we never sum above 100%. By restricting `a` to values in the interval [0,1], we will always be somewhere between our two values (inclusively), and we will always sum to a 100% mix.
+
+But... what if we use this form, which is based on the assumption that we will only ever use values between 0 and 1, and instead use values outside of that interval? Do things go horribly wrong? Well... not really, but we get to "see more".
+
+In the case of Bézier curves, extending the interval simply makes our curve "keep going". Bézier curves are simply segments of some polynomial curve, so if we pick a wider interval we simply get to see more of the curve. So what do they look like?
+
+The following two graphics show you Bézier curves rendered "the usual way", as well as the curves they "lie on" if we were to extend the `t` values much further. As you can see, there's a lot more "shape" hidden in the rest of the curve, and we can model those parts by moving the curve points around.
+
+<Graphic title="Quadratic infinite interval Bézier curve" setup={this.setupQuadratic} draw={this.draw} />
+<Graphic title="Cubic infinite interval Bézier curve" setup={this.setupCubic} draw={this.draw} />
+
+In fact, there are curves used in graphics design and computer modelling that do the opposite of Bézier curves; rather than fixing the interval, and giving you freedom to choose the coordinates, they fix the coordinates, but give you freedom over the interval. A great example of this is the ["Spiro" curve](http://levien.com/phd/phd.html), which is a curve based on part of a [Cornu Spiral, also known as Euler's Spiral](https://en.wikipedia.org/wiki/Euler_spiral). It's a very aesthetically pleasing curve and you'll find it in quite a few graphics packages like [FontForge](https://fontforge.github.io) and [Inkscape](https://inkscape.org). It has even been used in font design, for example for the Inconsolata typeface.

chapters/extended/content.ja-JP.md

@@ -0,0 +1,28 @@
+# ベジエ曲線の区間 [0,1]
+
+ここまでの説明で、ベジエ曲線の裏側にある数学がわかりました。しかし、気づいているかもしれませんが、ひとつ引っかかる点があります。ベジエ曲線はいつも`t=0`から`t=1`の間を動いていますが、どうしてこの特定の区間なのでしょう？
+
+このことは、曲線の「始点」から曲線の「終点」までどうやって動かすか、ということにすべて関係しています。2つの値を混ぜ合わせて1つの値をつくる場合、一般の式は次のようになります。
+
+\[
+  混ぜ合わさった値 = a \cdot 値_1 + b \cdot 値_2
+\]
+
+明らかに、始点では`a=1, b=0`とする必要があります。こうすれば、値1が100%、値2が0%で混ぜ合わさるからです。また、終点では`a=0, b=1`とする必要があります。こうすれば、値1が0%、値2が100%で混ぜ合わさります。これに加えて、`a`と`b`を独立にしておきたくはありません。独立になっている場合、何でも好きな値にすることできますが、こうすると例えば「値1が100%**かつ**値2が100%」のようなことが可能になってしまいます。これはこれで原則としてはかまいませんが、ベジエ曲線の場合は混ぜ合わさった値が常に始点と終点の*間*になってほしいのです。というわけで、混ぜ合わせの和が100%を決して超えないように、`a`と`b`の値を設定する必要があります。これは次のようにすれば簡単です。
+
+\[
+  混ぜ合わさった値 = a \cdot 値_1 + (1 - a) \cdot 値_2
+\]
+
+こうすれば、和が100%を超えることはないと保証できます。`a`の値を区間[0,1]に制限してしまえば、混ぜ合わさった値は常に2つの値の間のどこか（両端を含む）になり、また和は常に100%になります。
+
+しかし……この式を0と1の間の値だけで使うのではなく、もし仮にこの区間の外の値で使うとしたら、どうなるのでしょう？めちゃくちゃになってしまうのでしょうか？……実はそうではありません。「その先」が見えるのです。
+
+ベジエ曲線の場合、区間を広げると曲線は単純に「そのまま延びて」いきます。ベジエ曲線はある多項式曲線の一部分にすぎませんので、単純に区間を広くとればとるほど、曲線のより多くの部分が現れるようになります。では、どのように見えるのでしょうか？
+
+下の2つの図は「いつもの方法」で描いたベジエ曲線ですが、これと一緒に、`t`の値をずっと先まで広げた場合の「延びた」ベジエ曲線も表示しています。見てわかるように、曲線の残りの部分には多くの「かたち」が隠れています。そして曲線の点を動かせば、その部分の形状も変わります。
+
+<Graphic title="無限区間の2次ベジエ曲線" setup={this.setupQuadratic} draw={this.draw} />
+<Graphic title="無限区間の3次ベジエ曲線" setup={this.setupCubic} draw={this.draw} />
+
+実際に、グラフィックデザインやコンピュータモデリングで使われている曲線の中には、座標が固定されていて、区間は自由に動かせるような曲線があります。これは、区間が固定されていて、座標を自由に動かすことのできるベジエ曲線とは反対になっています。すばらしい例が[「Spiro」曲線](http://levien.com/phd/phd.html)で、これは[オイラー螺旋とも呼ばれるクロソイド曲線](https://ja.wikipedia.org/wiki/クロソイド曲線)の一部分に基づいた曲線です。非常に美しく心地よい曲線で、[FontForge](https://fontforge.github.io)や[Inkscape](https://inkscape.org/ja/)など多くのグラフィックアプリに実装されており、フォントデザインにも利用されています（Inconsolataフォントなど）。

chapters/extended/content.zh-CN.md

@@ -0,0 +1,28 @@
+# 贝塞尔区间[0,1]
+
+既然我们知道了贝塞尔曲线背后的数学原理，你可能会注意到一件奇怪的事：它们都是从`t=0`到`t=1`。为什么是这个特殊区间？
+
+这一切都与我们如何从曲线的“起点”变化到曲线“终点”有关。如果有一个值是另外两个值的混合，一般方程如下：
+
+\[
+  mixture = a \cdot value_1 + b \cdot value_2
+\]
+
+很显然，起始值需要`a=1, b=0`，混合值就为100%的value 1和0%的value 2。终点值需要`a=0, b=1`，则混合值是0%的value 1和100%的value 2。另外，我们不想让“a”和“b”是互相独立的:如果它们是互相独立的话，我们可以任意选出自己喜欢的值，并得到混合值，比如说100%的value1和100%的value2。原则上这是可以的，但是对于贝塞尔曲线来说，我们通常想要的是起始值和终点值*之间*的混合值，所以要确保我们不会设置一些“a”和"b"而导致混合值超过100%。这很简单：
+
+\[
+  m = a \cdot value_1 + (1 - a) \cdot value_2
+\]
+
+用这个式子我们可以保证相加的值永远不会超过100%。通过将`a`限制在区间[0，1],我们将会一直处于这两个值之间（包括这两个端点），并且相加为100%。
+
+但是...如果我们没有假定只使用0到1之间的数，而是用一些区间外的值呢，事情会变得很糟糕吗？好吧...不全是，我们接下来看看。
+
+对于贝塞尔曲线的例子，扩展区间只会使我们的曲线“保持延伸”。贝塞尔曲线是多项式曲线上简单的片段，如果我们选一个更大的区间，会看到曲线更多部分。它们看起来是什么样的呢？
+
+下面两个图形给你展示了以“普通方式”来渲染的贝塞尔曲线，以及如果我们扩大`t`值时它们所“位于”的曲线。如你所见，曲线的剩余部分隐藏了很多“形状”，我们可以通过移动曲线的点来建模这部分。
+
+<Graphic title="二次无限区间贝塞尔曲线" setup={this.setupQuadratic} draw={this.draw} />
+<Graphic title="三次无限区间贝塞尔曲线" setup={this.setupCubic} draw={this.draw} />
+
+实际上，图形设计和计算机建模中还用了一些和贝塞尔曲线相反的曲线，这些曲线没有固定区间和自由的坐标，相反，它们固定座标但给你自由的区间。["Spiro"曲线](http://levien.com/phd/phd.html)就是一个很好的例子，它的构造是基于[羊角螺线,也就是欧拉螺线](https://zh.wikipedia.org/wiki/%E7%BE%8A%E8%A7%92%E8%9E%BA%E7%BA%BF)的一部分。这是在美学上很令人满意的曲线，你可以在一些图形包中看到它，比如[FontForge](https://fontforge.github.io)和[Inkscape](https://inkscape.org)，它也被用在一些字体设计中（比如Inconsolata字体）。

chapters/extended/handler.js

@@ -0,0 +1,34 @@
+module.exports = {
+  setupQuadratic: function(api) {
+    var curve = new api.Bezier(70, 155, 20, 110, 100,75);
+    api.setCurve(curve);
+  },
+
+  setupCubic: function(api) {
+    var curve = new api.Bezier(60,105, 75,30, 215,115, 140,160);
+    api.setCurve(curve);
+  },
+
+  draw: function(api, curve) {
+    api.reset();
+    api.drawSkeleton(curve);
+    api.drawCurve(curve);
+    api.setColor("lightgrey");
+
+    var t, step=0.05, min=-10;
+    var pt = curve.get(min - step), pn;
+    for (t=min; t<=step; t+=step) {
+      pn = curve.get(t);
+      api.drawLine(pt, pn);
+      pt = pn;
+    }
+
+    pt = curve.get(1);
+    var max = 10;
+    for (t=1+step; t<=max; t+=step) {
+      pn = curve.get(t);
+      api.drawLine(pt, pn);
+      pt = pn;
+    }
+  }
+};

chapters/extended/index.js

@@ -0,0 +1,3 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+module.exports = generateBase("extended", handler);

chapters/extremities/content.en-GB.md

@@ -0,0 +1,198 @@
+# Finding extremities: root finding
+
+Now that we understand (well, superficially anyway) the component functions, we can find the extremities of our Bézier curve by finding maxima and minima on the component functions, by solving the equations B'(t) = 0 and B''(t) = 0. That said, in the case of quadratic curves there is no B''(t), so we only need to compute B'(t) = 0. So, how do we compute the first and second derivatives? Fairly easily, actually, until our derivatives are 4th order or higher... then things get really hard. But let's start simple:
+
+### Quadratic curves: linear derivatives.
+
+Finding the solution for "where is this line 0" should be trivial:
+
+\[
+\begin{aligned}
+  l(x) = ax + b &= 0,\\
+  ax + b &= 0,\\
+  ax &= -b \\
+  x &= \frac{-b}{a}
+\end{aligned}
+\]
+
+Done. And quadratic curves have no meaningful second derivative, so we're *really* done.
+
+### Cubic curves: the quadratic formula.
+
+The derivative of a cubic curve is a quadratic curve, and finding the roots for a quadratic Bézier curve means we can apply the [Quadratic formula](https://en.wikipedia.org/wiki/Quadratic_formula). If you've seen it before, you'll remember it, and if you haven't, it looks like this:
+
+\[
+  Given\ f(t) = at^2 + bt + c,\ f(t)=0\ when\ t = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
+\]
+
+So, if we can express a Bézier component function as a plain polynomial, we're done: we just plug in the values into the quadratic formula, check if that square root is negative or not (if it is, there are no roots) and then just compute the two values that come out (because of that plus/minus sign we get two). Any value between 0 and 1 is a root that matters for Bézier curves, anything below or above that is irrelevant (because Bézier curves are only defined over the interval [0,1]). So, how do we convert?
+
+First we turn our cubic Bézier function into a quadratic one, by following the rule mentioned at the end of the [derivatives section](#derivatives):
+
+\[
+\begin{array}{l}
+  B(t)\ uses\ \{ p_1,p_2,p_3,p_4 \} \\
+  B'(t)\ uses\ \{ v_1,v_2,v_3 \},\ where\ v_1 = 3(p_2-p_1),\ v_2 = 3(p_3-p_2),\ v_3 = 3(p_4-p_3)
+\end{array}
+\]
+
+And then, using these *v* values, we can find out what our *a*, *b*, and *c* should be:
+
+\[
+\begin{aligned}
+  B'(t) &= v_1(1-t)^2 + 2v_2(1-t)t + v_3t^2 \\
+  ... &= v_1(t^2 - 2t + 1) + 2v_2(t-t^2) + v_3t^2 \\
+  ... &= v_1t^2 - 2v_1t + v_1 + 2v_2t - 2v_2t^2 + v_3t^2 \\
+  ... &= v_1t^2 - 2v_2t^2 + v_3t^2 - 2v_1t + v_1 + 2v_2t \\
+  ... &= (v_1-2v_2+v_3)t^2 + 2(v_2-v_1)t + v_1
+\end{aligned}
+\]
+
+This gives us thee coefficients *a*, *b*, and *c* that are expressed in terms of *v* values, where the *v* values are just convenient expressions of our original *p* values, so we can do some trivial substitution to get:
+
+\[
+\begin{aligned}
+  a &= v_1-2v_2+v_3 = 3(-p_1 + 3p_2 - 3p_3 + p_4) \\
+  b &= 2(v_2-v_1) = 6(p_1 - 2p_2 + p_3) \\
+  c &= v_1 = 3(p_2-p_1)
+\end{aligned}
+\]
+
+Easy-peasy. We can now almost trivially find the roots by plugging those values into the quadratic formula. We also note that the second derivative of a cubic curve means computing the first derivative of a quadratic curve, and we just saw how to do that in the section above.
+
+### Quartic curves: Cardano's algorithm.
+
+Quartic—fourth degree—curves have a cubic function as derivative. Now, cubic functions are a bit of a problem because they're really hard to solve. But, way back in the 16<sup>th</sup> century, [Gerolamo Cardano](https://en.wikipedia.org/wiki/Gerolamo_Cardano) figured out that even if the general cubic function is really hard to solve, it can be rewritten to a form for which finding the roots is "easy", and then the only hard part is figuring out how to go from that form to the
+generic form. So:
+
+\[
+  \begin{aligned}
+    \textit{very hard: solve } & at^3 + bt^2 + ct + d = 0 \\
+    \textit{easier: solve } & t^3 + pt + q = 0
+  \end{aligned}
+\]
+
+This is easier because for the "easier formula" we can use [regular calculus](http://www.wolframalpha.com/input/?i=t^3+%2B+pt+%2B+q) to find the roots. (As a cubic function, however, it can have up to three roots, but two of those can be complex. For the purpose of Bézier curve extremities, we can completely ignore those complex roots, since our *t* is a plain real number from 0 to 1.)
+
+So, the trick is to figure out how to turn the first formula into the second formula, and to then work out the maths that gives us the roots. This is explained in detail over at [Ken J. Ward's page](https://trans4mind.com/personal_development/mathematics/polynomials/cubicAlgebra.htm) for solving the cubic equation, so instead of showing the maths, I'm simply going to show the programming code for solving the cubic equation, with the complex roots getting totally ignored.
+
+<div className="howtocode">
+
+### Implementing Cardano's algorithm for finding all real roots
+
+The "real roots" part is fairly important, because while you cannot take a square, cube, etc. root of a negative number in the "real" number space (denoted with ℝ), this is perfectly fine in the ["complex" number](https://en.wikipedia.org/wiki/Complex_number) space (denoted with ℂ). And, as it so happens, Cardano is also attributed as the first mathematician in history to have made use of complex numbers in his calculations. For this very algorithm!
+
+```
+// A helper function to filter for values in the [0,1] interval:
+function accept(t) {
+  return 0<=t && t <=1;
+}
+
+// A real-cuberoots-only function:
+function cuberoot(v) {
+  if(v<0) return -pow(-v,1/3);
+  return pow(v,1/3);
+}
+
+// Now then: given cubic coordinates {pa, pb, pc, pd} find all roots.
+function getCubicRoots(pa, pb, pc, pd) {
+  var   a = (3*pa - 6*pb + 3*pc),
+        b = (-3*pa + 3*pb),
+        c = pa,
+        d = (-pa + 3*pb - 3*pc + pd);
+
+  // do a check to see whether we even need cubic solving:
+  if (approximately(d,0)) {
+    // this is not a cubic curve.
+    if (approximately(a,0)) {
+      // in fact, this is not a quadratic curve either.
+      if (approximately(b,0)) {
+        // in fact in fact, there are no solutions.
+        return [];
+      }
+      // linear solution
+      return [-c / b].filter(accept);
+    }
+    // quadratic solution
+    var q = sqrt(b*b - 4*a*c), 2a = 2*a;
+    return [(q-b)/2a, (-b-q)/2a].filter(accept)
+  }
+
+  // at this point, we know we need a cubic solution.
+
+  a /= d;
+  b /= d;
+  c /= d;
+
+  var p = (3*b - a*a)/3,
+      p3 = p/3,
+      q = (2*a*a*a - 9*a*b + 27*c)/27,
+      q2 = q/2,
+      discriminant = q2*q2 + p3*p3*p3;
+
+  // and some variables we're going to use later on:
+  var u1, v1, root1, root2, root3;
+
+  // three possible real roots:
+  if (discriminant < 0) {
+    var mp3  = -p/3,
+    mp33 = mp3*mp3*mp3,
+    r    = sqrt( mp33 ),
+    t    = -q / (2*r),
+    cosphi = t<-1 ? -1 : t>1 ? 1 : t,
+    phi  = acos(cosphi),
+    crtr = cuberoot(r),
+    t1   = 2*crtr;
+    root1 = t1 * cos(phi/3) - a/3;
+    root2 = t1 * cos((phi+2*pi)/3) - a/3;
+    root3 = t1 * cos((phi+4*pi)/3) - a/3;
+    return [root1, root2, root3].filter(accept);
+  }
+
+  // three real roots, but two of them are equal:
+  if(discriminant === 0) {
+    u1 = q2 < 0 ? cuberoot(-q2) : -cuberoot(q2);
+    root1 = 2*u1 - a/3;
+    root2 = -u1 - a/3;
+    return [root1, root2].filter(accept);
+  }
+
+  // one real root, two complex roots
+  var sd = sqrt(discriminant);
+  u1 = cuberoot(sd - q2);
+  v1 = cuberoot(sd + q2);
+  root1 = u1 - v1 - a/3;
+  return [root1].filter(accept);
+}
+```
+
+</div>
+
+And that's it. The maths is complicated, but the code is pretty much just "follow the maths, while caching as many values as we can to reduce recomputing things as much as possible" and now we have a way to find all roots for a cubic function and can just move on with using that to find extremities of our curves.
+
+### Quintic and higher order curves: finding numerical solutions
+
+The problem with this is that as the order of the curve goes up, we can't actually solve those equations the normal way. We can't take the function, and then work out what the solutions are. Not to mention that even solving a third order derivative (for a fourth order curve) is already a royal pain in the backside. We need a better solution. We need numerical approaches.
+
+That's a fancy word for saying "rather than solve the function, treat the problem as a sequence of identical operations, the performing of which gets us closer and closer to the real answer". As it turns out, there is a really nice numerical root-finding algorithm, called the [Newton-Raphson](http://en.wikipedia.org/wiki/Newton-Raphson) root finding method (yes, after *[that](https://en.wikipedia.org/wiki/Isaac_Newton)* Newton), which we can make use of.
+
+The Newton-Raphson approach consists of picking a value *t* (any value will do), and getting the corresponding value of the function at that *t* value. For normal functions, we can treat that value as a height. If the height is zero, we're done, we have found a root. If it's not, we take the tangent of the curve at that point, and extend it until it passes the x-axis, which will be at some new point *t*. We then repeat the procedure with this new value, and we keep doing this until we find our root.
+
+Mathematically, this means that for some *t*, at step *n=1*, we perform the following calculation until *f<sub>y</sub>*(*t*) is zero, so that the next *t* is the same as the one we already have:
+
+\[
+  t_{n+1} = t_n - \frac{f_y(t_n)}{f'_y(t_n)}
+\]
+
+(The Wikipedia article has a decent animation for this process, so I'm not adding a sketch for that here unless there are requests for it)
+
+Now, this works well only if we can pick good starting points, and our curve is continuously differentiable and doesn't have oscillations. Glossing over the exact meaning of those terms, the curves we're dealing with conform to those constraints, so as long as we pick good starting points, this will work. So the question is: which starting points do we pick?
+
+As it turns out, Newton-Raphson is so blindingly fast, so we could get away with just not picking: we simply run the algorithm from *t=0* to *t=1* at small steps (say, 1/200<sup>th</sup>) and the result will be all the roots we want. Of course, this may pose problems for high order Bézier curves: 200 steps for a 200<sup>th</sup> order Bézier curve is going to go wrong, but that's okay: there is no reason, ever, to use Bézier curves of crazy high orders. You might use a fifth order curve to get the "nicest still remotely workable" approximation of a full circle with a single Bézier curve, that's pretty much as high as you'll ever need to go.
+
+### In conclusion:
+
+So now that we know how to do root finding, we can determine the first and second derivative roots for our Bézier curves, and show those roots overlaid on the previous graphics:
+
+<Graphic title="Quadratic Bézier curve extremities" setup={this.setupQuadratic} draw={this.draw}/>
+<Graphic title="Cubic Bézier curve extremities" setup={this.setupCubic} draw={this.draw}/>

chapters/extremities/handler.js

@@ -0,0 +1,53 @@
+module.exports = {
+  setupQuadratic: function(api) {
+    var curve = api.getDefaultQuadratic();
+    curve.points[2].x = 210;
+    api.setCurve(curve);
+  },
+
+  setupCubic: function(api) {
+    var curve = api.getDefaultCubic();
+    api.setCurve(curve);
+  },
+
+  draw: function(api, curve) {
+    api.setPanelCount(3);
+    api.reset();
+    api.drawSkeleton(curve);
+    api.drawCurve(curve);
+
+    var tf = curve.order + 1,
+        pad = 20,
+        pts = curve.points,
+        w = api.getPanelWidth(),
+        h = api.getPanelHeight(),
+        offset = { x: w, y: 0 };
+
+    var x_pts = JSON.parse(JSON.stringify(pts)).map((p,t) => { return {x:w*t/tf, y:p.x}; });
+    api.setColor("black");
+    api.drawLine({x:0,y:0}, {x:0,y:h}, offset);
+    api.drawAxes(pad, "t",0,1, "x",0,w, offset);
+    offset.x += pad;
+    var xcurve = new api.Bezier(x_pts);
+    api.drawCurve(xcurve, offset);
+    api.setColor("red");
+    xcurve.extrema().y.forEach(t => {
+      var p = xcurve.get(t);
+      api.drawCircle(p, 3, offset);
+    });
+
+    offset.x += w-pad;
+    var y_pts = JSON.parse(JSON.stringify(pts)).map((p,t) => { return {x:w*t/tf, y:p.y}; });
+    api.setColor("black");
+    api.drawLine({x:0,y:0}, {x:0,y:h}, offset);
+    api.drawAxes(pad, "t",0,1, "y",0,w, offset);
+    offset.x += pad;
+    var ycurve = new api.Bezier(y_pts);
+    api.drawCurve(ycurve, offset);
+    api.setColor("red");
+    ycurve.extrema().y.forEach(t => {
+      var p = ycurve.get(t);
+      api.drawCircle(p, 3, offset);
+    });
+  }
+};

chapters/extremities/index.js

@@ -0,0 +1,3 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+module.exports = generateBase("extremities", handler);

chapters/flattening/content.en-GB.md

@@ -0,0 +1,42 @@
+# Simplified drawing
+
+We can also simplify the drawing process by "sampling" the curve at certain points, and then joining those points up with straight lines, a process known as "flattening", as we are reducing a curve to a simple sequence of straight, "flat" lines.
+
+We can do this is by saying "we want X segments", and then sampling the curve at intervals that are spaced such that we end up with the number of segments we wanted. The advantage of this method is that it's fast: instead of evaluating 100 or even 1000 curve coordinates, we can sample a much lower number and still end up with a curve that sort-of-kind-of looks good enough. The disadvantage of course is that we lose the precision of working with "the real curve", so we usually can't use the flattened for for doing true intersection detection, or curvature alignment.
+
+<Graphic title="Flattening a quadratic curve" setup={this.setupQuadratic} draw={this.drawFlattened} onKeyDown={this.onKeyDown}/>
+<Graphic title="Flattening a cubic curve" setup={this.setupCubic} draw={this.drawFlattened} onKeyDown={this.onKeyDown} />
+
+Try clicking on the sketch and using your up and down arrow keys to lower the number of segments for both the quadratic and cubic curve. You'll notice that for certain curvatures, a low number of segments works quite well, but for more complex curvatures (try this for the cubic curve), a higher number is required to capture the curvature changes properly.
+
+<div className="howtocode">
+
+### How to implement curve flattening
+
+Let's just use the algorithm we just specified, and implement that:
+
+```
+function flattenCurve(curve, segmentCount):
+  step = 1/segmentCount;
+  coordinates = [curve.getXValue(0), curve.getYValue(0)]
+  for(i=1; i <= segmentCount; i++):
+    t = i*step;
+    coordinates.push[curve.getXValue(t), curve.getYValue(t)]
+  return coordinates;
+```
+
+And done, that's the algorithm implemented. That just leaves drawing the resulting "curve" as a sequence of lines:
+
+```
+function drawFlattenedCurve(curve, segmentCount):
+  coordinates = flattenCurve(curve, segmentCount)
+  coord = coordinates[0], _coord;
+  for(i=1; i < coordinates.length; i++):
+    _coord = coordinates[i]
+    line(coord, _coord)
+    coord = _coord
+```
+
+We start with the first coordinate as reference point, and then just draw lines between each point and its next point.
+
+</div>

chapters/flattening/content.ja-JP.md

@@ -0,0 +1,42 @@
+# 簡略化した描画
+
+曲線を複数点で「サンプリング」し、さらにそれを直線で繫げてしまえば、描画の手順を簡略化することができます。単なる一連の直線、つまり「平坦」な線へと曲線を単純化するので、この処理は「平坦化」という名前で知られています。
+
+例えば「X個の線分がほしい」場合には、分割数がそうなるようにサンプリング間隔を選び、曲線をサンプリングします。この方法の利点は速さです。曲線の座標を100個だの1000個だの計算するのではなく、ずっと少ない回数のサンプリングでも、十分きれいに見えるような曲線を作ることができるのです。欠点はもちろん、「本物の曲線」に比べて精度が損なわれてしまうことです。したがって、交点の検出や曲線の位置揃えを正しく行いたい場合には、平坦化した曲線は普通利用できません。
+
+<Graphic title="2次ベジエ曲線の平坦化" setup={this.setupQuadratic} draw={this.drawFlattened} onKeyDown={this.onKeyDown}/>
+<Graphic title="3次ベジエ曲線の平坦化" setup={this.setupCubic} draw={this.drawFlattened} onKeyDown={this.onKeyDown} />
+
+2次ベジエ曲線も3次ベジエ曲線も、図をクリックして上下キーを押すと曲線の分割数が増減しますので、試してみてください。ある曲線では分割数が少なくてもうまくいきますが、曲線が複雑になればなるほど、曲率の変化を正確に捉えるためにはより多くの分割数が必要になることがわかります（3次ベジエ曲線で試してみてください）。
+
+<div className="howtocode">
+
+### 曲線平坦化の実装方法
+
+上でいま解説したアルゴリズムを使って実装するだけです。
+
+```
+function flattenCurve(curve, segmentCount):
+  step = 1/segmentCount;
+  coordinates = [curve.getXValue(0), curve.getYValue(0)]
+  for(i=1; i <= segmentCount; i++):
+    t = i*step;
+    coordinates.push[curve.getXValue(t), curve.getYValue(t)]
+  return coordinates;
+```
+
+これで完了です。実装できました。あとは、一連の直線で結果の「曲線」を描画するだけです。
+
+```
+function drawFlattenedCurve(curve, segmentCount):
+  coordinates = flattenCurve(curve, segmentCount)
+  coord = coordinates[0], _coord;
+  for(i=1; i < coordinates.length; i++):
+    _coord = coordinates[i]
+    line(coord, _coord)
+    coord = _coord
+```
+
+先頭の座標を参照点にしてスタートし、あとはそれぞれの点からその次の点へと、直線を引いていくだけです。
+
+</div>

chapters/flattening/content.zh-CN.md

@@ -0,0 +1,42 @@
+# 简化绘图
+
+我们可以简化绘制的过程，先在具体的位置“采样”曲线，然后用线段把这些点连接起来。由于我们是将曲线转换成一系列“平整的”直线，故将这个过程称之为“拉平(flattening)”。
+
+我们可以先确定“想要X个分段”，然后在间隔的地方采样曲线，得到一定数量的分段。这种方法的优点是速度很快：比起遍历100甚至1000个曲线坐标，我们可以采样比较少的点，仍然得到看起来足够好的曲线。这么做的缺点是，我们失去了“真正的曲线”的精度，因此不能用此方法来做真实的相交检测或曲率对齐。
+
+<Graphic title="拉平一条二次曲线" setup={this.setupQuadratic} draw={this.drawFlattened} onKeyDown={this.onKeyDown}/>
+<Graphic title="拉平一条三次曲线" setup={this.setupCubic} draw={this.drawFlattened} onKeyDown={this.onKeyDown} />
+
+试着点击图形，并用上下键来降低二次曲线和三次曲线的分段数量。你会发现对某些曲率来说，数量少的分段也能做的很好，但对于复杂的曲率（在三次曲线上试试），足够多的分段才能很好地满足曲率的变化。
+
+<div className="howtocode">
+
+### 如何实现曲线的拉平
+
+让我们来实现刚才简述过的算法：
+
+```
+function flattenCurve(curve, segmentCount):
+  step = 1/segmentCount;
+  coordinates = [curve.getXValue(0), curve.getYValue(0)]
+  for(i=1; i <= segmentCount; i++):
+    t = i*step;
+    coordinates.push[curve.getXValue(t), curve.getYValue(t)]
+  return coordinates;
+```
+
+好了，这就是算法的实现。它基本上是画出一系列的线段来模拟“曲线”。
+
+```
+function drawFlattenedCurve(curve, segmentCount):
+  coordinates = flattenCurve(curve, segmentCount)
+  coord = coordinates[0], _coord;
+  for(i=1; i < coordinates.length; i++):
+    _coord = coordinates[i]
+    line(coord, _coord)
+    coord = _coord
+```
+
+我们将第一个坐标作为参考点，然后在相邻两个点之间画线。
+
+</div>

chapters/flattening/handler.js

@@ -0,0 +1,62 @@
+module.exports = {
+  statics: {
+    keyHandlingOptions: {
+      propName: "steps",
+      values: {
+        "38": 1,  // up arrow
+        "40": -1  // down arrow
+      },
+      controller: function(api) {
+        if (api.steps < 1) {
+          api.steps = 1;
+        }
+      }
+    }
+  },
+
+  setupQuadratic: function(api) {
+    var curve = api.getDefaultQuadratic();
+    api.setCurve(curve);
+    api.steps = 3;
+  },
+
+  setupCubic: function(api) {
+    var curve = api.getDefaultCubic();
+    api.setCurve(curve);
+    api.steps = 5;
+  },
+
+  drawFlattened: function(api, curve) {
+    api.reset();
+    api.setColor("#DDD");
+    api.drawSkeleton(curve);
+    api.setColor("#DDD");
+    api.drawCurve(curve);
+    var step = 1 / api.steps;
+    var p0 = curve.points[0], pc;
+    for(var t=step; t<1.0+step; t+=step) {
+      pc = curve.get(Math.min(t,1));
+      api.setColor("red");
+      api.drawLine(p0,pc);
+      p0 = pc;
+    }
+    api.setFill("black");
+    api.text("Curve approximation using "+api.steps+" segments", {x:10, y:15});
+  },
+
+  values: {
+    "38": 1,  // up arrow
+    "40": -1  // down arrow
+  },
+
+  onKeyDown: function(e, api) {
+    var v = this.values[e.keyCode];
+    if(v) {
+      e.preventDefault();
+      api.steps += v;
+      if (api.steps < 1) {
+        api.steps = 1;
+      }
+    }
+  }
+};

chapters/flattening/index.js

@@ -0,0 +1,4 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+var keyHandling = require("../../decorators/keyhandling-decorator.jsx");
+module.exports = keyHandling(generateBase("flattening", handler));

chapters/graduatedoffset/content.en-GB.md

@@ -0,0 +1,16 @@
+# Graduated curve offsetting
+
+What if we want to do graduated offsetting, starting at some distance `s` but ending at some other distance `e`? Well, if we can compute the length of a curve (which we can if we use the Legendre-Gauss quadrature approach) then we can also determine how far "along the line" any point on the curve is. With that knowledge, we can offset a curve so that its offset curve is not uniformly wide, but graduated between with two different offset widths at the start and end.
+
+Like normal offsetting we cut up our curve in sub-curves, and then check at which distance along the original curve each sub-curve starts and ends, as well as to which point on the curve each of the control points map. This gives us the distance-along-the-curve for each interesting point in the sub-curve. If we call the total length of all sub-curves seen prior to seeing "the current" sub-curve `S` (and if the current sub-curve is the first one, `S` is zero), and we call the full length of our original curve `L`, then we get the following graduation values:
+
+- start: map `S` from interval (`0,L`) to interval `(s,e)`
+- c1: `map(<strong>S+d1</strong>, 0,L, s,e)`, d1 = distance along curve to projection of c1
+- c2: `map(<strong>S+d2</strong>, 0,L, s,e)`, d2 = distance along curve to projection of c2
+- ...
+- end: `map(<strong>S+length(subcurve)</strong>, 0,L, s,e)`
+
+At each of the relevant points (start, end, and the projections of the control points onto the curve) we know the curve's normal, so offsetting is simply a matter of taking our original point, and moving it along the normal vector by the offset distance for each point. Doing so will give us the following result (these have with a starting width of 0, and an end width of 40 pixels, but can be controlled with your up and down arrow keys):
+
+<Graphic title="Offsetting a quadratic Bézier curve" setup={this.setupQuadratic} draw={this.draw} onKeyDown={this.props.onKeyDown}/>
+<Graphic title="Offsetting a cubic Bézier curve" setup={this.setupCubic} draw={this.draw} onKeyDown={this.props.onKeyDown}/>

chapters/graduatedoffset/handler.js

@@ -0,0 +1,37 @@
+module.exports = {
+  statics: {
+    keyHandlingOptions: {
+      propName: "distance",
+      values: {
+        "38": 1,  // up arrow
+        "40": -1 // down arrow
+      }
+    }
+  },
+
+  setup: function(api, curve) {
+    api.setCurve(curve);
+    api.distance = 20;
+  },
+
+  setupQuadratic: function(api) {
+    var curve = api.getDefaultQuadratic();
+    this.setup(api, curve);
+  },
+
+  setupCubic: function(api) {
+    var curve = api.getDefaultCubic();
+    this.setup(api, curve);
+  },
+
+  draw: function(api, curve) {
+    api.reset();
+    api.drawSkeleton(curve);
+    api.drawCurve(curve);
+
+
+    api.setColor("blue");
+    var outline = curve.outline(0,0,api.distance,api.distance);
+    outline.curves.forEach(c => api.drawCurve(c));
+  }
+};

chapters/graduatedoffset/index.js

@@ -0,0 +1,4 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+var keyHandling = require("../../decorators/keyhandling-decorator.jsx");
+module.exports = keyHandling(generateBase("graduatedoffset", handler));

chapters/inflections/content.en-GB.md

@@ -0,0 +1,96 @@
+# Curve inflections
+
+Now that we know how to align a curve, there's one more thing we can calculate: inflection points. Imagine we have a variable size circle that we can slide up against our curve. We place it against the curve and adjust its radius so that where it touches the curve, the curvatures of the curve and the circle are the same, and then we start to slide the circle along the curve - for quadratic curves, we can always do this without the circle behaving oddly: we might have to change the radius of the circle as we slide it along, but it'll always sit against the same side of the curve.
+
+But what happens with cubic curves? Imagine we have an S curve and we place our circle at the start of the curve, and start sliding it along. For a while we can simply adjust the radius and things will be fine, but once we get to the midpoint of that S, something odd happens: the circle "flips" from one side of the curve to the other side, in order for the curvatures to keep matching. This is called an inflection, and we can find out where those happen relatively easily.
+
+What we need to do is solve a simple equation:
+
+\[
+  C(t) = 0
+\]
+
+What we're saying here is that given the curvature function *C(t)*, we want to know for which values of *t* this function is zero, meaning there is no "curvature", which will be exactly at the point between our circle being on one side of the curve, and our circle being on the other side of the curve. So what does *C(t)* look like? Actually something that seems not too hard:
+
+\[
+  C(t) = Bézier_x\prime(t) \cdot Bézier_y{\prime\prime}(t) - Bézier_y\prime(t) \cdot Bézier_x{\prime\prime}(t)
+\]
+
+The function *C(t)* is the cross product between the first and second derivative functions for the parametric dimensions of our curve. And, as already shown, derivatives of Bézier curves are just simpler Bézier curves, with very easy to compute new coefficients, so this should be pretty easy.
+
+However as we've seen in the section on aligning, aligning lets us simplify things *a lot*, by completely removing the contributions of the first coordinate from most mathematical evaluations, and removing the last *y* coordinate as well by virtue of the last point lying on the x-axis. So, while we can evaluate *C(t) = 0* for our curve, it'll be much easier to first axis-align the curve and *then* evaluating the curvature function.
+
+<div className="note">
+
+### Let's derive the full formula anyway
+
+Of course, before we do our aligned check, let's see what happens if we compute the curvature function without axis-aligning. We start with the first and second derivatives, given our basis functions:
+
+\[
+\begin{aligned}
+  & Bézier(t) = x_1(1-t)^3 + 3x_2(1-t)^2t + 3x_3(1-t)t^2 + x_4t^3 \\
+  & Bézier^\prime(t) = a(1-t)^2 + 2b(1-t)t + ct^2\  \left\{ a=3(x_2-x_1),b=3(x_3-x_2),c=3(x_4-x_3) \right\} \\
+  & Bézier^{\prime\prime}(t) = u(1-t) + vt\ \left\{ u=2(b-a),v=2(c-b) \right\}\
+\end{aligned}
+\]
+
+And of course the same functions for *y*:
+
+\[
+\begin{aligned}
+  & Bézier(t) = y_1(1-t)^3 + 3y_2(1-t)^2t + 3y_3(1-t)t^2 + y_4t^3 \\
+  & Bézier^\prime(t) = d(1-t)^2 + 2e(1-t)t + ft^2\\
+  & Bézier^{\prime\prime}(t) = w(1-t) + zt
+\end{aligned}
+\]
+
+Asking a computer to now compose the *C(t)* function for us (and to expand it to a readable form of simple terms) gives us this rather overly complicated set of arithmetic expressions:
+
+\[
+\begin{array}{lclclclclcl}
+-18 t^2 x_2 y_1 &+& 36 t^2 x_3 y_1 &-& 18 t^2 x_4 y_1 &+& 18 t^2 x_1 y_2 &-& 54 t^2 x_3 y_2 &&\\
++36 t^2 x_4 y_2 &-& 36 t^2 x_1 y_3 &+& 54 t^2 x_2 y_3 &-& 18 t^2 x_4 y_3 &+& 18 t^2 x_1 y_4 &&\\
+-36 t^2 x_2 y_4 &+& 18 t^2 x_3 y_4 &+& 36 t x_2 y_1   &-& 54 t x_3 y_1   &+& 18 t x_4 y_1 &-& 36 t x_1 y_2 \\
++54 t x_3 y_2   &-& 18 t x_4 y_2   &+& 54 t x_1 y_3   &-& 54 t x_2 y_3   &-& 18 t x_1 y_4 &+& 18 t x_2 y_4 \\
+-18 x_2 y_1     &+& 18 x_3 y_1     &+& 18 x_1 y_2     &-& 18 x_3 y_2     &-& 18 x_1 y_3   &+& 18 x_2 y_3
+\end{array}
+\]
+
+That is... unwieldy. So, we note that there are a lot of terms that involve multiplications involving x1, y1, and y4, which would all disappear if we axis-align our curve, which is why aligning is a great idea.
+
+</div>
+
+Aligning our curve so that three of the eight coefficients become zero, we end up with the following simple term function for *C(t)*:
+
+\[
+  18 \left ( (3 x_3 y_2+2 x_4 y_2+3 x_2 y_3-x_4 y_3)t^2 + (3 x_3 y_2-x_4 y_2-3 x_2 y_3)t + (x_2 y_3-x_3 y_2) \right )
+\]
+
+That's a lot easier to work with: we see a fair number of terms that we can compute and then cache, giving us the following simplification:
+
+\[
+  \left.\begin{matrix}
+    a = x_3 \cdot y_2 \\
+    b = x_4 \cdot y_2 \\
+    c = x_2 \cdot y_3 \\
+    d = x_4 \cdot y_3
+  \end{matrix}\right\}
+  \ C(t) = 18 \cdot \left ( (-3a + 2b + 3c - d)t^2 + (3a - b - 3c)t + (c - a) \right )
+\]
+
+This is a plain quadratic curve, and we know how to solve *C(t) = 0*; we use the quadratic formula:
+
+\[
+  \left.\begin{matrix}
+    x =& 18(-3a + 2b + 3c - d) \\
+    y =& 18(3a - b - 3c) \\
+    z =& 18(c - a)
+  \end{matrix}\right\}
+  \ C(t) = 0 \ \Rightarrow\ t = \frac{-y \pm \sqrt{y^2 - 4 x z}}{2x}
+\]
+
+We can easily compute this value *if* the discriminator isn't a negative number (because we only want real roots, not complex roots), and *if* *x* is not zero, because divisions by zero are rather useless.
+
+Taking that into account, we compute *t*, we disregard any *t* value that isn't in the Bézier interval [0,1], and we now know at which *t* value(s) our curve will inflect.
+
+<Graphic title="Finding cubic Bézier curve inflections" setup={this.setupCubic} draw={this.draw}/>

chapters/inflections/handler.js

@@ -0,0 +1,17 @@
+module.exports = {
+  setupCubic: function(api) {
+    var curve = new api.Bezier(135,25,  25, 135,  215,75,  215,240);
+    api.setCurve(curve);
+  },
+
+  draw: function(api, curve) {
+    api.reset();
+    api.drawSkeleton(curve);
+    api.drawCurve(curve);
+
+    api.setColor("red");
+    curve.inflections().forEach(function(t) {
+      api.drawCircle(curve.get(t), 5);
+    });
+  }
+};

chapters/inflections/index.js

@@ -0,0 +1,3 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+module.exports = generateBase("inflections", handler);

chapters/intersections/content.en-GB.md

@@ -0,0 +1,50 @@
+# Intersections
+
+Let's look at some more things we will want to do with Bézier curves. Almost immediately after figuring out how to get bounding boxes to work, people tend to run into the problem that even though the minimal bounding box (based on rotation) is tight, it's not sufficient to perform true collision detection. It's a good first step to make sure there *might* be a collision (if there is no bounding box overlap, there can't be one), but in order to do real collision detection we need to know whether or not there's an intersection on the actual curve.
+
+We'll do this in steps, because it's a bit of a journey to get to curve/curve intersection checking. First, let's start simple, by implementing a line-line intersection checker. While we can solve this the traditional calculus way (determine the functions for both lines, then compute the intersection by equating them and solving for two unknowns), linear algebra actually offers a nicer solution.
+
+### Line-line intersections
+
+If we have two line segments with two coordinates each, segments A-B and C-D, we can find the intersection of the lines these segments are an intervals on by linear algebra, using the procedure outlined in this [top coder](http://www.topcoder.com/tc?module=Static&d1=tutorials&d2=geometry2#line_line_intersection) article. Of course, we need to make sure that the intersection isn't just on the lines our line segments lie on, but actually on our line segments themselves. So after we find the intersection, we need to verify that it lies without the bounds of our original line segments.
+
+The following graphic implements this intersection detection, showing a red point for an intersection on the lines our segments lie on (thus being a virtual intersection point), and a green point for an intersection that lies on both segments (being a real intersection point).
+
+<Graphic title="Line/line intersections" setup={this.setupLines} draw={this.drawLineIntersection} />
+
+<div className="howtocode">
+
+### Implementing line-line intersections
+
+Let's have a look at how to implement a line-line intersection checking function. The basics are covered in the article mentioned above, but sometimes you need more function signatures, because you might not want to call your function with eight distinct parameters. Maybe you're using point structs for the line. Let's get coding:
+
+```
+lli8 = function(x1,y1,x2,y2,x3,y3,x4,y4):
+  var nx=(x1*y2-y1*x2)*(x3-x4)-(x1-x2)*(x3*y4-y3*x4),
+      ny=(x1*y2-y1*x2)*(y3-y4)-(y1-y2)*(x3*y4-y3*x4),
+      d=(x1-x2)*(y3-y4)-(y1-y2)*(x3-x4);
+  if d=0:
+    return false
+  return point(nx/d, ny/d)
+
+lli4 = function(p1, p2, p3, p4):
+  var x1 = p1.x, y1 = p1.y,
+      x2 = p2.x, y2 = p2.y,
+      x3 = p3.x, y3 = p3.y,
+      x4 = p4.x, y4 = p4.y;
+  return lli8(x1,y1,x2,y2,x3,y3,x4,y4)
+
+lli = function(line1, line2):
+  return lli4(line1.p1, line1.p2, line2.p1, line2.p2)
+```
+
+</div>
+
+### What about curve-line intersections?
+
+Curve/line intersection is more work, but we've already seen the techniques we need to use in order to perform it: first we translate/rotate both the line and curve together, in such a way that the line coincides with the x-axis. This will position the curve in a way that makes it cross the line at points where its y-function is zero. By doing this, the problem of finding intersections between a curve and a line has now become the problem of performing root finding on our translated/rotated curve, as we already covered in the section on finding extremities.
+
+<Graphic title="Quadratic curve/line intersections" setup={this.setupQuadratic} draw={this.draw}/>
+<Graphic title="Cubic curve/line intersections" setup={this.setupCubic} draw={this.draw}/>
+
+Curve/curve intersection, however, is more complicated. Since we have no straight line to align to, we can't simply align one of the curves and be left with a simple procedure. Instead, we'll need to apply two techniques we've met before: de Casteljau's algorithm, and curve splitting.

chapters/intersections/handler.js

@@ -0,0 +1,75 @@
+var min = Math.min, max = Math.max;
+
+module.exports = {
+  setupLines: function(api) {
+    var curve1 = new api.Bezier([50,50,150,110]);
+    var curve2 = new api.Bezier([50,250,170,170]);
+    api.setCurve(curve1, curve2);
+  },
+
+  drawLineIntersection: function(api, curves) {
+    api.reset();
+
+    var lli = api.utils.lli4;
+    var p = lli(
+      curves[0].points[0],
+      curves[0].points[1],
+      curves[1].points[0],
+      curves[1].points[1]
+    );
+
+    var mark = 0;
+    curves.forEach(curve => {
+      api.drawSkeleton(curve);
+      api.setColor("black");
+      if (p) {
+        var pts = curve.points,
+            mx = min(pts[0].x, pts[1].x),
+            my = min(pts[0].y, pts[1].y),
+            Mx = max(pts[0].x, pts[1].x),
+            My = max(pts[0].y, pts[1].y);
+        if (mx <= p.x && my <= p.y && Mx >= p.x && My >= p.y) {
+          api.setColor("#00FF00");
+          mark++;
+        }
+      }
+      api.drawCurve(curve);
+    });
+
+    if (p) {
+      api.setColor(mark < 2 ? "red" : "#00FF00");
+      api.drawCircle(p, 3);
+    }
+  },
+
+  setupQuadratic: function(api) {
+    var curve1 = api.getDefaultQuadratic();
+    var curve2 = new api.Bezier([15,250,220,20]);
+    api.setCurve(curve1, curve2);
+  },
+
+  setupCubic: function(api) {
+    var curve1 = new api.Bezier([100,240, 30,60, 210,230, 160,30]);
+    var curve2 = new api.Bezier([25,260, 230,20]);
+    api.setCurve(curve1, curve2);
+  },
+
+  draw: function(api, curves) {
+    api.reset();
+    curves.forEach(curve => {
+      api.drawSkeleton(curve);
+      api.drawCurve(curve);
+    });
+
+    var utils = api.utils;
+    var line = { p1: curves[1].points[0], p2: curves[1].points[1] };
+    var acpts = utils.align(curves[0].points, line);
+    var nB = new api.Bezier(acpts);
+    var roots = utils.roots(nB.points);
+    roots.forEach(t => {
+      var p = curves[0].get(t);
+      api.drawCircle(p, 3);
+      api.text("t = " + t, {x: p.x + 5, y: p.y + 10});
+    });
+  }
+};

chapters/intersections/index.js

@@ -0,0 +1,3 @@
+var handler = require("./handler.js");
+var generateBase = require("../../generate-base");
+module.exports = generateBase("intersections", handler);

chapters/matrix/content.en-GB.md

@@ -0,0 +1,120 @@
+# Bézier curvatures as matrix operations
+
+We can also represent Bézier curves as matrix operations, by expressing the Bézier formula as a polynomial basis function and a coefficients matrix, and the actual coordinates as a matrix. Let's look at what this means for the cubic curve, using P<sub>...</sub> to refer to coordinate values "in one or more dimensions":
+
+\[
+B(t) = P_1 \cdot (1-t)^3 + P_2 \cdot 3 \cdot (1-t)^2 \cdot t + P_3 \cdot 3 \cdot (1-t) \cdot t^2 + P_4 \cdot t^3
+\]
+
+Disregarding our actual coordinates for a moment, we have:
+
+\[
+B(t) = (1-t)^3 + 3 \cdot (1-t)^2 \cdot t + 3 \cdot (1-t) \cdot t^2 + t^3
+\]
+
+We can write this as a sum of four expressions:
+
+\[
+  \begin{matrix}
+   ... & = & (1-t)^3 \\
+     & + & 3 \cdot (1-t)^2 \cdot t \\
+     & + & 3 \cdot (1-t) \cdot t^2 \\
+     & + & t^3 \\
+  \end{matrix}
+\]
+
+And we can expand these expressions:
+
+\[
+  \begin{matrix}
+   ... & = & (1-t) \cdot (1-t) \cdot (1-t) & = & -t^3 + 3 \cdot t^2 - 3 \cdot t + 1 \\
+     & + & 3 \cdot (1-t) \cdot (1-t) \cdot t & = & 3 \cdot t^3 - 6 \cdot t^2 + 3 \cdot t \\
+     & + & 3 \cdot (1-t) \cdot t \cdot t & = & -3 \cdot t^3 + 3 \cdot t^2 \\
+     & + & t \cdot t \cdot t & = & t^3 \\
+  \end{matrix}
+\]
+
+Furthermore, we can make all the 1 and 0 factors explicit:
+
+\[
+  \begin{matrix}
+   ... & = & -1 \cdot t^3 + 3 \cdot t^2 - 3 \cdot t + 1 \\
+     & + & +3 \cdot t^3 - 6 \cdot t^2 + 3 \cdot t + 0 \\
+     & + & -3 \cdot t^3 + 3 \cdot t^2 + 0 \cdot t + 0 \\
+     & + & +1 \cdot t^3 + 0 \cdot t^2 + 0 \cdot t + 0 \\
+  \end{matrix}
+\]
+
+And *that*, we can view as a series of four matrix operations:
+
+\[
+  \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}-1 \\ 3 \\ -3 \\ 1\end{bmatrix}
+  + \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}3 \\ -6 \\ 3 \\ 0\end{bmatrix}
+  + \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}-3 \\ 3 \\ 0 \\ 0\end{bmatrix}
+  + \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}1 \\ 0 \\ 0 \\ 0\end{bmatrix}
+\]
+
+If we compact this into a single matrix operation, we get:
+
+\[
+  \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}
+      -1 &  3 & -3 & 1 \\
+       3 & -6 &  3 & 0 \\
+      -3 &  3 &  0 & 0 \\
+       1 &  0 &  0 & 0
+    \end{bmatrix}
+\]
+
+This kind of polynomial basis representation is generally written with the bases in increasing order, which means we need to flip our `t` matrix horizontally, and our big "mixing" matrix upside down:
+
+\[
+  \begin{bmatrix}1 & t & t^2 & t^3\end{bmatrix} \cdot \begin{bmatrix}
+       1 &  0 &  0 & 0 \\
+      -3 &  3 &  0 & 0 \\
+       3 & -6 &  3 & 0 \\
+      -1 &  3 & -3 & 1
+    \end{bmatrix}
+\]
+
+And then finally, we can add in our original coordinates as a single third matrix:
+
+\[
+  B(t) = \begin{bmatrix}
+  1 & t & t^2 & t^3
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+   1 &  0 &  0 & 0 \\
+  -3 &  3 &  0 & 0 \\
+   3 & -6 &  3 & 0 \\
+  -1 &  3 & -3 & 1
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  P_1 \\ P_2 \\ P_3 \\ P_4
+  \end{bmatrix}
+\]
+
+We can perform the same trick for the quadratic curve, in which case we end up with:
+
+\[
+  B(t) = \begin{bmatrix}
+  1 & t & t^2
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+   1 &  0 & 0 \\
+  -2 &  2 & 0 \\
+   1 & -2 & 1
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  P_1 \\ P_2 \\ P_3
+  \end{bmatrix}
+\]
+
+If we plug in a `t` value, and then multiply the matrices, we will get exactly the same values as when we evaluate the original polynomial function, or as when we evaluate the curve using progressive linear interpolation.
+
+**So: why would we bother with matrices?** Matrix representations allow us to discover things about functions that would otherwise be hard to tell. It turns out that the curves form [triangular matrices](https://en.wikipedia.org/wiki/Triangular_matrix), and they have a determinant equal to the product of the actual coordinates we use for our curve. It's also invertible, which means there's [a ton of properties](https://en.wikipedia.org/wiki/Invertible_matrix#The_invertible_matrix_theorem) that are all satisfied. Of course, the main question is "why is this useful to us now?", and the answer to that is that it's not *immediately* useful, but you'll be seeing some instances where certain curve properties can be either computed via function manipulation, or via clever use of matrices, and sometimes the matrix approach can be (drastically) faster.
+
+So for now, just remember that we can represent curves this way, and let's move on.

chapters/matrix/content.ja-JP.md

@@ -0,0 +1,120 @@
+# 行列演算としてのベジエ曲線の曲率
+
+ベジエ曲線は、行列演算の形でも表現することができます。ベジエ曲線の式を多項式基底と係数行列で表し、実際の座標も行列として表現するのです。これがどういうことを意味しているのか、3次ベジエ曲線について見てみましょう。
+
+\[
+B(t) = P_1 \cdot (1-t)^3 + P_2 \cdot 3 \cdot (1-t)^2 \cdot t + P_3 \cdot 3 \cdot (1-t) \cdot t^2 + P_4 \cdot t^3
+\]
+
+実際の座標を一旦無視すると、次のようになります。
+
+\[
+B(t) = (1-t)^3 + 3 \cdot (1-t)^2 \cdot t + 3 \cdot (1-t) \cdot t^2 + t^3
+\]
+
+これは、4つの項の和になっています。
+
+\[
+  \begin{matrix}
+   ... & = & (1-t)^3 \\
+     & + & 3 \cdot (1-t)^2 \cdot t \\
+     & + & 3 \cdot (1-t) \cdot t^2 \\
+     & + & t^3 \\
+  \end{matrix}
+\]
+
+それぞれの項を展開します。
+
+\[
+  \begin{matrix}
+   ... & = & (1-t) \cdot (1-t) \cdot (1-t) & = & -t^3 + 3 \cdot t^2 - 3 \cdot t + 1 \\
+     & + & 3 \cdot (1-t) \cdot (1-t) \cdot t & = & 3 \cdot t^3 - 6 \cdot t^2 + 3 \cdot t \\
+     & + & 3 \cdot (1-t) \cdot t \cdot t & = & -3 \cdot t^3 + 3 \cdot t^2 \\
+     & + & t \cdot t \cdot t & = & t^3 \\
+  \end{matrix}
+\]
+
+その上で、係数の0や1もすべて明示的に書けば、このようになります。
+
+\[
+  \begin{matrix}
+   ... & = & -1 \cdot t^3 + 3 \cdot t^2 - 3 \cdot t + 1 \\
+     & + & +3 \cdot t^3 - 6 \cdot t^2 + 3 \cdot t + 0 \\
+     & + & -3 \cdot t^3 + 3 \cdot t^2 + 0 \cdot t + 0 \\
+     & + & +1 \cdot t^3 + 0 \cdot t^2 + 0 \cdot t + 0 \\
+  \end{matrix}
+\]
+
+*さらに*、これは4つの行列演算の和として見ることができます。
+
+\[
+  \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}-1 \\ 3 \\ -3 \\ 1\end{bmatrix}
+  + \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}3 \\ -6 \\ 3 \\ 0\end{bmatrix}
+  + \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}-3 \\ 3 \\ 0 \\ 0\end{bmatrix}
+  + \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}1 \\ 0 \\ 0 \\ 0\end{bmatrix}
+\]
+
+これを1つの行列演算にまとめると、以下のようになります。
+
+\[
+  \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}
+      -1 &  3 & -3 & 1 \\
+       3 & -6 &  3 & 0 \\
+      -3 &  3 &  0 & 0 \\
+       1 &  0 &  0 & 0
+    \end{bmatrix}
+\]
+
+多項式基底をこのような形で表現する場合、通常はその基底を昇冪の順に並べます。したがって、`t`の行列を左右反転させ、大きな「混合」行列は上下に反転させる必要があります。
+
+\[
+  \begin{bmatrix}1 & t & t^2 & t^3\end{bmatrix} \cdot \begin{bmatrix}
+       1 &  0 &  0 & 0 \\
+      -3 &  3 &  0 & 0 \\
+       3 & -6 &  3 & 0 \\
+      -1 &  3 & -3 & 1
+    \end{bmatrix}
+\]
+
+そして最後に、もともとあった座標を3番目の行列として付け加えます。
+
+\[
+  B(t) = \begin{bmatrix}
+  1 & t & t^2 & t^3
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+   1 &  0 &  0 & 0 \\
+  -3 &  3 &  0 & 0 \\
+   3 & -6 &  3 & 0 \\
+  -1 &  3 & -3 & 1
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  P_1 \\ P_2 \\ P_3 \\ P_4
+  \end{bmatrix}
+\]
+
+2次ベジエ曲線の場合も同様に変形することができ、最終的には以下のようになります。
+
+\[
+  B(t) = \begin{bmatrix}
+  1 & t & t^2
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+   1 &  0 & 0 \\
+  -2 &  2 & 0 \\
+   1 & -2 & 1
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  P_1 \\ P_2 \\ P_3
+  \end{bmatrix}
+\]
+
+`t`の値を代入して行列の乗算を行えば、もともとの多項式関数から計算したときの値や、線形補間によって順次求めたときの値と、まったく同じものが得られます。
+
+**では、なぜわざわざ行列を使うのでしょう？** 行列表現を使うことによって、他の表現ではわからなかった関数の性質を発見できるようになります。ベジエ曲線は[三角行列](https://ja.wikipedia.org/wiki/三角行列)の形になり、その行列式は実際の座標の積に等しくなることがわかります。また、この行列には逆行列が存在しますが、これは[さまざまな性質](https://ja.wikipedia.org/wiki/正則行列#.E7.89.B9.E5.BE.B4.E3.81.A5.E3.81.91)が満たされることを意味します。もっとも、疑問の中心は「それでなぜこれが役に立つのか？」という点でしょうが、「ただちには役に立たない」というのが回答です。しかしながら、この先に出てくる曲線のプロパティの中には、関数を操作して求めることも、また行列をうまいこと利用して求めることも、どちらでも可能な例があります。そしてときには、行列による手法の方が（劇的に）速くなる場合があるのです。
+
+というわけで、現時点では「ベジエ曲線は行列で表現可能」ということだけを覚えて、次に進みましょう。

chapters/matrix/content.zh-CN.md

@@ -0,0 +1,120 @@
+# 用矩阵运算来表示贝塞尔曲率
+
+通过将贝塞尔公式表示成一个多项式基本方程、系数矩阵以及实际的坐标，我们也可以用矩阵运算来表示贝塞尔。让我们看一下这对三次曲线来说有什么含义：
+
+\[
+B(t) = P_1 \cdot (1-t)^3 + P_2 \cdot 3 \cdot (1-t)^2 \cdot t + P_3 \cdot 3 \cdot (1-t) \cdot t^2 + P_4 \cdot t^3
+\]
+
+暂时不用管我们具体的坐标，现在有：
+
+\[
+B(t) = (1-t)^3 + 3 \cdot (1-t)^2 \cdot t + 3 \cdot (1-t) \cdot t^2 + t^3
+\]
+
+可以将它写成四个表达式之和：
+
+\[
+  \begin{matrix}
+   ... & = & (1-t)^3 \\
+     & + & 3 \cdot (1-t)^2 \cdot t \\
+     & + & 3 \cdot (1-t) \cdot t^2 \\
+     & + & t^3 \\
+  \end{matrix}
+\]
+
+我们可以扩展这些表达式：
+
+\[
+  \begin{matrix}
+   ... & = & (1-t) \cdot (1-t) \cdot (1-t) & = & -t^3 + 3 \cdot t^2 - 3 \cdot t + 1 \\
+     & + & 3 \cdot (1-t) \cdot (1-t) \cdot t & = & 3 \cdot t^3 - 6 \cdot t^2 + 3 \cdot t \\
+     & + & 3 \cdot (1-t) \cdot t \cdot t & = & -3 \cdot t^3 + 3 \cdot t^2 \\
+     & + & t \cdot t \cdot t & = & t^3 \\
+  \end{matrix}
+\]
+
+更进一步，我们可以加上所有的1和0系数，以便看得更清楚：
+
+\[
+  \begin{matrix}
+   ... & = & -1 \cdot t^3 + 3 \cdot t^2 - 3 \cdot t + 1 \\
+     & + & +3 \cdot t^3 - 6 \cdot t^2 + 3 \cdot t + 0 \\
+     & + & -3 \cdot t^3 + 3 \cdot t^2 + 0 \cdot t + 0 \\
+     & + & +1 \cdot t^3 + 0 \cdot t^2 + 0 \cdot t + 0 \\
+  \end{matrix}
+\]
+
+*现在*，我们可以将它看作四个矩阵运算：
+
+\[
+  \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}-1 \\ 3 \\ -3 \\ 1\end{bmatrix}
+  + \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}3 \\ -6 \\ 3 \\ 0\end{bmatrix}
+  + \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}-3 \\ 3 \\ 0 \\ 0\end{bmatrix}
+  + \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}1 \\ 0 \\ 0 \\ 0\end{bmatrix}
+\]
+
+如果我们将它压缩到一个矩阵操作里，就能得到：
+
+\[
+  \begin{bmatrix}t^3 & t^2 & t & 1\end{bmatrix} \cdot \begin{bmatrix}
+      -1 &  3 & -3 & 1 \\
+       3 & -6 &  3 & 0 \\
+      -3 &  3 &  0 & 0 \\
+       1 &  0 &  0 & 0
+    \end{bmatrix}
+\]
+
+这种多项式表达式一般是以递增的顺序来写的，所以我们应该将`t`矩阵水平翻转，并将大的那个“混合”矩阵上下颠倒：
+
+\[
+  \begin{bmatrix}1 & t & t^2 & t^3\end{bmatrix} \cdot \begin{bmatrix}
+       1 &  0 &  0 & 0 \\
+      -3 &  3 &  0 & 0 \\
+       3 & -6 &  3 & 0 \\
+      -1 &  3 & -3 & 1
+    \end{bmatrix}
+\]
+
+最终，我们可以加入原始的坐标，作为第三个单独矩阵：
+
+\[
+  B(t) = \begin{bmatrix}
+  1 & t & t^2 & t^3
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+   1 &  0 &  0 & 0 \\
+  -3 &  3 &  0 & 0 \\
+   3 & -6 &  3 & 0 \\
+  -1 &  3 & -3 & 1
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  P_1 \\ P_2 \\ P_3 \\ P_4
+  \end{bmatrix}
+\]
+
+我们可以对二次曲线运用相同的技巧，可以得到：
+
+\[
+  B(t) = \begin{bmatrix}
+  1 & t & t^2
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+   1 &  0 & 0 \\
+  -2 &  2 & 0 \\
+   1 & -2 & 1
+  \end{bmatrix}
+  \cdot
+  \begin{bmatrix}
+  P_1 \\ P_2 \\ P_3
+  \end{bmatrix}
+\]
+
+如果我们代入`t`值并乘以矩阵来计算，得到的值与解原始多项式方程或用逐步线性插值计算的结果一样。
+
+**因此：为什么我们要用矩阵来计算？** 用矩阵形式来表达曲线可以让我们去探索函数的一些很难被发现的性质。可以证明的是曲线构成了[三角矩阵](https://en.wikipedia.org/wiki/Triangular_matrix)，并且它与我们用在曲线中的实际坐标的求积相同。它还是可颠倒的，这说明可以满足[大量特性](https://en.wikipedia.org/wiki/Invertible_matrix#The_invertible_matrix_theorem)。当然，主要问题是：“现在，为什么这些对我们很有用？”，答案就是这些并不是立刻就很有用，但是以后你会看到在一些例子中，曲线的一些属性可以用函数式来计算，也可以巧妙地用矩阵运算来得到，有时候矩阵方法要快得多。
+
+所以，现在只要记着我们可以用这种形式来表示曲线，让我们接着往下看看。