error-only for http-server, better parameter parsing for sketch markup

docs/chapters/aligning/aligning.js

@@ -1,14 +1,17 @@
+let curve;
+
 setup() {
-    this.curve = Bezier.defaultCubic(this);
+    const type = this.parameters.type ?? `quadratic`;
-    setMovable(this.curve.points);
+    curve = (type === `quadratic`) ? Bezier.defaultQuadratic(this) : Bezier.defaultCubic(this);
+    setMovable(curve.points);
 }
 
 draw() {
     resetTransform();
     clear();
-    this.curve.drawSkeleton();
+    curve.drawSkeleton();
-    this.curve.drawCurve();
+    curve.drawCurve();
-    this.curve.drawPoints();
+    curve.drawPoints();
 
     translate(this.width/2, 0);
     line(0,0,0,this.height);
@@ -16,7 +19,7 @@ draw() {
     this.drawRTCurve(
         this.rotatePoints(
             this.translatePoints(
-                this.curve.points
+                curve.points
             )
         )
     );
@@ -35,8 +38,9 @@ translatePoints(points) {
 
 rotatePoints(points) {
     // rotate so that last point is (...,0)
-    let dx = points[3].x;
+    let degree = curve.points.length - 1;
-    let dy = points[3].y;
+    let dx = points[degree].x;
+    let dy = points[degree].y;
     let a = atan2(dy, dx);
     return points.map(v => {
         return {
@@ -47,6 +51,7 @@ rotatePoints(points) {
 }
 
 drawRTCurve(points) {
+    let degree = curve.points.length - 1;
     let ncurve = new Bezier(this, points);
     translate(60, this.height/2);
     setStroke(`grey`);
@@ -55,5 +60,5 @@ drawRTCurve(points) {
     ncurve.drawCurve();
     setFill(`black`);
     text(`(0,0)`, 5,15);
-    text(`(${points[3].x|0},0)`, points[3].x, -5, CENTER);
+    text(`(${points[degree].x|0},0)`, points[degree].x, -5, CENTER);
 }

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

@@ -40,5 +40,7 @@ If we drop all the zero-terms, this gives us:
 
 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:
 
-<graphics-element title="Aligning a quadratic curve" width="550" src="./quadratic.js"></graphics-element>
+<div class="figure">
-<graphics-element title="Aligning a cubic curve" width="550" src="./cubic.js"></graphics-element>
+<graphics-element title="Aligning a quadratic curve" width="550" src="./aligning.js" data-type="quadratic"></graphics-element>
+<graphics-element title="Aligning a cubic curve" width="550" src="./aligning.js" data-type="cubic"></graphics-element>
+</div>

docs/chapters/aligning/quadratic.js

@@ -1,59 +0,0 @@
-setup() {
-    this.curve = Bezier.defaultQuadratic(this);
-    setMovable(this.curve.points);
-}
-
-draw() {
-    resetTransform();
-    clear();
-    this.curve.drawSkeleton();
-    this.curve.drawCurve();
-    this.curve.drawPoints();
-
-    translate(this.width/2, 0);
-    line(0,0,0,this.height);
-
-    this.drawRTCurve(
-        this.rotatePoints(
-            this.translatePoints(
-                this.curve.points
-            )
-        )
-    );
-}
-
-translatePoints(points) {
-    // translate to (0,0)
-    let m = points[0];
-    return points.map(v => {
-        return {
-            x: v.x - m.x,
-            y: v.y - m.y
-        }
-    });
-}
-
-rotatePoints(points) {
-    // rotate so that last point is (...,0)
-    let dx = points[2].x;
-    let dy = points[2].y;
-    let a = atan2(dy, dx);
-    return points.map(v => {
-        return {
-            x: v.x * cos(-a) - v.y * sin(-a),
-            y: v.x * sin(-a) + v.y * cos(-a)
-        };
-    });
-}
-
-drawRTCurve(points) {
-    let ncurve = new Bezier(this, points);
-    translate(10, this.height/2);
-    setStroke(`grey`);
-    line(0,-this.height,0,this.height);
-    line(-10,0,this.width,0);
-    ncurve.drawCurve();
-    setFill(`black`);
-    text(`(0,0)`, 5,15);
-    text(`(${points[2].x|0},0)`, points[2].x, 15, CENTER);
-}

docs/chapters/arclength/draw-slices.js

@@ -1,5 +1,5 @@
 setup() {
-    this.steps = getParameter(`steps`, 10);
+    this.steps = this.parameters.steps ?? 10;
 }
 
 draw() {

docs/chapters/arclengthapprox/approximate.js

@@ -1,7 +1,7 @@
 let curve;
 
 setup() {
-  let type = getParameter(`type`, `quadratic`);
+  let type = this.parameters.type ?? `quadratic`;
   curve = (type === `quadratic`) ? Bezier.defaultQuadratic(this) : Bezier.defaultCubic(this);
   setMovable(curve.points);
   setSlider(`.slide-control`, `steps`, type === `quadratic` ? 4 : 8);

docs/chapters/boundingbox/bbox.js

@@ -1,7 +1,7 @@
 let curve;
 
 setup() {
-    let type = getParameter(`type`, `quadratic`);
+    let type = this.parameters.type ?? `quadratic`;
     if (type === `quadratic`) {
         curve = Bezier.defaultQuadratic(this);
     } else {

docs/chapters/components/components.js

@@ -1,7 +1,7 @@
 let curve;
 
 setup() {
-  let type = getParameter(`type`, `quadratic`);
+  let type = this.parameters.type ?? `quadratic`;
   if (type === `quadratic`) {
       curve = Bezier.defaultQuadratic(this);
   } else {

docs/chapters/control/lerp.js

@@ -2,7 +2,7 @@ setup() {
     const w = this.width,
           h = this.height;
 
-    const degree = this.getParameter(`degree`, 3);
+    const degree = this.parameters.degree ?? 3;
 
     if (degree === 3) {
         this.f = [

docs/chapters/extended/extended.js

@@ -1,7 +1,7 @@
 let curve;
 
 setup() {
-    const type = this.getParameter(`type`, `quadratic`);
+    const type = this.parameters.type ?? `quadratic`;
     curve = (type === `quadratic`) ? Bezier.defaultQuadratic(this) : Bezier.defaultCubic(this);
     setMovable(curve.points);
 }

docs/chapters/extremities/extremities.js

@@ -1,7 +1,7 @@
 let curve;
 
 setup() {
-    const type = this.getParameter(`type`, `quadratic`);
+    const type = this.parameters.type ?? `quadratic`;
     if (type === `quadratic`) {
         curve = Bezier.defaultQuadratic(this);
     } else {

docs/chapters/flattening/flatten.js

@@ -1,7 +1,7 @@
 let curve;
 
 setup() {
-  const type = getParameter(`type`, `quadratic`);
+  const type = this.parameters.type ?? `quadratic`;
   curve = (type === `quadratic`) ? Bezier.defaultQuadratic(this) : Bezier.defaultCubic(this);
   setMovable(curve.points);
   setSlider(`.slide-control`, `steps`, (type === `quadratic`) ? 4 : 8);

docs/chapters/tightbounds/tightbounds.js

@@ -1,7 +1,7 @@
 let curve;
 
 setup() {
-    const type = this.type = getParameter(`type`, `quadratic`);
+    const type = this.parameters.type ?? `quadratic`;
     curve = (type === `quadratic`) ? Bezier.defaultQuadratic(this) : Bezier.defaultCubic(this);
     setMovable(curve.points);
 }
@@ -62,7 +62,7 @@ translatePoints(points) {
 
 rotatePoints(points) {
     // rotate so that last point is (...,0)
-    let last = this.type === `quadratic` ? 2 : 3;
+    let last = points.length - 1;
     let dx = points[last].x;
     let dy = points[last].y;
     let a = atan2(dy, dx);

docs/index.html

@@ -328,7 +328,7 @@ function Bezier(3,t):
 <div class="figure">
   <graphics-element title="Quadratic interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\control\75888dd88efe5e9c041fefd8b05975f3.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\control\62d7ef11f60acde82868424364a477e8.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -336,7 +336,7 @@ function Bezier(3,t):
 
   <graphics-element title="Cubic interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\control\66333ae5bfbcb51d424e5670ab53262e.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\control\9331dd83c72b233190eaca1cfcc169db.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -344,7 +344,7 @@ function Bezier(3,t):
 
   <graphics-element title="15th degree interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\control\ee31748e196d3be41c675b05200a7f76.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\control\44242f6a6be718bea46292369d509520.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -462,12 +462,12 @@ function RationalBezier(3,t,w[],r[]):
 <div class="figure">
 <graphics-element title="Quadratic infinite interval Bézier curve" width="275" height="275" src="./chapters/extended/extended.js" data-type="quadratic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\extended\c6ac50057ea7e251a5bf11737878a23a.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\extended\391a61142c56b79260680aefb08cd9c4.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 <graphics-element title="Cubic infinite interval Bézier curve" width="275" height="275" src="./chapters/extended/extended.js" data-type="cubic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\extended\97a1ceb81980368d08d8d2f2e8719936.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\extended\baeceec6e1587794b8b275a90d5d85e9.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 </div>
@@ -560,7 +560,7 @@ function RationalBezier(3,t,w[],r[]):
 <div class="figure">
   <graphics-element title="Flattening a quadratic curve" width="275" height="275" src="./chapters/flattening/flatten.js" data-type="quadratic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\flattening\a6cd214a7f8725430d2bb99a9da385f2.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\flattening\3deec756c96e53127cd1d615c61043ae.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="1" max="16" step="1" value="4" class="slide-control">
@@ -568,7 +568,7 @@ function RationalBezier(3,t,w[],r[]):
 
   <graphics-element title="Flattening a cubic curve" width="275" height="275" src="./chapters/flattening/flatten.js" data-type="cubic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\flattening\a77519c299fce1ce95c84a1e5f7c0478.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\flattening\e2bb7113d5cda2e3fd29bbc54fbe8841.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="1" max="24" step="1" value="8" class="slide-control">
@@ -928,13 +928,13 @@ treated as a sequence of three (elementary) shear operations. When we combine th
 <p>If you move points in a curve sideways, you should only see the middle graph change; likewise, moving points vertically should only show a change in the right graph.</p>
 <graphics-element title="Quadratic Bézier curve components" width="825" height="275" src="./chapters/components/components.js" data-type="quadratic">
         <fallback-image>
-          <img width="825px" height="275px" src="images\chapters\components\c3df5265111b12dabee757a22b474d29.png" loading="lazy">
+          <img width="825px" height="275px" src="images\chapters\components\f7490a1c523d4dc8772b621b4a61fdd4.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 
 <graphics-element title="Cubic Bézier curve components" width="825" height="275" src="./chapters/components/components.js" data-type="cubic">
         <fallback-image>
-          <img width="825px" height="275px" src="images\chapters\components\168ec97a7e9ba5793ad9d2e619f71cb3.png" loading="lazy">
+          <img width="825px" height="275px" src="images\chapters\components\35d69b33228ae64221385047177b67a5.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 
@@ -1070,14 +1070,14 @@ function getCubicRoots(pa, pb, pc, pd) {
 <p>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. For the quadratic curve, that means just the first derivative, in red:</p>
 <graphics-element title="Quadratic Bézier curve extremities" width="825" height="275" src="./chapters/extremities/extremities.js" data-type="quadratic">
         <fallback-image>
-          <img width="825px" height="275px" src="images\chapters\extremities\2be56b901cc023ece52f001d770893f8.png" loading="lazy">
+          <img width="825px" height="275px" src="images\chapters\extremities\6d246f1c53e40bd5156ef50c4046db51.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 
 <p>And for cubic curves, that means first and second derivatives, in red and purple respectively:</p>
 <graphics-element title="Cubic Bézier curve extremities" width="825" height="275" src="./chapters/extremities/extremities.js" data-type="cubic">
         <fallback-image>
-          <img width="825px" height="275px" src="images\chapters\extremities\308bb36c8390ecfca6eed0cccfeec73b.png" loading="lazy">
+          <img width="825px" height="275px" src="images\chapters\extremities\05ff4df8b73ba25dffeb42f768e0e9c4.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 
@@ -1095,12 +1095,12 @@ function getCubicRoots(pa, pb, pc, pd) {
 <div class="figure">
 <graphics-element title="Quadratic Bézier bounding box" width="275" height="275" src="./chapters/boundingbox/bbox.js" data-type="quadratic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\boundingbox\3e26118e0f37de916bb52f17850ccdc3.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\boundingbox\e2c621442e98e2cd20af7efe1cfb041f.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 <graphics-element title="Cubic Bézier bounding box" width="275" height="275" src="./chapters/boundingbox/bbox.js" data-type="cubic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\boundingbox\797277014fb93e37fd47f8f2fcdb3b89.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\boundingbox\f8989a62ebec9d6f123291c146caab5b.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 </div>
@@ -1120,16 +1120,18 @@ function getCubicRoots(pa, pb, pc, pd) {
 <p>If we drop all the zero-terms, this gives us:</p>
 <img class="LaTeX SVG" src="./images/chapters/aligning/c78b203ff33e5c1606728b552505d61c.svg" width="397px" height="40px" loading="lazy">
 <p>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:</p>
-<graphics-element title="Aligning a quadratic curve" width="550" height="275" src="./chapters/aligning/quadratic.js" >
+<div class="figure">
+<graphics-element title="Aligning a quadratic curve" width="550" height="275" src="./chapters/aligning/aligning.js" data-type="quadratic">
         <fallback-image>
-          <img width="550px" height="275px" src="images\chapters\aligning\2a6c6fb5527e3c00c683136a74075810.png" loading="lazy">
+          <img width="550px" height="275px" src="images\chapters\aligning\2bac71234aed2bca2686fdbce7dd78d8.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
-<graphics-element title="Aligning a cubic curve" width="550" height="275" src="./chapters/aligning/cubic.js" >
+<graphics-element title="Aligning a cubic curve" width="550" height="275" src="./chapters/aligning/aligning.js" data-type="cubic">
         <fallback-image>
-          <img width="550px" height="275px" src="images\chapters\aligning\117193f78662930b6cfb204d40263796.png" loading="lazy">
+          <img width="550px" height="275px" src="images\chapters\aligning\ed3e2ad3961fbf9e9e5bc951f1d79302.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
+</div>
 
       </section>
 <section id="tightbounds">
@@ -1139,12 +1141,12 @@ function getCubicRoots(pa, pb, pc, pd) {
 <div class="figure">
 <graphics-element title="Aligning a quadratic curve" width="275" height="275" src="./chapters/tightbounds/tightbounds.js" data-type="quadratic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\tightbounds\ed626d23d5f258a3f599e881b5f12aad.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\tightbounds\ccc77ae1f57d7dd7ce4d5397fe1b140b.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 <graphics-element title="Aligning a cubic curve" width="275" height="275" src="./chapters/tightbounds/tightbounds.js" data-type="cubic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\tightbounds\e087b9e9822e65dcc4ff7673db10e91c.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\tightbounds\419415bee6ffd7598c035c42de09a94f.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 </div>
@@ -1322,17 +1324,17 @@ y = curve.get(t).y</code></pre>
 <div class="figure">
   <graphics-element title="A function's approximated integral" width="275" height="275" src="./chapters/arclength/draw-slices.js" data-steps="10">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\arclength\0e2627e80066b53966050764aec146ac.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\arclength\580c33f599b70de44b17c546098508aa.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
   <graphics-element title="A better approximation" width="275" height="275" src="./chapters/arclength/draw-slices.js" data-steps="24">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\arclength\457d2450a6a7f786328e2282d6613cf1.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\arclength\0d7138b99f5986332a050a8479eefa57.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
   <graphics-element title="An even better approximation" width="275" height="275" src="./chapters/arclength/draw-slices.js" data-steps="99">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\arclength\72c05323cfc7d739acad1cd969be7b72.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\arclength\475547c773a7279dc037c9ced2c8c6dc.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 </div>
@@ -1368,7 +1370,7 @@ y = curve.get(t).y</code></pre>
 
 <graphics-element title="Approximate quadratic curve arc length" width="275" height="275" src="./chapters/arclengthapprox/approximate.js" data-type="quadratic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\arclengthapprox\e617047054199de6b96eb910db73b3ee.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\arclengthapprox\a040f6b7c7c33ada25ecfd1060726545.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="1" max="24" step="1" value="4" class="slide-control">
@@ -1376,7 +1378,7 @@ y = curve.get(t).y</code></pre>
 
 <graphics-element title="Approximate cubic curve arc length" width="275" height="275" src="./chapters/arclengthapprox/approximate.js" data-type="cubic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\arclengthapprox\2fefae0125551f8f8b899f14daf07960.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\arclengthapprox\c270144cc41e4ebc4b0b2331473530fa.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="1" max="32" step="1" value="8" class="slide-control">

docs/ja-JP/index.html

@@ -330,7 +330,7 @@ function Bezier(3,t):
 <div class="figure">
   <graphics-element title="2次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\control\75888dd88efe5e9c041fefd8b05975f3.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\control\62d7ef11f60acde82868424364a477e8.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -338,7 +338,7 @@ function Bezier(3,t):
 
   <graphics-element title="3次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\control\66333ae5bfbcb51d424e5670ab53262e.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\control\9331dd83c72b233190eaca1cfcc169db.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -346,7 +346,7 @@ function Bezier(3,t):
 
   <graphics-element title="15次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\control\ee31748e196d3be41c675b05200a7f76.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\control\44242f6a6be718bea46292369d509520.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -460,12 +460,12 @@ function RationalBezier(3,t,w[],r[]):
 <div class="figure">
 <graphics-element title="無限区間の2次ベジエ曲線" width="275" height="275" src="./chapters/extended/extended.js" data-type="quadratic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\extended\c6ac50057ea7e251a5bf11737878a23a.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\extended\391a61142c56b79260680aefb08cd9c4.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 <graphics-element title="無限区間の3次ベジエ曲線" width="275" height="275" src="./chapters/extended/extended.js" data-type="cubic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\extended\97a1ceb81980368d08d8d2f2e8719936.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\extended\baeceec6e1587794b8b275a90d5d85e9.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 </div>
@@ -557,7 +557,7 @@ function RationalBezier(3,t,w[],r[]):
 <div class="figure">
   <graphics-element title="2次ベジエ曲線の平坦化" width="275" height="275" src="./chapters/flattening/flatten.js" data-type="quadratic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\flattening\a6cd214a7f8725430d2bb99a9da385f2.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\flattening\3deec756c96e53127cd1d615c61043ae.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="1" max="16" step="1" value="4" class="slide-control">
@@ -565,7 +565,7 @@ function RationalBezier(3,t,w[],r[]):
 
   <graphics-element title="3次ベジエ曲線の平坦化" width="275" height="275" src="./chapters/flattening/flatten.js" data-type="cubic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\flattening\a77519c299fce1ce95c84a1e5f7c0478.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\flattening\e2bb7113d5cda2e3fd29bbc54fbe8841.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="1" max="24" step="1" value="8" class="slide-control">
@@ -925,13 +925,13 @@ treated as a sequence of three (elementary) shear operations. When we combine th
 <p>If you move points in a curve sideways, you should only see the middle graph change; likewise, moving points vertically should only show a change in the right graph.</p>
 <graphics-element title="Quadratic Bézier curve components" width="825" height="275" src="./chapters/components/components.js" data-type="quadratic">
         <fallback-image>
-          <img width="825px" height="275px" src="images\chapters\components\c3df5265111b12dabee757a22b474d29.png" loading="lazy">
+          <img width="825px" height="275px" src="images\chapters\components\f7490a1c523d4dc8772b621b4a61fdd4.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 
 <graphics-element title="Cubic Bézier curve components" width="825" height="275" src="./chapters/components/components.js" data-type="cubic">
         <fallback-image>
-          <img width="825px" height="275px" src="images\chapters\components\168ec97a7e9ba5793ad9d2e619f71cb3.png" loading="lazy">
+          <img width="825px" height="275px" src="images\chapters\components\35d69b33228ae64221385047177b67a5.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 
@@ -1067,14 +1067,14 @@ function getCubicRoots(pa, pb, pc, pd) {
 <p>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. For the quadratic curve, that means just the first derivative, in red:</p>
 <graphics-element title="Quadratic Bézier curve extremities" width="825" height="275" src="./chapters/extremities/extremities.js" data-type="quadratic">
         <fallback-image>
-          <img width="825px" height="275px" src="images\chapters\extremities\2be56b901cc023ece52f001d770893f8.png" loading="lazy">
+          <img width="825px" height="275px" src="images\chapters\extremities\6d246f1c53e40bd5156ef50c4046db51.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 
 <p>And for cubic curves, that means first and second derivatives, in red and purple respectively:</p>
 <graphics-element title="Cubic Bézier curve extremities" width="825" height="275" src="./chapters/extremities/extremities.js" data-type="cubic">
         <fallback-image>
-          <img width="825px" height="275px" src="images\chapters\extremities\308bb36c8390ecfca6eed0cccfeec73b.png" loading="lazy">
+          <img width="825px" height="275px" src="images\chapters\extremities\05ff4df8b73ba25dffeb42f768e0e9c4.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 
@@ -1092,12 +1092,12 @@ function getCubicRoots(pa, pb, pc, pd) {
 <div class="figure">
 <graphics-element title="Quadratic Bézier bounding box" width="275" height="275" src="./chapters/boundingbox/bbox.js" data-type="quadratic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\boundingbox\3e26118e0f37de916bb52f17850ccdc3.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\boundingbox\e2c621442e98e2cd20af7efe1cfb041f.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 <graphics-element title="Cubic Bézier bounding box" width="275" height="275" src="./chapters/boundingbox/bbox.js" data-type="cubic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\boundingbox\797277014fb93e37fd47f8f2fcdb3b89.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\boundingbox\f8989a62ebec9d6f123291c146caab5b.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 </div>
@@ -1117,16 +1117,18 @@ function getCubicRoots(pa, pb, pc, pd) {
 <p>If we drop all the zero-terms, this gives us:</p>
 <img class="LaTeX SVG" src="./images/chapters/aligning/c78b203ff33e5c1606728b552505d61c.svg" width="397px" height="40px" loading="lazy">
 <p>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:</p>
-<graphics-element title="Aligning a quadratic curve" width="550" height="275" src="./chapters/aligning/quadratic.js" >
+<div class="figure">
+<graphics-element title="Aligning a quadratic curve" width="550" height="275" src="./chapters/aligning/aligning.js" data-type="quadratic">
         <fallback-image>
-          <img width="550px" height="275px" src="images\chapters\aligning\2a6c6fb5527e3c00c683136a74075810.png" loading="lazy">
+          <img width="550px" height="275px" src="images\chapters\aligning\2bac71234aed2bca2686fdbce7dd78d8.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
-<graphics-element title="Aligning a cubic curve" width="550" height="275" src="./chapters/aligning/cubic.js" >
+<graphics-element title="Aligning a cubic curve" width="550" height="275" src="./chapters/aligning/aligning.js" data-type="cubic">
         <fallback-image>
-          <img width="550px" height="275px" src="images\chapters\aligning\117193f78662930b6cfb204d40263796.png" loading="lazy">
+          <img width="550px" height="275px" src="images\chapters\aligning\ed3e2ad3961fbf9e9e5bc951f1d79302.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
+</div>
 
       </section>
 <section id="tightbounds">
@@ -1136,12 +1138,12 @@ function getCubicRoots(pa, pb, pc, pd) {
 <div class="figure">
 <graphics-element title="Aligning a quadratic curve" width="275" height="275" src="./chapters/tightbounds/tightbounds.js" data-type="quadratic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\tightbounds\ed626d23d5f258a3f599e881b5f12aad.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\tightbounds\ccc77ae1f57d7dd7ce4d5397fe1b140b.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 <graphics-element title="Aligning a cubic curve" width="275" height="275" src="./chapters/tightbounds/tightbounds.js" data-type="cubic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\tightbounds\e087b9e9822e65dcc4ff7673db10e91c.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\tightbounds\419415bee6ffd7598c035c42de09a94f.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 </div>
@@ -1319,17 +1321,17 @@ y = curve.get(t).y</code></pre>
 <div class="figure">
   <graphics-element title="A function's approximated integral" width="275" height="275" src="./chapters/arclength/draw-slices.js" data-steps="10">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\arclength\0e2627e80066b53966050764aec146ac.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\arclength\580c33f599b70de44b17c546098508aa.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
   <graphics-element title="A better approximation" width="275" height="275" src="./chapters/arclength/draw-slices.js" data-steps="24">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\arclength\457d2450a6a7f786328e2282d6613cf1.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\arclength\0d7138b99f5986332a050a8479eefa57.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
   <graphics-element title="An even better approximation" width="275" height="275" src="./chapters/arclength/draw-slices.js" data-steps="99">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\arclength\72c05323cfc7d739acad1cd969be7b72.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\arclength\475547c773a7279dc037c9ced2c8c6dc.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 </div>
@@ -1365,7 +1367,7 @@ y = curve.get(t).y</code></pre>
 
 <graphics-element title="Approximate quadratic curve arc length" width="275" height="275" src="./chapters/arclengthapprox/approximate.js" data-type="quadratic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\arclengthapprox\e617047054199de6b96eb910db73b3ee.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\arclengthapprox\a040f6b7c7c33ada25ecfd1060726545.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="1" max="24" step="1" value="4" class="slide-control">
@@ -1373,7 +1375,7 @@ y = curve.get(t).y</code></pre>
 
 <graphics-element title="Approximate cubic curve arc length" width="275" height="275" src="./chapters/arclengthapprox/approximate.js" data-type="cubic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\arclengthapprox\2fefae0125551f8f8b899f14daf07960.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\arclengthapprox\c270144cc41e4ebc4b0b2331473530fa.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="1" max="32" step="1" value="8" class="slide-control">

docs/js/custom-element/api/base-api.js

@@ -1,5 +1,3 @@
-import { hatch } from "./util/hatchery.js";
-
 /**
  * The base API class, responsible for such things as setting up canvas event
  * handling, method accumulation, custom element binding, etc. etc.
@@ -65,7 +63,17 @@ class BaseAPI {
         this.dataset = {};
       }
     }
-    this.HATCHING = hatch(canvasBuildFunction);
+    this.parameters = Object.fromEntries(
+      Object.entries(this.dataset)
+        .map((pair) => {
+          let v = pair[1];
+          if (v === `null` || v === `undefined`) return [];
+          let d = parseFloat(v);
+          // evaluate "string is number" using == rather than ===
+          return [pair[0], v == d ? d : v];
+        })
+        .filter((v) => v.length)
+    );
     this.addListeners();
     this.setSize(width, height);
     this.currentPoint = false;

docs/js/custom-element/api/graphics-api.js

@@ -138,19 +138,6 @@ class GraphicsAPI extends BaseAPI {
     points.forEach((p) => this.movable.push(p));
   }
 
-  /**
-   * Get a parameter specified via data-attribute
-   */
-  getParameter(name, fallback) {
-    let val = this.dataset[name];
-    if (val) {
-      let asFloat = parseFloat(val);
-      if (val == asFloat) return asFloat;
-      return val;
-    }
-    return fallback;
-  }
-
   /**
    * Set up a slider to control a named, numerical property in the sketch.
    *

docs/js/custom-element/api/util/hatchery.js

@@ -1,111 +0,0 @@
-const HATCHING = [];
-
-/**
- * Build hatching patterns. These are built fully unrolled,
- * mostly because they're small and there's no actual benefit
- * to abstracting the drawing for only six patterns.
- */
-function hatch(canvasBuildFunction) {
-  if (HATCHING.length > 0) {
-    return HATCHING;
-  }
-
-  let cvs,
-    ctx,
-    w = 9,
-    h = 9;
-
-  if (canvasBuildFunction) {
-    let b = canvasBuildFunction(w, h);
-    cvs = b.canvas;
-    ctx = b.ctx;
-  } else {
-    cvs = document.createElement("canvas");
-    cvs.width = w;
-    cvs.height = h;
-    ctx = cvs.getContext(`2d`);
-  }
-
-  ctx.fillStyle = `#0000FF30`;
-  ctx.lineWidth = 1;
-
-  const paint = (x, y) => ctx.fillRect(x, y, 1, 1);
-
-  // pattern: \
-  ctx.clearRect(0, 0, w, h);
-  paint(0, 0);
-  paint(1, 1);
-  paint(2, 2);
-  paint(3, 3);
-  paint(4, 4);
-  paint(5, 5);
-  paint(6, 6);
-  paint(7, 7);
-  paint(8, 8);
-  HATCHING.push(ctx.createPattern(cvs, "repeat"));
-
-  // pattern: /
-  ctx.clearRect(0, 0, w, h);
-  paint(0, 8);
-  paint(1, 7);
-  paint(2, 6);
-  paint(3, 5);
-  paint(4, 4);
-  paint(5, 3);
-  paint(6, 2);
-  paint(7, 1);
-  paint(8, 0);
-  HATCHING.push(ctx.createPattern(cvs, "repeat"));
-
-  // pattern: x (without clearing, because we can overlay)
-  paint(0, 0);
-  paint(1, 1);
-  paint(2, 2);
-  paint(3, 3);
-  paint(5, 5);
-  paint(6, 6);
-  paint(7, 7);
-  paint(8, 8);
-  HATCHING.push(ctx.createPattern(cvs, "repeat"));
-
-  // pattern: |
-  ctx.clearRect(0, 0, w, h);
-  paint(4, 0);
-  paint(4, 1);
-  paint(4, 2);
-  paint(4, 3);
-  paint(4, 4);
-  paint(4, 5);
-  paint(4, 6);
-  paint(4, 7);
-  paint(4, 8);
-  HATCHING.push(ctx.createPattern(cvs, "repeat"));
-
-  // pattern: -
-  ctx.clearRect(0, 0, w, h);
-  paint(0, 4);
-  paint(1, 4);
-  paint(2, 4);
-  paint(3, 4);
-  paint(4, 4);
-  paint(5, 4);
-  paint(6, 4);
-  paint(7, 4);
-  paint(8, 4);
-  HATCHING.push(ctx.createPattern(cvs, "repeat"));
-
-  // pattern: + (without clearing, because we can overlap)
-  paint(4, 0);
-  paint(4, 1);
-  paint(4, 2);
-  paint(4, 3);
-  paint(4, 5);
-  paint(4, 6);
-  paint(4, 7);
-  paint(4, 8);
-  HATCHING.push(ctx.createPattern(cvs, "repeat"));
-
-  return HATCHING;
-}
-
-export { hatch };

docs/zh-CN/index.html

@@ -324,7 +324,7 @@ function Bezier(3,t):
 <div class="figure">
   <graphics-element title="二次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\control\75888dd88efe5e9c041fefd8b05975f3.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\control\62d7ef11f60acde82868424364a477e8.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -332,7 +332,7 @@ function Bezier(3,t):
 
   <graphics-element title="三次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\control\66333ae5bfbcb51d424e5670ab53262e.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\control\9331dd83c72b233190eaca1cfcc169db.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -340,7 +340,7 @@ function Bezier(3,t):
 
   <graphics-element title="15次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\control\ee31748e196d3be41c675b05200a7f76.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\control\44242f6a6be718bea46292369d509520.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -454,12 +454,12 @@ function RationalBezier(3,t,w[],r[]):
 <div class="figure">
 <graphics-element title="二次无限区间贝塞尔曲线" width="275" height="275" src="./chapters/extended/extended.js" data-type="quadratic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\extended\c6ac50057ea7e251a5bf11737878a23a.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\extended\391a61142c56b79260680aefb08cd9c4.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 <graphics-element title="三次无限区间贝塞尔曲线" width="275" height="275" src="./chapters/extended/extended.js" data-type="cubic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\extended\97a1ceb81980368d08d8d2f2e8719936.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\extended\baeceec6e1587794b8b275a90d5d85e9.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 </div>
@@ -551,7 +551,7 @@ function RationalBezier(3,t,w[],r[]):
 <div class="figure">
   <graphics-element title="拉平一条二次曲线" width="275" height="275" src="./chapters/flattening/flatten.js" data-type="quadratic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\flattening\a6cd214a7f8725430d2bb99a9da385f2.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\flattening\3deec756c96e53127cd1d615c61043ae.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="1" max="16" step="1" value="4" class="slide-control">
@@ -559,7 +559,7 @@ function RationalBezier(3,t,w[],r[]):
 
   <graphics-element title="拉平一条三次曲线" width="275" height="275" src="./chapters/flattening/flatten.js" data-type="cubic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\flattening\a77519c299fce1ce95c84a1e5f7c0478.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\flattening\e2bb7113d5cda2e3fd29bbc54fbe8841.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="1" max="24" step="1" value="8" class="slide-control">
@@ -919,13 +919,13 @@ treated as a sequence of three (elementary) shear operations. When we combine th
 <p>If you move points in a curve sideways, you should only see the middle graph change; likewise, moving points vertically should only show a change in the right graph.</p>
 <graphics-element title="Quadratic Bézier curve components" width="825" height="275" src="./chapters/components/components.js" data-type="quadratic">
         <fallback-image>
-          <img width="825px" height="275px" src="images\chapters\components\c3df5265111b12dabee757a22b474d29.png" loading="lazy">
+          <img width="825px" height="275px" src="images\chapters\components\f7490a1c523d4dc8772b621b4a61fdd4.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 
 <graphics-element title="Cubic Bézier curve components" width="825" height="275" src="./chapters/components/components.js" data-type="cubic">
         <fallback-image>
-          <img width="825px" height="275px" src="images\chapters\components\168ec97a7e9ba5793ad9d2e619f71cb3.png" loading="lazy">
+          <img width="825px" height="275px" src="images\chapters\components\35d69b33228ae64221385047177b67a5.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 
@@ -1061,14 +1061,14 @@ function getCubicRoots(pa, pb, pc, pd) {
 <p>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. For the quadratic curve, that means just the first derivative, in red:</p>
 <graphics-element title="Quadratic Bézier curve extremities" width="825" height="275" src="./chapters/extremities/extremities.js" data-type="quadratic">
         <fallback-image>
-          <img width="825px" height="275px" src="images\chapters\extremities\2be56b901cc023ece52f001d770893f8.png" loading="lazy">
+          <img width="825px" height="275px" src="images\chapters\extremities\6d246f1c53e40bd5156ef50c4046db51.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 
 <p>And for cubic curves, that means first and second derivatives, in red and purple respectively:</p>
 <graphics-element title="Cubic Bézier curve extremities" width="825" height="275" src="./chapters/extremities/extremities.js" data-type="cubic">
         <fallback-image>
-          <img width="825px" height="275px" src="images\chapters\extremities\308bb36c8390ecfca6eed0cccfeec73b.png" loading="lazy">
+          <img width="825px" height="275px" src="images\chapters\extremities\05ff4df8b73ba25dffeb42f768e0e9c4.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 
@@ -1086,12 +1086,12 @@ function getCubicRoots(pa, pb, pc, pd) {
 <div class="figure">
 <graphics-element title="Quadratic Bézier bounding box" width="275" height="275" src="./chapters/boundingbox/bbox.js" data-type="quadratic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\boundingbox\3e26118e0f37de916bb52f17850ccdc3.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\boundingbox\e2c621442e98e2cd20af7efe1cfb041f.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 <graphics-element title="Cubic Bézier bounding box" width="275" height="275" src="./chapters/boundingbox/bbox.js" data-type="cubic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\boundingbox\797277014fb93e37fd47f8f2fcdb3b89.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\boundingbox\f8989a62ebec9d6f123291c146caab5b.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 </div>
@@ -1111,16 +1111,18 @@ function getCubicRoots(pa, pb, pc, pd) {
 <p>If we drop all the zero-terms, this gives us:</p>
 <img class="LaTeX SVG" src="./images/chapters/aligning/c78b203ff33e5c1606728b552505d61c.svg" width="397px" height="40px" loading="lazy">
 <p>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:</p>
-<graphics-element title="Aligning a quadratic curve" width="550" height="275" src="./chapters/aligning/quadratic.js" >
+<div class="figure">
+<graphics-element title="Aligning a quadratic curve" width="550" height="275" src="./chapters/aligning/aligning.js" data-type="quadratic">
         <fallback-image>
-          <img width="550px" height="275px" src="images\chapters\aligning\2a6c6fb5527e3c00c683136a74075810.png" loading="lazy">
+          <img width="550px" height="275px" src="images\chapters\aligning\2bac71234aed2bca2686fdbce7dd78d8.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
-<graphics-element title="Aligning a cubic curve" width="550" height="275" src="./chapters/aligning/cubic.js" >
+<graphics-element title="Aligning a cubic curve" width="550" height="275" src="./chapters/aligning/aligning.js" data-type="cubic">
         <fallback-image>
-          <img width="550px" height="275px" src="images\chapters\aligning\117193f78662930b6cfb204d40263796.png" loading="lazy">
+          <img width="550px" height="275px" src="images\chapters\aligning\ed3e2ad3961fbf9e9e5bc951f1d79302.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
+</div>
 
       </section>
 <section id="tightbounds">
@@ -1130,12 +1132,12 @@ function getCubicRoots(pa, pb, pc, pd) {
 <div class="figure">
 <graphics-element title="Aligning a quadratic curve" width="275" height="275" src="./chapters/tightbounds/tightbounds.js" data-type="quadratic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\tightbounds\ed626d23d5f258a3f599e881b5f12aad.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\tightbounds\ccc77ae1f57d7dd7ce4d5397fe1b140b.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 <graphics-element title="Aligning a cubic curve" width="275" height="275" src="./chapters/tightbounds/tightbounds.js" data-type="cubic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\tightbounds\e087b9e9822e65dcc4ff7673db10e91c.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\tightbounds\419415bee6ffd7598c035c42de09a94f.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 </div>
@@ -1313,17 +1315,17 @@ y = curve.get(t).y</code></pre>
 <div class="figure">
   <graphics-element title="A function's approximated integral" width="275" height="275" src="./chapters/arclength/draw-slices.js" data-steps="10">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\arclength\0e2627e80066b53966050764aec146ac.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\arclength\580c33f599b70de44b17c546098508aa.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
   <graphics-element title="A better approximation" width="275" height="275" src="./chapters/arclength/draw-slices.js" data-steps="24">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\arclength\457d2450a6a7f786328e2282d6613cf1.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\arclength\0d7138b99f5986332a050a8479eefa57.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
   <graphics-element title="An even better approximation" width="275" height="275" src="./chapters/arclength/draw-slices.js" data-steps="99">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\arclength\72c05323cfc7d739acad1cd969be7b72.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\arclength\475547c773a7279dc037c9ced2c8c6dc.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image></graphics-element>
 </div>
@@ -1359,7 +1361,7 @@ y = curve.get(t).y</code></pre>
 
 <graphics-element title="Approximate quadratic curve arc length" width="275" height="275" src="./chapters/arclengthapprox/approximate.js" data-type="quadratic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\arclengthapprox\e617047054199de6b96eb910db73b3ee.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\arclengthapprox\a040f6b7c7c33ada25ecfd1060726545.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="1" max="24" step="1" value="4" class="slide-control">
@@ -1367,7 +1369,7 @@ y = curve.get(t).y</code></pre>
 
 <graphics-element title="Approximate cubic curve arc length" width="275" height="275" src="./chapters/arclengthapprox/approximate.js" data-type="cubic">
         <fallback-image>
-          <img width="275px" height="275px" src="images\chapters\arclengthapprox\2fefae0125551f8f8b899f14daf07960.png" loading="lazy">
+          <img width="275px" height="275px" src="images\chapters\arclengthapprox\c270144cc41e4ebc4b0b2331473530fa.png" loading="lazy">
           Scripts are disabled. Showing fallback image.
         </fallback-image>
     <input type="range" min="1" max="32" step="1" value="8" class="slide-control">

package-lock.json

@@ -630,9 +630,9 @@
       "dev": true
     },
     "eventemitter3": {
-      "version": "4.0.4",
+      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-      "integrity": "sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ==",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "dev": true
     },
     "file-type": {
@@ -667,9 +667,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.12.1",
+      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.12.1.tgz",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
-      "integrity": "sha512-tmRv0AVuR7ZyouUHLeNSiO6pqulF7dYa3s19c6t+wz9LD69/uSzdMxJ2S91nTI9U3rt/IldxpzMOFejp6f0hjg==",
+      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==",
       "dev": true
     },
     "fs-extra": {
@@ -826,9 +826,8 @@
       }
     },
     "http-server": {
-      "version": "0.12.3",
+      "version": "git://github.com/Pomax/http-server.git#ff289661cd759f871c041e8890e1bd4af6c57bdc",
-      "resolved": "https://registry.npmjs.org/http-server/-/http-server-0.12.3.tgz",
+      "from": "git://github.com/Pomax/http-server.git#patch-1",
-      "integrity": "sha512-be0dKG6pni92bRjq0kvExtj/NrrAd28/8fCXkaI/4piTwQMSDSLMhWyW0NI1V+DBI3aa1HMlQu46/HjVLfmugA==",
       "dev": true,
       "requires": {
         "basic-auth": "^1.0.3",
@@ -1081,9 +1080,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.19",
+      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==",
+      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
       "dev": true
     },
     "lodash.debounce": {

package.json

@@ -23,7 +23,7 @@
     "lint:tools": "prettier \"./src/**/*.js\" --write",
     "lint:lib": "prettier \"./docs/js/**/*.js\" --write",
     "pretty": "echo not running `prettier \"./docs/**/index.html\" --write` as it increases filesize by 30%",
-    "server": "cd docs && http-server -p 8000 --cors",
+    "server": "cd docs && http-server -e -p 8000 --cors",
     "watch": "run-p watch:*",
     "watch:chapters": "chokidar \"./docs/chapters/**/*.*\" -c \"npm run build\"",
     "watch:customelement": "chokidar \"./docs/js/custom-element/**/*.js\" -c \"npm run build\"",
@@ -46,7 +46,7 @@
     "chokidar-cli": "^2.1.0",
     "fs-extra": "^9.0.1",
     "glob": "^7.1.6",
-    "http-server": "^0.12.3",
+    "http-server": "git://github.com/Pomax/http-server#patch-1",
     "marked": "^1.1.1",
     "npm-run-all": "^4.1.5",
     "nunjucks": "^3.2.2",