From d77d3649b6b13ed1d2d00ea8270927fc0d1776af Mon Sep 17 00:00:00 2001
From: Pomax <pomax@nihongoresources.com>
Date: Sat, 19 Sep 2020 22:51:19 -0700
Subject: [PATCH] code comments

---
 .../chapters/curveintersection/curve-curve.js |   7 ++--
 docs/chapters/intersections/curve-line.js     |   3 ++
 docs/chapters/intersections/line-line.js      |  18 +++++++---
 docs/chapters/offsetting/offsetting.js        |   6 ++++
 docs/chapters/polybezier/poly.js              |   9 +++++
 docs/chapters/tracing/distance-function.js    |   8 +++--
 docs/chapters/tracing/tracing.js              |   3 ++
 ...g => b155682162a5b6da6d40c7b531164a7e.png} | Bin
 ...g => 7196d3dec75d53f5df9d9c832ac3c493.png} | Bin
 ...g => 9b70fb7b03f082882515e55c0a1eacff.png} | Bin
 ...g => b3f61036d8dc9888a6a64a1171583dd1.png} | Bin
 ...g => 03b8e0849e7c8ba64d8c076f47fe2ec7.png} | Bin
 ...g => 4c4738b6bf9f83eded12d680a29e337b.png} | Bin
 ...g => 1b94c6ada011bd8e50330e31a851a62e.png} | Bin
 ...g => 41522a397171423e8a465dc8c74f6e87.png} | Bin
 ...g => 6fb33629373d7a731b6ac3f5365cb9f0.png} | Bin
 ...g => 777f3814965c39ec3cdbb13eab0c4eeb.png} | Bin
 ...g => b3aebf7803f4430187c249a891095062.png} | Bin
 ...g => db04f805f42bdc9a1b7ec4d6b401d853.png} | Bin
 ...g => f6c55cbc66333b6630939f67fc20e086.png} | Bin
 ...g => fe41b628f46f7035d151a8210d30111f.png} | Bin
 ...g => 1cd7304fb8d044835bfbc305ca5e5d10.png} | Bin
 ...g => d6239520389637a3c42e76ee44d86c41.png} | Bin
 docs/index.html                               |  34 +++++++++---------
 docs/ja-JP/index.html                         |  34 +++++++++---------
 docs/news/2020-09-18.html                     |   2 +-
 docs/zh-CN/index.html                         |  34 +++++++++---------
 27 files changed, 97 insertions(+), 61 deletions(-)
 rename docs/images/chapters/curveintersection/{e1f4f4dba7a338d342559bcfb0ea8e02.png => b155682162a5b6da6d40c7b531164a7e.png} (100%)
 rename docs/images/chapters/intersections/{4a762fb56468c342c72756a76d134f05.png => 7196d3dec75d53f5df9d9c832ac3c493.png} (100%)
 rename docs/images/chapters/intersections/{7003a384ec371217af2b225ae65872e7.png => 9b70fb7b03f082882515e55c0a1eacff.png} (100%)
 rename docs/images/chapters/intersections/{cab1799841eedd1dcd1cd81b6045f40f.png => b3f61036d8dc9888a6a64a1171583dd1.png} (100%)
 rename docs/images/chapters/offsetting/{768094c3c47d3888cf81e7a1d20d2eab.png => 03b8e0849e7c8ba64d8c076f47fe2ec7.png} (100%)
 rename docs/images/chapters/offsetting/{1ad78f9f9d001278c491b0f2be5cc8ea.png => 4c4738b6bf9f83eded12d680a29e337b.png} (100%)
 rename docs/images/chapters/polybezier/{adc3b55c9956849ec86ecffcd8864d8a.png => 1b94c6ada011bd8e50330e31a851a62e.png} (100%)
 rename docs/images/chapters/polybezier/{044f65dd588b0210499add16ea50a23d.png => 41522a397171423e8a465dc8c74f6e87.png} (100%)
 rename docs/images/chapters/polybezier/{b7dfe772ac90d762f48772b691a9070f.png => 6fb33629373d7a731b6ac3f5365cb9f0.png} (100%)
 rename docs/images/chapters/polybezier/{17a6ffbfffaa9046ad165ca880d9030d.png => 777f3814965c39ec3cdbb13eab0c4eeb.png} (100%)
 rename docs/images/chapters/polybezier/{a1a3aabd22c0221beb38403a4532ea86.png => b3aebf7803f4430187c249a891095062.png} (100%)
 rename docs/images/chapters/polybezier/{b492c486c25f17a95c690e235b8ad483.png => db04f805f42bdc9a1b7ec4d6b401d853.png} (100%)
 rename docs/images/chapters/polybezier/{b810f02639a79cf7f8ae416d7185614d.png => f6c55cbc66333b6630939f67fc20e086.png} (100%)
 rename docs/images/chapters/polybezier/{babb27083b805c7c77bb93cfecbefb2b.png => fe41b628f46f7035d151a8210d30111f.png} (100%)
 rename docs/images/chapters/tracing/{09cfa54ec3709d54efdce78832e42367.png => 1cd7304fb8d044835bfbc305ca5e5d10.png} (100%)
 rename docs/images/chapters/tracing/{52f815cefe99dabc47ca83d0b97b61fc.png => d6239520389637a3c42e76ee44d86c41.png} (100%)

