this rename is absolutely stupid

docs/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 [axis-aligned bounding boxes](https://en.wikipedia.org/wiki/Bounding_volume#Common_types) (with all curve extremity points shown on the curve):
+
+<graphics-element title="Quadratic Bézier bounding box" src="./quadratic.js"></graphics-element>
+<graphics-element title="Cubic Bézier bounding box" src="./cubic.js"></graphics-element>
+
+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.

docs/chapters/boundingbox/cubic.js

@@ -0,0 +1,41 @@
+setup() {
+    const curve = this.curve = Bezier.defaultCubic(this);
+    curve.points[2].x = 210;
+    setMovable(curve.points);
+}
+
+draw() {
+  clear();
+  const curve = this.curve;
+  curve.drawSkeleton();
+  curve.drawCurve();
+  curve.drawPoints();
+
+  noFill();
+
+  let minx = Number.MAX_SAFE_INTEGER,
+      miny = minx,
+      maxx = Number.MIN_SAFE_INTEGER,
+      maxy = maxx;
+
+  setStroke(`red`);
+
+  let extrema = curve.extrema();
+
+  [0, ...extrema.x, ...extrema.y, 1].forEach(t => {
+      let p = curve.get(t);
+      if (p.x < minx) minx = p.x;
+      if (p.x > maxx) maxx = p.x;
+      if (p.y < miny) miny = p.y;
+      if (p.y > maxy) maxy = p.y;
+      if (t > 0 && t< 1) circle(p.x, p.y, 3);
+  });
+
+  setStroke(`#0F0`);
+  rect(minx, miny, maxx - minx, maxy - miny);
+}
+
+
+onMouseMove() {
+  redraw();
+}

docs/chapters/boundingbox/quadratic.js

@@ -0,0 +1,39 @@
+setup() {
+    this.curve = Bezier.defaultQuadratic(this);
+    setMovable(this.curve.points);
+}
+
+draw() {
+    clear();
+    const curve = this.curve;
+    curve.drawSkeleton();
+    curve.drawCurve();
+    curve.drawPoints();
+
+    noFill();
+
+    let minx = Number.MAX_SAFE_INTEGER,
+        miny = minx,
+        maxx = Number.MIN_SAFE_INTEGER,
+        maxy = maxx;
+
+    setStroke(`red`);
+
+    let extrema = curve.extrema();
+
+    [0, ...extrema.x, ...extrema.y, 1].forEach(t => {
+        let p = curve.get(t);
+        if (p.x < minx) minx = p.x;
+        if (p.x > maxx) maxx = p.x;
+        if (p.y < miny) miny = p.y;
+        if (p.y > maxy) maxy = p.y;
+        if (t > 0 && t< 1) circle(p.x, p.y, 3);
+    });
+
+    setStroke(`#0F0`);
+    rect(minx, miny, maxx - minx, maxy - miny);
+}
+
+onMouseMove() {
+    redraw();
+}