diff --git a/docs/chapters/curveintersection/curve-curve.js b/docs/chapters/curveintersection/curve-curve.js
index cb374319..ce0de9fd 100644
--- a/docs/chapters/curveintersection/curve-curve.js
+++ b/docs/chapters/curveintersection/curve-curve.js
@@ -56,7 +56,7 @@ draw() {
     text(`${this.finals.length} intersections found.`, this.panelWidth/2, this.height - 10, CENTER);
   }
 
-  // panel 3: intersections
+  // panel 3: the (already known) intersections
   nextPanel();
   this.drawIntersections();
 }
@@ -73,7 +73,7 @@ drawIteration() {
         const s1 = pair[0].split(0.5);
         const s2 = pair[1].split(0.5);
 
-        // cross check
+        // cross check to see if we need to keep any of the pairs
         if (s1.left.overlaps(s2.left)) { this.pairs.push([ s1.left, s2.left ]); }
         if (s1.left.overlaps(s2.right)) { this.pairs.push([ s1.left, s2.right ]); }
         if (s1.right.overlaps(s2.left)) { this.pairs.push([ s1.right, s2.left ]); }
@@ -81,10 +81,12 @@ drawIteration() {
     });
   }
 
+  // if we have no pairs left, the next button should not be clickable anymore.
   if (!this.pairs.length && next) {
     next.disabled = true;
   }
 
+  // draw any curves we have in our pairs list
   this.pairs.forEach(pair => {
     pair.forEach(b => {
       let curve = new Bezier(this, b.points);
@@ -93,6 +95,7 @@ drawIteration() {
     })
   });
 
+  // and draw any "finals" as established intersections at this point.
   setStroke(`red`);
   this.finals.forEach(pair => {
     let p = pair[0].get(0.5);
diff --git a/docs/chapters/intersections/curve-line.js b/docs/chapters/intersections/curve-line.js
index cb7425e6..73d4dc41 100644
--- a/docs/chapters/intersections/curve-line.js
+++ b/docs/chapters/intersections/curve-line.js
@@ -23,12 +23,15 @@ draw() {
 
   this.drawLine(...line);
 
+  // To find our intersections, we align the curve to our line,
+  // so that all we need to do now is find the roots for the curve.
   const [p1, p2] = line;
   const aligned = utils.align(curve.points, {p1,p2});
   const nB = new Bezier(this, aligned);
   const roots = utils.roots(nB.points);
   const coords = roots.map(t => curve.get(t));
 
+  // done: any roots we find are intersections on our original curve.
   if (roots.length) {
     roots.forEach((t,i) => {
       var p = coords[i];
diff --git a/docs/chapters/intersections/line-line.js b/docs/chapters/intersections/line-line.js
index 5af4f836..5a3a6881 100644
--- a/docs/chapters/intersections/line-line.js
+++ b/docs/chapters/intersections/line-line.js
@@ -1,11 +1,13 @@
 let Point = Vector, points = [];
 
 setup() {
-    points.push(new Point(50,50));
-    points.push(new Point(150,110));
-    points.push(new Point(50,250));
-    points.push(new Point(170,170));
-    setMovable(points);
+  points = [
+    new Point(50,50),
+    new Point(150,110),
+    new Point(50,250),
+    new Point(170,170),
+  ];
+  setMovable(points);
 }
 
 draw() {
@@ -16,6 +18,9 @@ draw() {
   this.drawLine(p1,p2);
   this.drawLine(p3,p4);
 
+  // compute the line/line intesection: note that this does NOT
+  // mean the line *segments* intersect, just that the lines,
+  // which are infinitely long, intersect.
   const p = this.lli(
     p1.x, p1.y,
     p2.x, p2.y,
@@ -23,6 +28,7 @@ draw() {
     p4.x, p4.y
   );
 
+  // if there is an intersection, is that point on both line *segments*?
   if (p) {
     if (this.onLine(p, p1, p2) && this.onLine(p, p3, p4)) {
       setColor(`lime`);
@@ -44,6 +50,7 @@ drawLine(p1, p2) {
   circle(p2.x, p2.y, 2);
 }
 
+// The line/line intersection code can be found all over the web.
 lli(x1, y1, x2, y2, x3, y3, x4, y4) {
   const 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),
@@ -52,6 +59,7 @@ lli(x1, y1, x2, y2, x3, y3, x4, y4) {
   return { x: nx / d, y: ny / d };
 }
 
+// is point p on the line p1--p2?
 onLine(p, p1, p2) {
   const mx = min(p1.x, p2.x),
         my = min(p1.y, p2.y),
diff --git a/docs/chapters/offsetting/offsetting.js b/docs/chapters/offsetting/offsetting.js
index 506c1d6e..8166c886 100644
--- a/docs/chapters/offsetting/offsetting.js
+++ b/docs/chapters/offsetting/offsetting.js
@@ -17,16 +17,19 @@ draw() {
 
   curve.drawSkeleton();
 
+  // First, reduce our curves into a set of simple sections
   var reduced = this.reduce(curve);
   reduced.forEach(c => {
     setStroke(randomColor() );
     this.drawCurve(c);
     circle(c.points[0].x, c.points[0].y, 2);
   });
+
   var last = reduced.slice(-1)[0];
   let p = last.points[3] ?? last.points[2];
   circle(p.x, p.y, 3);
 
+  // then, we can offset each simple curve by projective scaling
   setStroke(`#FF000050`);
   var offset = curve.offset(this.distance);
   offset.forEach(c => {
@@ -38,6 +41,7 @@ draw() {
   p = last.points[3] ?? last.points[2];
   circle(p.x, p.y, 3);
 
+  // on both sides, so we need to offset by -distance, too.
   setStroke(`#0000FF50`);
   var offset = curve.offset(-this.distance);
   offset.forEach(c => {
@@ -116,3 +120,5 @@ reduce(curve) {
 
   return pass2;
 }
+
+// TODO: duplicate the offset code from utils.js? It's *a lot* of code, though...
diff --git a/docs/chapters/polybezier/poly.js b/docs/chapters/polybezier/poly.js
index eb37c9ab..facdc7eb 100644
--- a/docs/chapters/polybezier/poly.js
+++ b/docs/chapters/polybezier/poly.js
@@ -71,6 +71,9 @@ draw() {
 
 movePointsQuadratic(i, link) {
   const l = points.length;
+
+  // Logic for "conventional" moving of an on-curve point,
+  // moving its associated control points, too.
   if (link === `conventional` && i%2 === 0) {
     let ppl = points[(l+i-3)%l];
     let pl = points[(l+i-1)%l];
@@ -91,6 +94,8 @@ movePointsQuadratic(i, link) {
     }
   }
 
+  // Moving a control points moves literally every
+  // other control points, too.
   if (i%2 === 1) {
     let c1 = points[(l+i-2)%l];
     let p1 = points[(l+i-1)%l];
@@ -127,6 +132,9 @@ movePointsQuadratic(i, link) {
 
 movePointsCubic(i, link) {
   const l = points.length;
+
+  // Logic for "conventional" moving of an on-curve point,
+  // moving its associated control points, too.
   if (link === `conventional` && i%3 === 0) {
     let left = points[(l+i-1)%l];
     left.x += this.cursor.diff.x;
@@ -137,6 +145,7 @@ movePointsCubic(i, link) {
     right.y += this.cursor.diff.y;
   }
 
+  // Moving a control points moves the control "across its on-curve point".
   if (i%3 > 0) {
     let c, p;
     if (i%3 === 1) {
diff --git a/docs/chapters/tracing/distance-function.js b/docs/chapters/tracing/distance-function.js
index 6a59ebf6..751ccd48 100644
--- a/docs/chapters/tracing/distance-function.js
+++ b/docs/chapters/tracing/distance-function.js
@@ -28,11 +28,15 @@ draw() {
 
 plotDistanceFunction(w, h, len) {
   noFill();
+
+  // There is no way we're capturing the distance function as a nice
+  // easy function, so instead we're going to do the next best thing:
+  // sample the curve at a number of points, and then construct the
+  // function plot as we walk from one sample to the next.
   let LUT = curve.getLUT(this.steps * 10);
-  let d = 0;
   start();
   vertex(0,0);
-  for(let i=1, e=LUT.length, p1, p2; i<e; i++) {
+  for(let i=1, e=LUT.length, p1, p2, d=0; i<e; i++) {
     p1 = LUT[i-1];
     p2 = LUT[i];
     d += dist(p1.x, p1.y, p2.x, p2.y);
diff --git a/docs/chapters/tracing/tracing.js b/docs/chapters/tracing/tracing.js
index 10c61fd9..b7eaee0b 100644
--- a/docs/chapters/tracing/tracing.js
+++ b/docs/chapters/tracing/tracing.js
@@ -23,9 +23,12 @@ draw() {
   scale(0.85);
   translate(30,30);
 
+  // This first part is the same as the previous graphic
   setFill(`black`);
   drawAxes("t", 0, 1, "d", 0, len|0, w, h);
   let LUT = this.plotDistanceFunction(w, h, len);
+
+  // but this part is new.
   this.drawPlotIntervals(w, h, LUT);
 
   resetTransform();
diff --git a/docs/images/chapters/curveintersection/e1f4f4dba7a338d342559bcfb0ea8e02.png b/docs/images/chapters/curveintersection/b155682162a5b6da6d40c7b531164a7e.png
similarity index 100%
rename from docs/images/chapters/curveintersection/e1f4f4dba7a338d342559bcfb0ea8e02.png
rename to docs/images/chapters/curveintersection/b155682162a5b6da6d40c7b531164a7e.png
diff --git a/docs/images/chapters/intersections/4a762fb56468c342c72756a76d134f05.png b/docs/images/chapters/intersections/7196d3dec75d53f5df9d9c832ac3c493.png
similarity index 100%
rename from docs/images/chapters/intersections/4a762fb56468c342c72756a76d134f05.png
rename to docs/images/chapters/intersections/7196d3dec75d53f5df9d9c832ac3c493.png
diff --git a/docs/images/chapters/intersections/7003a384ec371217af2b225ae65872e7.png b/docs/images/chapters/intersections/9b70fb7b03f082882515e55c0a1eacff.png
similarity index 100%
rename from docs/images/chapters/intersections/7003a384ec371217af2b225ae65872e7.png
rename to docs/images/chapters/intersections/9b70fb7b03f082882515e55c0a1eacff.png
diff --git a/docs/images/chapters/intersections/cab1799841eedd1dcd1cd81b6045f40f.png b/docs/images/chapters/intersections/b3f61036d8dc9888a6a64a1171583dd1.png
similarity index 100%
rename from docs/images/chapters/intersections/cab1799841eedd1dcd1cd81b6045f40f.png
rename to docs/images/chapters/intersections/b3f61036d8dc9888a6a64a1171583dd1.png
diff --git a/docs/images/chapters/offsetting/768094c3c47d3888cf81e7a1d20d2eab.png b/docs/images/chapters/offsetting/03b8e0849e7c8ba64d8c076f47fe2ec7.png
similarity index 100%
rename from docs/images/chapters/offsetting/768094c3c47d3888cf81e7a1d20d2eab.png
rename to docs/images/chapters/offsetting/03b8e0849e7c8ba64d8c076f47fe2ec7.png
diff --git a/docs/images/chapters/offsetting/1ad78f9f9d001278c491b0f2be5cc8ea.png b/docs/images/chapters/offsetting/4c4738b6bf9f83eded12d680a29e337b.png
similarity index 100%
rename from docs/images/chapters/offsetting/1ad78f9f9d001278c491b0f2be5cc8ea.png
rename to docs/images/chapters/offsetting/4c4738b6bf9f83eded12d680a29e337b.png
diff --git a/docs/images/chapters/polybezier/adc3b55c9956849ec86ecffcd8864d8a.png b/docs/images/chapters/polybezier/1b94c6ada011bd8e50330e31a851a62e.png
similarity index 100%
rename from docs/images/chapters/polybezier/adc3b55c9956849ec86ecffcd8864d8a.png
rename to docs/images/chapters/polybezier/1b94c6ada011bd8e50330e31a851a62e.png
diff --git a/docs/images/chapters/polybezier/044f65dd588b0210499add16ea50a23d.png b/docs/images/chapters/polybezier/41522a397171423e8a465dc8c74f6e87.png
similarity index 100%
rename from docs/images/chapters/polybezier/044f65dd588b0210499add16ea50a23d.png
rename to docs/images/chapters/polybezier/41522a397171423e8a465dc8c74f6e87.png
diff --git a/docs/images/chapters/polybezier/b7dfe772ac90d762f48772b691a9070f.png b/docs/images/chapters/polybezier/6fb33629373d7a731b6ac3f5365cb9f0.png
similarity index 100%
rename from docs/images/chapters/polybezier/b7dfe772ac90d762f48772b691a9070f.png
rename to docs/images/chapters/polybezier/6fb33629373d7a731b6ac3f5365cb9f0.png
diff --git a/docs/images/chapters/polybezier/17a6ffbfffaa9046ad165ca880d9030d.png b/docs/images/chapters/polybezier/777f3814965c39ec3cdbb13eab0c4eeb.png
similarity index 100%
rename from docs/images/chapters/polybezier/17a6ffbfffaa9046ad165ca880d9030d.png
rename to docs/images/chapters/polybezier/777f3814965c39ec3cdbb13eab0c4eeb.png
diff --git a/docs/images/chapters/polybezier/a1a3aabd22c0221beb38403a4532ea86.png b/docs/images/chapters/polybezier/b3aebf7803f4430187c249a891095062.png
similarity index 100%
rename from docs/images/chapters/polybezier/a1a3aabd22c0221beb38403a4532ea86.png
rename to docs/images/chapters/polybezier/b3aebf7803f4430187c249a891095062.png
diff --git a/docs/images/chapters/polybezier/b492c486c25f17a95c690e235b8ad483.png b/docs/images/chapters/polybezier/db04f805f42bdc9a1b7ec4d6b401d853.png
similarity index 100%
rename from docs/images/chapters/polybezier/b492c486c25f17a95c690e235b8ad483.png
rename to docs/images/chapters/polybezier/db04f805f42bdc9a1b7ec4d6b401d853.png
diff --git a/docs/images/chapters/polybezier/b810f02639a79cf7f8ae416d7185614d.png b/docs/images/chapters/polybezier/f6c55cbc66333b6630939f67fc20e086.png
similarity index 100%
rename from docs/images/chapters/polybezier/b810f02639a79cf7f8ae416d7185614d.png
rename to docs/images/chapters/polybezier/f6c55cbc66333b6630939f67fc20e086.png
diff --git a/docs/images/chapters/polybezier/babb27083b805c7c77bb93cfecbefb2b.png b/docs/images/chapters/polybezier/fe41b628f46f7035d151a8210d30111f.png
similarity index 100%
rename from docs/images/chapters/polybezier/babb27083b805c7c77bb93cfecbefb2b.png
rename to docs/images/chapters/polybezier/fe41b628f46f7035d151a8210d30111f.png
diff --git a/docs/images/chapters/tracing/09cfa54ec3709d54efdce78832e42367.png b/docs/images/chapters/tracing/1cd7304fb8d044835bfbc305ca5e5d10.png
similarity index 100%
rename from docs/images/chapters/tracing/09cfa54ec3709d54efdce78832e42367.png
rename to docs/images/chapters/tracing/1cd7304fb8d044835bfbc305ca5e5d10.png
diff --git a/docs/images/chapters/tracing/52f815cefe99dabc47ca83d0b97b61fc.png b/docs/images/chapters/tracing/d6239520389637a3c42e76ee44d86c41.png
similarity index 100%
rename from docs/images/chapters/tracing/52f815cefe99dabc47ca83d0b97b61fc.png
rename to docs/images/chapters/tracing/d6239520389637a3c42e76ee44d86c41.png
diff --git a/docs/index.html b/docs/index.html
index b2c49c93..53e4d183 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -31,7 +31,7 @@
 		<meta property="og:locale" content="en-GB" />
 		<meta property="og:type" content="article" />
 		<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
-		<meta property="og:updated_time" content="2020-09-20T01:33:33+00:00" />
+		<meta property="og:updated_time" content="2020-09-20T05:43:12+00:00" />
 		<meta property="og:author" content="Mike 'Pomax' Kamermans" />
 		<meta property="og:section" content="Bézier Curves" />
 		<meta property="og:tag" content="Bézier Curves" />
@@ -3439,7 +3439,7 @@ y = curve.get(t).y</code></pre>
 					<graphics-element title="The t-for-distance function" width="550" height="275" src="./chapters/tracing/distance-function.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="550px" height="275px" src="images\chapters\tracing\52f815cefe99dabc47ca83d0b97b61fc.png" loading="lazy" />
+							<img width="550px" height="275px" src="images\chapters\tracing\d6239520389637a3c42e76ee44d86c41.png" loading="lazy" />
 							<label></label> </fallback-image
 					></graphics-element>
 
@@ -3458,7 +3458,7 @@ y = curve.get(t).y</code></pre>
 					<graphics-element title="Fixed-interval coloring a curve" width="825" height="275" src="./chapters/tracing/tracing.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="825px" height="275px" src="images\chapters\tracing\09cfa54ec3709d54efdce78832e42367.png" loading="lazy" />
+							<img width="825px" height="275px" src="images\chapters\tracing\1cd7304fb8d044835bfbc305ca5e5d10.png" loading="lazy" />
 							<label></label>
 						</fallback-image>
 						<input type="range" min="2" max="24" step="1" value="8" class="slide-control" />
@@ -3508,7 +3508,7 @@ y = curve.get(t).y</code></pre>
 					<graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\intersections\cab1799841eedd1dcd1cd81b6045f40f.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\intersections\b3f61036d8dc9888a6a64a1171583dd1.png" loading="lazy" />
 							<label>Line/line intersections</label>
 						</fallback-image></graphics-element
 					>
@@ -3557,7 +3557,7 @@ lli = function(line1, line2):
 						>
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\intersections\7003a384ec371217af2b225ae65872e7.png" loading="lazy" />
+								<img width="275px" height="275px" src="images\chapters\intersections\9b70fb7b03f082882515e55c0a1eacff.png" loading="lazy" />
 								<label>Quadratic curve/line intersections</label>
 							</fallback-image></graphics-element
 						>
@@ -3570,7 +3570,7 @@ lli = function(line1, line2):
 						>
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\intersections\4a762fb56468c342c72756a76d134f05.png" loading="lazy" />
+								<img width="275px" height="275px" src="images\chapters\intersections\7196d3dec75d53f5df9d9c832ac3c493.png" loading="lazy" />
 								<label>Cubic curve/line intersections</label>
 							</fallback-image></graphics-element
 						>
@@ -3638,7 +3638,7 @@ lli = function(line1, line2):
 					<graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="825px" height="275px" src="images\chapters\curveintersection\e1f4f4dba7a338d342559bcfb0ea8e02.png" loading="lazy" />
+							<img width="825px" height="275px" src="images\chapters\curveintersection\b155682162a5b6da6d40c7b531164a7e.png" loading="lazy" />
 							<label></label>
 						</fallback-image>
 						<button class="next">Advance one step</button>
@@ -4796,7 +4796,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\044f65dd588b0210499add16ea50a23d.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\41522a397171423e8a465dc8c74f6e87.png" loading="lazy" />
 							<label>Unlinked quadratic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4810,7 +4810,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\babb27083b805c7c77bb93cfecbefb2b.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\6fb33629373d7a731b6ac3f5365cb9f0.png" loading="lazy" />
 							<label>Unlinked cubic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4842,7 +4842,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\b492c486c25f17a95c690e235b8ad483.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\db04f805f42bdc9a1b7ec4d6b401d853.png" loading="lazy" />
 							<label>Connected quadratic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4856,7 +4856,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\adc3b55c9956849ec86ecffcd8864d8a.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\fe41b628f46f7035d151a8210d30111f.png" loading="lazy" />
 							<label>Connected cubic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4885,7 +4885,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\17a6ffbfffaa9046ad165ca880d9030d.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\777f3814965c39ec3cdbb13eab0c4eeb.png" loading="lazy" />
 							<label>Angularly connected quadratic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4899,7 +4899,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\b7dfe772ac90d762f48772b691a9070f.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\f6c55cbc66333b6630939f67fc20e086.png" loading="lazy" />
 							<label>Angularly connected cubic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4923,7 +4923,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\a1a3aabd22c0221beb38403a4532ea86.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\b3aebf7803f4430187c249a891095062.png" loading="lazy" />
 							<label>Standard connected quadratic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4937,7 +4937,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\b810f02639a79cf7f8ae416d7185614d.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\1b94c6ada011bd8e50330e31a851a62e.png" loading="lazy" />
 							<label>Standard connected cubic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -5095,7 +5095,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\offsetting\768094c3c47d3888cf81e7a1d20d2eab.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\offsetting\03b8e0849e7c8ba64d8c076f47fe2ec7.png" loading="lazy" />
 							<label>Offsetting a quadratic Bézier curve</label>
 						</fallback-image>
 						<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
@@ -5110,7 +5110,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\offsetting\1ad78f9f9d001278c491b0f2be5cc8ea.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\offsetting\4c4738b6bf9f83eded12d680a29e337b.png" loading="lazy" />
 							<label>Offsetting a cubic Bézier curve</label>
 						</fallback-image>
 						<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
diff --git a/docs/ja-JP/index.html b/docs/ja-JP/index.html
index 7fffc027..b709d623 100644
--- a/docs/ja-JP/index.html
+++ b/docs/ja-JP/index.html
@@ -33,7 +33,7 @@
 		<meta property="og:locale" content="ja-JP" />
 		<meta property="og:type" content="article" />
 		<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
-		<meta property="og:updated_time" content="2020-09-20T01:33:33+00:00" />
+		<meta property="og:updated_time" content="2020-09-20T05:43:12+00:00" />
 		<meta property="og:author" content="Mike 'Pomax' Kamermans" />
 		<meta property="og:section" content="Bézier Curves" />
 		<meta property="og:tag" content="Bézier Curves" />
@@ -3275,7 +3275,7 @@ y = curve.get(t).y</code></pre>
 					<graphics-element title="The t-for-distance function" width="550" height="275" src="./chapters/tracing/distance-function.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="550px" height="275px" src="images\chapters\tracing\52f815cefe99dabc47ca83d0b97b61fc.png" loading="lazy" />
+							<img width="550px" height="275px" src="images\chapters\tracing\d6239520389637a3c42e76ee44d86c41.png" loading="lazy" />
 							<label></label> </fallback-image
 					></graphics-element>
 
@@ -3294,7 +3294,7 @@ y = curve.get(t).y</code></pre>
 					<graphics-element title="Fixed-interval coloring a curve" width="825" height="275" src="./chapters/tracing/tracing.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="825px" height="275px" src="images\chapters\tracing\09cfa54ec3709d54efdce78832e42367.png" loading="lazy" />
+							<img width="825px" height="275px" src="images\chapters\tracing\1cd7304fb8d044835bfbc305ca5e5d10.png" loading="lazy" />
 							<label></label>
 						</fallback-image>
 						<input type="range" min="2" max="24" step="1" value="8" class="slide-control" />
@@ -3344,7 +3344,7 @@ y = curve.get(t).y</code></pre>
 					<graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\intersections\cab1799841eedd1dcd1cd81b6045f40f.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\intersections\b3f61036d8dc9888a6a64a1171583dd1.png" loading="lazy" />
 							<label>Line/line intersections</label>
 						</fallback-image></graphics-element
 					>
@@ -3393,7 +3393,7 @@ lli = function(line1, line2):
 						>
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\intersections\7003a384ec371217af2b225ae65872e7.png" loading="lazy" />
+								<img width="275px" height="275px" src="images\chapters\intersections\9b70fb7b03f082882515e55c0a1eacff.png" loading="lazy" />
 								<label>Quadratic curve/line intersections</label>
 							</fallback-image></graphics-element
 						>
@@ -3406,7 +3406,7 @@ lli = function(line1, line2):
 						>
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\intersections\4a762fb56468c342c72756a76d134f05.png" loading="lazy" />
+								<img width="275px" height="275px" src="images\chapters\intersections\7196d3dec75d53f5df9d9c832ac3c493.png" loading="lazy" />
 								<label>Cubic curve/line intersections</label>
 							</fallback-image></graphics-element
 						>
@@ -3474,7 +3474,7 @@ lli = function(line1, line2):
 					<graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="825px" height="275px" src="images\chapters\curveintersection\e1f4f4dba7a338d342559bcfb0ea8e02.png" loading="lazy" />
+							<img width="825px" height="275px" src="images\chapters\curveintersection\b155682162a5b6da6d40c7b531164a7e.png" loading="lazy" />
 							<label></label>
 						</fallback-image>
 						<button class="next">Advance one step</button>
@@ -4632,7 +4632,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\044f65dd588b0210499add16ea50a23d.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\41522a397171423e8a465dc8c74f6e87.png" loading="lazy" />
 							<label>Unlinked quadratic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4646,7 +4646,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\babb27083b805c7c77bb93cfecbefb2b.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\6fb33629373d7a731b6ac3f5365cb9f0.png" loading="lazy" />
 							<label>Unlinked cubic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4678,7 +4678,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\b492c486c25f17a95c690e235b8ad483.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\db04f805f42bdc9a1b7ec4d6b401d853.png" loading="lazy" />
 							<label>Connected quadratic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4692,7 +4692,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\adc3b55c9956849ec86ecffcd8864d8a.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\fe41b628f46f7035d151a8210d30111f.png" loading="lazy" />
 							<label>Connected cubic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4721,7 +4721,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\17a6ffbfffaa9046ad165ca880d9030d.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\777f3814965c39ec3cdbb13eab0c4eeb.png" loading="lazy" />
 							<label>Angularly connected quadratic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4735,7 +4735,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\b7dfe772ac90d762f48772b691a9070f.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\f6c55cbc66333b6630939f67fc20e086.png" loading="lazy" />
 							<label>Angularly connected cubic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4759,7 +4759,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\a1a3aabd22c0221beb38403a4532ea86.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\b3aebf7803f4430187c249a891095062.png" loading="lazy" />
 							<label>Standard connected quadratic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4773,7 +4773,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\b810f02639a79cf7f8ae416d7185614d.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\1b94c6ada011bd8e50330e31a851a62e.png" loading="lazy" />
 							<label>Standard connected cubic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4931,7 +4931,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\offsetting\768094c3c47d3888cf81e7a1d20d2eab.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\offsetting\03b8e0849e7c8ba64d8c076f47fe2ec7.png" loading="lazy" />
 							<label>Offsetting a quadratic Bézier curve</label>
 						</fallback-image>
 						<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
@@ -4946,7 +4946,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\offsetting\1ad78f9f9d001278c491b0f2be5cc8ea.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\offsetting\4c4738b6bf9f83eded12d680a29e337b.png" loading="lazy" />
 							<label>Offsetting a cubic Bézier curve</label>
 						</fallback-image>
 						<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
diff --git a/docs/news/2020-09-18.html b/docs/news/2020-09-18.html
index 3263431a..6e0d4d1d 100644
--- a/docs/news/2020-09-18.html
+++ b/docs/news/2020-09-18.html
@@ -27,7 +27,7 @@
 		<meta property="og:locale" content="en-GB" />
 		<meta property="og:type" content="article" />
 		<meta property="og:published_time" content="2020-09-18T12:00:00+00:00" />
-		<meta property="og:updated_time" content="2020-09-20T01:33:33+00:00" />
+		<meta property="og:updated_time" content="2020-09-20T05:43:12+00:00" />
 		<meta property="og:author" content="Mike 'Pomax' Kamermans" />
 		<meta property="og:section" content="Bézier Curves" />
 		<meta property="og:tag" content="Bézier Curves" />
diff --git a/docs/zh-CN/index.html b/docs/zh-CN/index.html
index 3e496999..a2c095b8 100644
--- a/docs/zh-CN/index.html
+++ b/docs/zh-CN/index.html
@@ -33,7 +33,7 @@
 		<meta property="og:locale" content="zh-CN" />
 		<meta property="og:type" content="article" />
 		<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
-		<meta property="og:updated_time" content="2020-09-20T01:33:33+00:00" />
+		<meta property="og:updated_time" content="2020-09-20T05:43:12+00:00" />
 		<meta property="og:author" content="Mike 'Pomax' Kamermans" />
 		<meta property="og:section" content="Bézier Curves" />
 		<meta property="og:tag" content="Bézier Curves" />
@@ -3247,7 +3247,7 @@ y = curve.get(t).y</code></pre>
 					<graphics-element title="The t-for-distance function" width="550" height="275" src="./chapters/tracing/distance-function.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="550px" height="275px" src="images\chapters\tracing\52f815cefe99dabc47ca83d0b97b61fc.png" loading="lazy" />
+							<img width="550px" height="275px" src="images\chapters\tracing\d6239520389637a3c42e76ee44d86c41.png" loading="lazy" />
 							<label></label> </fallback-image
 					></graphics-element>
 
@@ -3266,7 +3266,7 @@ y = curve.get(t).y</code></pre>
 					<graphics-element title="Fixed-interval coloring a curve" width="825" height="275" src="./chapters/tracing/tracing.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="825px" height="275px" src="images\chapters\tracing\09cfa54ec3709d54efdce78832e42367.png" loading="lazy" />
+							<img width="825px" height="275px" src="images\chapters\tracing\1cd7304fb8d044835bfbc305ca5e5d10.png" loading="lazy" />
 							<label></label>
 						</fallback-image>
 						<input type="range" min="2" max="24" step="1" value="8" class="slide-control" />
@@ -3316,7 +3316,7 @@ y = curve.get(t).y</code></pre>
 					<graphics-element title="Line/line intersections" width="275" height="275" src="./chapters/intersections/line-line.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\intersections\cab1799841eedd1dcd1cd81b6045f40f.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\intersections\b3f61036d8dc9888a6a64a1171583dd1.png" loading="lazy" />
 							<label>Line/line intersections</label>
 						</fallback-image></graphics-element
 					>
@@ -3365,7 +3365,7 @@ lli = function(line1, line2):
 						>
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\intersections\7003a384ec371217af2b225ae65872e7.png" loading="lazy" />
+								<img width="275px" height="275px" src="images\chapters\intersections\9b70fb7b03f082882515e55c0a1eacff.png" loading="lazy" />
 								<label>Quadratic curve/line intersections</label>
 							</fallback-image></graphics-element
 						>
@@ -3378,7 +3378,7 @@ lli = function(line1, line2):
 						>
 							<fallback-image>
 								<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-								<img width="275px" height="275px" src="images\chapters\intersections\4a762fb56468c342c72756a76d134f05.png" loading="lazy" />
+								<img width="275px" height="275px" src="images\chapters\intersections\7196d3dec75d53f5df9d9c832ac3c493.png" loading="lazy" />
 								<label>Cubic curve/line intersections</label>
 							</fallback-image></graphics-element
 						>
@@ -3446,7 +3446,7 @@ lli = function(line1, line2):
 					<graphics-element title="Curve/curve intersections" width="825" height="275" src="./chapters/curveintersection/curve-curve.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="825px" height="275px" src="images\chapters\curveintersection\e1f4f4dba7a338d342559bcfb0ea8e02.png" loading="lazy" />
+							<img width="825px" height="275px" src="images\chapters\curveintersection\b155682162a5b6da6d40c7b531164a7e.png" loading="lazy" />
 							<label></label>
 						</fallback-image>
 						<button class="next">Advance one step</button>
@@ -4604,7 +4604,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\044f65dd588b0210499add16ea50a23d.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\41522a397171423e8a465dc8c74f6e87.png" loading="lazy" />
 							<label>Unlinked quadratic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4618,7 +4618,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\babb27083b805c7c77bb93cfecbefb2b.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\6fb33629373d7a731b6ac3f5365cb9f0.png" loading="lazy" />
 							<label>Unlinked cubic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4650,7 +4650,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\b492c486c25f17a95c690e235b8ad483.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\db04f805f42bdc9a1b7ec4d6b401d853.png" loading="lazy" />
 							<label>Connected quadratic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4664,7 +4664,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\adc3b55c9956849ec86ecffcd8864d8a.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\fe41b628f46f7035d151a8210d30111f.png" loading="lazy" />
 							<label>Connected cubic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4693,7 +4693,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\17a6ffbfffaa9046ad165ca880d9030d.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\777f3814965c39ec3cdbb13eab0c4eeb.png" loading="lazy" />
 							<label>Angularly connected quadratic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4707,7 +4707,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\b7dfe772ac90d762f48772b691a9070f.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\f6c55cbc66333b6630939f67fc20e086.png" loading="lazy" />
 							<label>Angularly connected cubic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4731,7 +4731,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\a1a3aabd22c0221beb38403a4532ea86.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\b3aebf7803f4430187c249a891095062.png" loading="lazy" />
 							<label>Standard connected quadratic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4745,7 +4745,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\polybezier\b810f02639a79cf7f8ae416d7185614d.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\polybezier\1b94c6ada011bd8e50330e31a851a62e.png" loading="lazy" />
 							<label>Standard connected cubic poly-Bézier</label>
 						</fallback-image></graphics-element
 					>
@@ -4903,7 +4903,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\offsetting\768094c3c47d3888cf81e7a1d20d2eab.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\offsetting\03b8e0849e7c8ba64d8c076f47fe2ec7.png" loading="lazy" />
 							<label>Offsetting a quadratic Bézier curve</label>
 						</fallback-image>
 						<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />
@@ -4918,7 +4918,7 @@ for p = 1 to points.length-3 (inclusive):
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\offsetting\1ad78f9f9d001278c491b0f2be5cc8ea.png" loading="lazy" />
+							<img width="275px" height="275px" src="images\chapters\offsetting\4c4738b6bf9f83eded12d680a29e337b.png" loading="lazy" />
 							<label>Offsetting a cubic Bézier curve</label>
 						</fallback-image>
 						<input type="range" min="5" max="50" step="1" value="20" class="slide-control" />