image regeneration

docs/chapters/arcapproximation/arcs.js

@@ -17,7 +17,7 @@ draw() {
     // See "arc.js" for the code required to find arcs on the curve.
     let arcs = curve.arcs(this.error);
     arcs.forEach(a => {
-        setColor( randomColor(0.3) );
+        setColor(randomColor(0.3));
         arc(
             a.x, a.y, a.r, a.s, a.e,
             a.x, a.y

docs/chapters/canonical/canonical.js

@@ -83,7 +83,7 @@ loopFunction0(x) {
 }
 
 loopFunction1(x) {
-    return { x, y: ( sqrt(3) * sqrt(4*x - x*x) - x) / 2 };
+    return { x, y: (sqrt(3) * sqrt(4*x - x*x) - x) / 2 };
 }
 
 

docs/chapters/canonical/interactive.js

@@ -150,7 +150,7 @@ loopFunction0(x) {
 }
 
 loopFunction1(x) {
-    return { x, y: ( sqrt(3) * sqrt(4*x - x*x) - x) / 2 };
+    return { x, y: (sqrt(3) * sqrt(4*x - x*x) - x) / 2 };
 }
 
 

docs/chapters/catmullconv/catmull-rom.js

@@ -39,7 +39,7 @@ draw() {
     noLineDash();
 
     points.forEach(p => {
-        setColor( randomColor() );
+        setColor(randomColor());
         circle(p.x, p.y, 3);
     });
 }
@@ -56,7 +56,7 @@ dragSegment(p0, p1, p2, p3) {
           };
 
     noFill();
-    setStroke( randomColor() );
+    setStroke(randomColor() );
 
     start();
     this.addCoordinate(0, p1, p2, m1, m2);

docs/chapters/catmullconv/notes.txt

@@ -97,7 +97,7 @@ dragSegment(p0, p1, p2, p3) {
           };
 
     noFill();
-    setStroke( randomColor() );
+    setStroke(randomColor() );
 
     start();
     this.markCoordinate(0, p1,p2,tangent1,tangent2);

docs/chapters/circles/arc-approximation.js

@@ -39,12 +39,12 @@ draw() {
 
 updateCurve(a) {
   let angle = -a;
-  let b = ( cos(angle) - 1 ) / sin(angle);
+  let b = (cos(angle) - 1 ) / sin(angle);
 
   // new control point
   curve.points[1] = {
-    x: w/2 + r * ( cos(angle) - b * sin(angle) ),
-    y: w/2 + r * ( sin(angle) + b * cos(angle) )
+    x: w/2 + r * (cos(angle) - b * sin(angle) ),
+    y: w/2 + r * (sin(angle) + b * cos(angle) )
   };
 
   // new endpoint

docs/chapters/circles_cubic/arc-approximation.js

@@ -78,8 +78,8 @@ getRealCurve(S, E, angle) {
   const f = 4/3 * tan(angle/4);
   const C1 = { x: w/2 + r, y: h/2 + r * f };
   const C2 = {
-    x: w/2 + r * ( cos(angle) + f * sin(angle) ),
-    y: h/2 + r * ( sin(angle) - f * cos(angle) )
+    x: w/2 + r * (cos(angle) + f * sin(angle)),
+    y: h/2 + r * (sin(angle) - f * cos(angle))
   };
   return new Bezier(this, [S, C1, C2, E]);
 }

docs/chapters/control/lerp.js

@@ -43,12 +43,12 @@ draw() {
     noFill();
 
     this.s.forEach((s,i) => {
-        setStroke( randomColor(0.2));
+        setStroke(randomColor(0.2));
         line(
             i/(this.s.length-1) * this.width, 0,
             i/(this.s.length-1) * this.width, this.height
         )
-        setStroke( randomColor(1.0, false ));
+        setStroke(randomColor(1.0, false ));
         drawShape(s);
     })
 

docs/chapters/curveintersection/curve-curve.js

@@ -95,7 +95,7 @@ drawIteration() {
     pair.forEach(b => {
       let curve = new Bezier(this, b.points);
       curve.drawCurve();
-      curve.drawBoundingBox( randomColor() );
+      curve.drawBoundingBox(randomColor());
     })
   });
 

docs/chapters/graduatedoffset/offsetting.js

@@ -21,7 +21,7 @@ draw() {
 };
 
 drawCurve(c) {
-  setStroke( randomColor() );
+  setStroke(randomColor() );
   start()
   c.getLUT(16).forEach(p => vertex(p.x, p.y));
   end();

docs/chapters/intersections/curve-line.js

@@ -47,7 +47,7 @@ draw() {
 drawLine(p1, p2) {
   setStroke(`black`);
   line(p1.x, p1.y, p2.x, p2.y);
-  setStroke( randomColor() );
+  setStroke(randomColor() );
   circle(p1.x, p1.y, 3);
   circle(p2.x, p2.y, 3);
 }

docs/chapters/intersections/line-line.js

@@ -39,7 +39,7 @@ draw() {
 drawLine(p1, p2) {
   setColor(`black`);
   line(p1.x, p1.y, p2.x, p2.y);
-  setStroke( randomColor() );
+  setStroke(randomColor() );
   circle(p1.x, p1.y, 2);
   circle(p2.x, p2.y, 2);
 }

docs/chapters/molding/molding.js

@@ -168,7 +168,7 @@ getIdealisedCurve(p1, p2, p3) {
           d2 = dist(p3.x, p3.y, p2.x, p2.y),
           t = d1 / (d1 + d2),
           { A, B, C, S, E } = Bezier.getABC(3, p1, p2, p3, t),
-          angle = ( atan2(E.y-S.y, E.x-S.x) - atan2(B.y-S.y, B.x-S.x) + TAU ) % TAU,
+          angle = (atan2(E.y-S.y, E.x-S.x) - atan2(B.y-S.y, B.x-S.x) + TAU) % TAU,
           bc = (angle < 0 || angle > PI ? -1 : 1) * dist(S.x, S.y, E.x, E.y)/3,
           de1 = t * bc,
           de2 = (1-t) * bc,

docs/chapters/offsetting/offsetting.js

@@ -19,7 +19,7 @@ draw() {
 
   var reduced = this.reduce(curve);
   reduced.forEach(c => {
-    setStroke( randomColor() );
+    setStroke(randomColor() );
     this.drawCurve(c);
     circle(c.points[0].x, c.points[0].y, 2);
   });
@@ -93,7 +93,7 @@ reduce(curve) {
         segment = p1.split(t1, t2);
         if (!segment.simple()) {
           t2 -= step;
-          if ( abs(t1 - t2) < step) {
+          if (abs(t1 - t2) < step) {
             // we can never form a reduction
             return [];
           }

docs/chapters/pointcurves/circle.js

@@ -102,17 +102,17 @@ caclulateCenter(p1, p2, p3) {
 }
 
 showChords(p1, p2, p3, c) {
-  setStroke( randomColor() );
+  setStroke(randomColor() );
   line(p1.x, p1.y, p2.x, p2.y);
   let m1 = { x: (p1.x+p2.x)/2, y: (p1.y+p2.y)/2 };
   line(m1.x, m1.y, c.x + (c.x-m1.x)/2, c.y + (c.y-m1.y)/2);
 
-  setStroke( randomColor() );
+  setStroke(randomColor() );
   line(p3.x, p3.y, p2.x, p2.y);
   let m2 = { x: (p3.x+p2.x)/2, y: (p3.y+p2.y)/2 };
   line(m2.x, m2.y, c.x + (c.x-m2.x)/2, c.y + (c.y-m2.y)/2);
 
-  setStroke( randomColor() );
+  setStroke(randomColor() );
   line(p3.x, p3.y, p1.x, p1.y);
   let m3 = { x: (p3.x+p1.x)/2, y: (p3.y+p1.y)/2 };
   line(m3.x, m3.y, c.x + (c.x-m3.x)/2, c.y + (c.y-m3.y)/2);
@@ -131,7 +131,7 @@ showCurve(p1, p2, p3, c) {
 
     // Check which length we need to use for our e1-e2 segment,
     // corrected for whether B is "above" or "below" the baseline:
-    const angle = ( atan2(E.y-S.y, E.x-S.x) - atan2(B.y-S.y, B.x-S.x) + TAU ) % TAU,
+    const angle = (atan2(E.y-S.y, E.x-S.x) - atan2(B.y-S.y, B.x-S.x) + TAU) % TAU,
           bc = (angle < 0 || angle > PI ? -1 : 1) * dist(S.x, S.y, E.x, E.y)/3,
           de1 = t * bc,
           de2 = (1-t) * bc;

docs/chapters/shapes/boolean.js

@@ -58,7 +58,7 @@ draw() {
 
 
 drawSegment(segment) {
-    setStroke( randomColor(0.2) );
+    setStroke(randomColor(0.2) );
     start()
     segment.getLUT(16).forEach(p => vertex(p.x, p.y))
     end();
@@ -78,7 +78,7 @@ drawBoolean(s1, s2) {
                 ti = ti.map(s => s.split(`/`).map(parseFloat));
                 // remove "near enough to be considered duplicate" t pairs
                 for(let i=ti.length-1; i>0; i--) {
-                    if ( abs(ti[i][0] - ti[i-1][0]) < 0.01 && abs(ti[i][1] - ti[i-1][1]) < 0.01) {
+                    if (abs(ti[i][0] - ti[i-1][0]) < 0.01 && abs(ti[i][1] - ti[i-1][1]) < 0.01) {
                         ti.splice(i,1);
                     }
                 }

docs/chapters/tracing/tracing.js

@@ -89,7 +89,7 @@ drawCurveIntervals(LUT) {
     let targetDistance = i/e * dlen;
     while(LUT[pos].d < targetDistance) pos++;
 
-    setStroke( randomColor() );
+    setStroke(randomColor() );
     start();
     for(let j=lastpos; j<=pos; j++) vertex(LUT[j].x, LUT[j].y);
     lastpos = pos;

docs/index.html

@@ -332,7 +332,7 @@ function Bezier(3,t):
   <graphics-element title="Quadratic interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\control\c7cebd1c54c120c3a9513062e562f3a6.png">
+          <img width="275px" height="275px" src="images\chapters\control\71d891b569460c79765670d3f49d2da9.png">
           <label>Quadratic interpolations</label>
         </fallback-image>
     <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -341,7 +341,7 @@ function Bezier(3,t):
   <graphics-element title="Cubic interpolations" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\control\2c5b710606f31ed8830397ad2a77d16e.png">
+          <img width="275px" height="275px" src="images\chapters\control\3b627846198c0cb3c542fe13cb923029.png">
           <label>Cubic interpolations</label>
         </fallback-image>
     <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -350,7 +350,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>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\control\882ae425daeb3f449e5a4d649b8425e7.png">
+          <img width="275px" height="275px" src="images\chapters\control\2cc2f0127510f2700656c2f894b36674.png">
           <label>15th degree interpolations</label>
         </fallback-image>
     <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -1229,7 +1229,7 @@ function getCubicRoots(pa, pb, pc, pd) {
 <graphics-element title="The canonical curve map" width="400" height="400" src="./chapters/canonical/canonical.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="400px" height="400px" src="images\chapters\canonical\675217e6df3d75c86503dc2af623e14e.png">
+          <img width="400px" height="400px" src="images\chapters\canonical\c086e72bd8aaeab37436515ab251b2df.png">
           <label></label>
         </fallback-image></graphics-element>
 
@@ -1296,7 +1296,7 @@ function getCubicRoots(pa, pb, pc, pd) {
 <graphics-element title="A cubic curve mapped to canonical form" width="800" height="400" src="./chapters/canonical/interactive.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="800px" height="400px" src="images\chapters\canonical\344346f09b6d5d7e3ddf91084ad50d46.png">
+          <img width="800px" height="400px" src="images\chapters\canonical\83fe2473e20ea68b768765129ee44ae4.png">
           <label></label>
         </fallback-image></graphics-element>
 
@@ -1501,7 +1501,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\133bf9d02801a3149c9ddb8b313e6797.png">
+          <img width="825px" height="275px" src="images\chapters\tracing\09cfa54ec3709d54efdce78832e42367.png">
           <label></label>
         </fallback-image>
   <input type="range" min="2" max="24" step="1" value="8" class="slide-control">
@@ -1521,7 +1521,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\61876a2bd727df377619c5ad34ce86be.png">
+          <img width="275px" height="275px" src="images\chapters\intersections\cab1799841eedd1dcd1cd81b6045f40f.png">
           <label>Line/line intersections</label>
         </fallback-image></graphics-element>
 
@@ -1554,13 +1554,13 @@ lli = function(line1, line2):
 <graphics-element title="Quadratic curve/line intersections" width="275" height="275" src="./chapters/intersections/curve-line.js" data-type="quadratic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\intersections\594c2df534a1736c03cd3a96ff4a9913.png">
+          <img width="275px" height="275px" src="images\chapters\intersections\7003a384ec371217af2b225ae65872e7.png">
           <label>Quadratic curve/line intersections</label>
         </fallback-image></graphics-element>
 <graphics-element title="Cubic curve/line intersections" width="275" height="275" src="./chapters/intersections/curve-line.js" data-type="cubic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\intersections\dc26a6063dadc31d242f1c1c8f38bb5e.png">
+          <img width="275px" height="275px" src="images\chapters\intersections\4a762fb56468c342c72756a76d134f05.png">
           <label>Cubic curve/line intersections</label>
         </fallback-image></graphics-element>
 </div>
@@ -1588,7 +1588,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\914e097fe4341697e05b6fd328cc4c91.png">
+          <img width="825px" height="275px" src="images\chapters\curveintersection\9540ecc84c3fc63a07f5372ab031c99e.png">
           <label></label>
         </fallback-image>
   <input type="range" min="0.01" max="1" step="0.01" value="1" class="slide-control">
@@ -1675,7 +1675,7 @@ lli = function(line1, line2):
 <graphics-element title="Finding a circle through three points" width="275" height="275" src="./chapters/pointcurves/circle.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\pointcurves\173ea31517a72a927d561f121f0677db.png">
+          <img width="275px" height="275px" src="images\chapters\pointcurves\43875f6ad588bfd04cdb65b591a62052.png">
           <label>Finding a circle through three points</label>
         </fallback-image></graphics-element>
 
@@ -1689,7 +1689,7 @@ lli = function(line1, line2):
 <graphics-element title="Finding the cubic e₁ and e₂ given three points " width="275" height="275" src="./chapters/pointcurves/circle.js" data-show-curve="true">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\pointcurves\8d045d352f5017b65e60620b92d7ae29.png">
+          <img width="275px" height="275px" src="images\chapters\pointcurves\75f7b5b31e98444e13f17e5c3e5b7322.png">
           <label>Finding the cubic e₁ and e₂ given three points </label>
         </fallback-image></graphics-element>
 
@@ -1743,7 +1743,7 @@ for (coordinate, index) in LUT:
 <graphics-element title="Molding a quadratic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="quadratic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="825px" height="275px" src="images\chapters\molding\9a214cd85a1f0857b1b57db5e9c37b9c.png">
+          <img width="825px" height="275px" src="images\chapters\molding\aefb177e5532a9f995b9d88e85582c68.png">
           <label></label>
         </fallback-image></graphics-element>
 
@@ -1752,7 +1752,7 @@ for (coordinate, index) in LUT:
 <graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="825px" height="275px" src="images\chapters\molding\502de5e21415ee75ab5d2cffbc921a77.png">
+          <img width="825px" height="275px" src="images\chapters\molding\834af194de17a5eb2c1920773ab904e3.png">
           <label></label>
         </fallback-image></graphics-element>
 
@@ -1761,7 +1761,7 @@ for (coordinate, index) in LUT:
 <graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic" data-interpolated="true">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="825px" height="275px" src="images\chapters\molding\610251fd14e24cd1378590de87ce2a74.png">
+          <img width="825px" height="275px" src="images\chapters\molding\cdf7515d133cbf41ffbaea8c488e0924.png">
           <label></label>
         </fallback-image>
   <input type="range" min="10" max="200" step="1" value="100" class="slide-control">
@@ -1864,7 +1864,7 @@ for (coordinate, index) in LUT:
 <graphics-element title="A Catmull-Rom curve" width="275" height="275" src="./chapters/catmullconv/catmull-rom.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\catmullconv\a6289e403f079730b7546ab94176d42f.png">
+          <img width="275px" height="275px" src="images\chapters\catmullconv\aa46749b9469341d9249ca452390d875.png">
           <label>A Catmull-Rom curve</label>
         </fallback-image>
   <input type="range" min="0.1" max="1" step="0.01" value="0.5" class="slide-control tension">
@@ -2087,7 +2087,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Offsetting a quadratic Bézier curve" width="275" height="275" src="./chapters/offsetting/offsetting.js" data-type="quadratic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\offsetting\91cd824148a388762d27e40fabb34e0d.png">
+          <img width="275px" height="275px" src="images\chapters\offsetting\768094c3c47d3888cf81e7a1d20d2eab.png">
           <label>Offsetting a quadratic Bézier curve</label>
         </fallback-image>
   <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2096,7 +2096,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Offsetting a cubic Bézier curve" width="275" height="275" src="./chapters/offsetting/offsetting.js" data-type="cubic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\offsetting\953485135c6d856ae1327fd47e55c920.png">
+          <img width="275px" height="275px" src="images\chapters\offsetting\1ad78f9f9d001278c491b0f2be5cc8ea.png">
           <label>Offsetting a cubic Bézier curve</label>
         </fallback-image>
   <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2120,7 +2120,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Offsetting a quadratic Bézier curve" width="275" height="275" src="./chapters/graduatedoffset/offsetting.js" data-type="quadratic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\graduatedoffset\204745d093e479adaf1fc6fbba0d9d41.png">
+          <img width="275px" height="275px" src="images\chapters\graduatedoffset\8cc724d5343c65685d88c92b2d069a2a.png">
           <label>Offsetting a quadratic Bézier curve</label>
         </fallback-image>
   <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2129,7 +2129,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Offsetting a cubic Bézier curve" width="275" height="275" src="./chapters/graduatedoffset/offsetting.js" data-type="cubic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\graduatedoffset\99ff5ed1aec246be4490cc617c629138.png">
+          <img width="275px" height="275px" src="images\chapters\graduatedoffset\17bf62e05a1fc3387b0c210f2decff45.png">
           <label>Offsetting a cubic Bézier curve</label>
         </fallback-image>
   <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2146,7 +2146,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Quadratic Bézier arc approximation" width="400" height="400" src="./chapters/circles/arc-approximation.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="400px" height="400px" src="images\chapters\circles\6b6d06464219b8b0a046cfd99fe571d1.png">
+          <img width="400px" height="400px" src="images\chapters\circles\5801de8227960faa9bcbae578f78c2a3.png">
           <label></label>
         </fallback-image>
   <input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control">
@@ -2203,7 +2203,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Cubic Bézier arc approximation" width="400" height="400" src="./chapters/circles_cubic/arc-approximation.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="400px" height="400px" src="images\chapters\circles_cubic\9c6b58f84913ca69f930a19ade6baf53.png">
+          <img width="400px" height="400px" src="images\chapters\circles_cubic\da768b84c91262bab8ab36f895e8569b.png">
           <label></label>
         </fallback-image>
   <input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control">
@@ -2319,7 +2319,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Arc approximation of a Bézier curve" width="275" height="275" src="./chapters/arcapproximation/arcs.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\arcapproximation\6f30b487d0cb60a4caeed4a199c48253.png">
+          <img width="275px" height="275px" src="images\chapters\arcapproximation\da76341b841df1af8a39f797e85dfe3c.png">
           <label>Arc approximation of a Bézier curve</label>
         </fallback-image>
   <input type="range" min="0.1" max="5" step="0.1" value="0.5" class="slide-control">

docs/ja-JP/index.html

@@ -334,7 +334,7 @@ function Bezier(3,t):
   <graphics-element title="2次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\control\c7cebd1c54c120c3a9513062e562f3a6.png">
+          <img width="275px" height="275px" src="images\chapters\control\71d891b569460c79765670d3f49d2da9.png">
           <label>2次の補間</label>
         </fallback-image>
     <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -343,7 +343,7 @@ function Bezier(3,t):
   <graphics-element title="3次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\control\2c5b710606f31ed8830397ad2a77d16e.png">
+          <img width="275px" height="275px" src="images\chapters\control\3b627846198c0cb3c542fe13cb923029.png">
           <label>3次の補間</label>
         </fallback-image>
     <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -352,7 +352,7 @@ function Bezier(3,t):
   <graphics-element title="15次の補間" width="275" height="275" src="./chapters/control/lerp.js" data-degree="15">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\control\882ae425daeb3f449e5a4d649b8425e7.png">
+          <img width="275px" height="275px" src="images\chapters\control\2cc2f0127510f2700656c2f894b36674.png">
           <label>15次の補間</label>
         </fallback-image>
     <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -1225,7 +1225,7 @@ function getCubicRoots(pa, pb, pc, pd) {
 <graphics-element title="The canonical curve map" width="400" height="400" src="./chapters/canonical/canonical.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="400px" height="400px" src="images\chapters\canonical\675217e6df3d75c86503dc2af623e14e.png">
+          <img width="400px" height="400px" src="images\chapters\canonical\c086e72bd8aaeab37436515ab251b2df.png">
           <label></label>
         </fallback-image></graphics-element>
 
@@ -1292,7 +1292,7 @@ function getCubicRoots(pa, pb, pc, pd) {
 <graphics-element title="A cubic curve mapped to canonical form" width="800" height="400" src="./chapters/canonical/interactive.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="800px" height="400px" src="images\chapters\canonical\344346f09b6d5d7e3ddf91084ad50d46.png">
+          <img width="800px" height="400px" src="images\chapters\canonical\83fe2473e20ea68b768765129ee44ae4.png">
           <label></label>
         </fallback-image></graphics-element>
 
@@ -1497,7 +1497,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\133bf9d02801a3149c9ddb8b313e6797.png">
+          <img width="825px" height="275px" src="images\chapters\tracing\09cfa54ec3709d54efdce78832e42367.png">
           <label></label>
         </fallback-image>
   <input type="range" min="2" max="24" step="1" value="8" class="slide-control">
@@ -1517,7 +1517,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\61876a2bd727df377619c5ad34ce86be.png">
+          <img width="275px" height="275px" src="images\chapters\intersections\cab1799841eedd1dcd1cd81b6045f40f.png">
           <label>Line/line intersections</label>
         </fallback-image></graphics-element>
 
@@ -1550,13 +1550,13 @@ lli = function(line1, line2):
 <graphics-element title="Quadratic curve/line intersections" width="275" height="275" src="./chapters/intersections/curve-line.js" data-type="quadratic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\intersections\594c2df534a1736c03cd3a96ff4a9913.png">
+          <img width="275px" height="275px" src="images\chapters\intersections\7003a384ec371217af2b225ae65872e7.png">
           <label>Quadratic curve/line intersections</label>
         </fallback-image></graphics-element>
 <graphics-element title="Cubic curve/line intersections" width="275" height="275" src="./chapters/intersections/curve-line.js" data-type="cubic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\intersections\dc26a6063dadc31d242f1c1c8f38bb5e.png">
+          <img width="275px" height="275px" src="images\chapters\intersections\4a762fb56468c342c72756a76d134f05.png">
           <label>Cubic curve/line intersections</label>
         </fallback-image></graphics-element>
 </div>
@@ -1584,7 +1584,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\914e097fe4341697e05b6fd328cc4c91.png">
+          <img width="825px" height="275px" src="images\chapters\curveintersection\9540ecc84c3fc63a07f5372ab031c99e.png">
           <label></label>
         </fallback-image>
   <input type="range" min="0.01" max="1" step="0.01" value="1" class="slide-control">
@@ -1671,7 +1671,7 @@ lli = function(line1, line2):
 <graphics-element title="Finding a circle through three points" width="275" height="275" src="./chapters/pointcurves/circle.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\pointcurves\173ea31517a72a927d561f121f0677db.png">
+          <img width="275px" height="275px" src="images\chapters\pointcurves\43875f6ad588bfd04cdb65b591a62052.png">
           <label>Finding a circle through three points</label>
         </fallback-image></graphics-element>
 
@@ -1685,7 +1685,7 @@ lli = function(line1, line2):
 <graphics-element title="Finding the cubic e₁ and e₂ given three points " width="275" height="275" src="./chapters/pointcurves/circle.js" data-show-curve="true">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\pointcurves\8d045d352f5017b65e60620b92d7ae29.png">
+          <img width="275px" height="275px" src="images\chapters\pointcurves\75f7b5b31e98444e13f17e5c3e5b7322.png">
           <label>Finding the cubic e₁ and e₂ given three points </label>
         </fallback-image></graphics-element>
 
@@ -1739,7 +1739,7 @@ for (coordinate, index) in LUT:
 <graphics-element title="Molding a quadratic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="quadratic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="825px" height="275px" src="images\chapters\molding\9a214cd85a1f0857b1b57db5e9c37b9c.png">
+          <img width="825px" height="275px" src="images\chapters\molding\aefb177e5532a9f995b9d88e85582c68.png">
           <label></label>
         </fallback-image></graphics-element>
 
@@ -1748,7 +1748,7 @@ for (coordinate, index) in LUT:
 <graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="825px" height="275px" src="images\chapters\molding\502de5e21415ee75ab5d2cffbc921a77.png">
+          <img width="825px" height="275px" src="images\chapters\molding\834af194de17a5eb2c1920773ab904e3.png">
           <label></label>
         </fallback-image></graphics-element>
 
@@ -1757,7 +1757,7 @@ for (coordinate, index) in LUT:
 <graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic" data-interpolated="true">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="825px" height="275px" src="images\chapters\molding\610251fd14e24cd1378590de87ce2a74.png">
+          <img width="825px" height="275px" src="images\chapters\molding\cdf7515d133cbf41ffbaea8c488e0924.png">
           <label></label>
         </fallback-image>
   <input type="range" min="10" max="200" step="1" value="100" class="slide-control">
@@ -1860,7 +1860,7 @@ for (coordinate, index) in LUT:
 <graphics-element title="A Catmull-Rom curve" width="275" height="275" src="./chapters/catmullconv/catmull-rom.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\catmullconv\a6289e403f079730b7546ab94176d42f.png">
+          <img width="275px" height="275px" src="images\chapters\catmullconv\aa46749b9469341d9249ca452390d875.png">
           <label>A Catmull-Rom curve</label>
         </fallback-image>
   <input type="range" min="0.1" max="1" step="0.01" value="0.5" class="slide-control tension">
@@ -2083,7 +2083,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Offsetting a quadratic Bézier curve" width="275" height="275" src="./chapters/offsetting/offsetting.js" data-type="quadratic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\offsetting\91cd824148a388762d27e40fabb34e0d.png">
+          <img width="275px" height="275px" src="images\chapters\offsetting\768094c3c47d3888cf81e7a1d20d2eab.png">
           <label>Offsetting a quadratic Bézier curve</label>
         </fallback-image>
   <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2092,7 +2092,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Offsetting a cubic Bézier curve" width="275" height="275" src="./chapters/offsetting/offsetting.js" data-type="cubic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\offsetting\953485135c6d856ae1327fd47e55c920.png">
+          <img width="275px" height="275px" src="images\chapters\offsetting\1ad78f9f9d001278c491b0f2be5cc8ea.png">
           <label>Offsetting a cubic Bézier curve</label>
         </fallback-image>
   <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2116,7 +2116,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Offsetting a quadratic Bézier curve" width="275" height="275" src="./chapters/graduatedoffset/offsetting.js" data-type="quadratic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\graduatedoffset\204745d093e479adaf1fc6fbba0d9d41.png">
+          <img width="275px" height="275px" src="images\chapters\graduatedoffset\8cc724d5343c65685d88c92b2d069a2a.png">
           <label>Offsetting a quadratic Bézier curve</label>
         </fallback-image>
   <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2125,7 +2125,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Offsetting a cubic Bézier curve" width="275" height="275" src="./chapters/graduatedoffset/offsetting.js" data-type="cubic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\graduatedoffset\99ff5ed1aec246be4490cc617c629138.png">
+          <img width="275px" height="275px" src="images\chapters\graduatedoffset\17bf62e05a1fc3387b0c210f2decff45.png">
           <label>Offsetting a cubic Bézier curve</label>
         </fallback-image>
   <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2142,7 +2142,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Quadratic Bézier arc approximation" width="400" height="400" src="./chapters/circles/arc-approximation.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="400px" height="400px" src="images\chapters\circles\6b6d06464219b8b0a046cfd99fe571d1.png">
+          <img width="400px" height="400px" src="images\chapters\circles\5801de8227960faa9bcbae578f78c2a3.png">
           <label></label>
         </fallback-image>
   <input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control">
@@ -2199,7 +2199,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Cubic Bézier arc approximation" width="400" height="400" src="./chapters/circles_cubic/arc-approximation.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="400px" height="400px" src="images\chapters\circles_cubic\9c6b58f84913ca69f930a19ade6baf53.png">
+          <img width="400px" height="400px" src="images\chapters\circles_cubic\da768b84c91262bab8ab36f895e8569b.png">
           <label></label>
         </fallback-image>
   <input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control">
@@ -2315,7 +2315,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Arc approximation of a Bézier curve" width="275" height="275" src="./chapters/arcapproximation/arcs.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\arcapproximation\6f30b487d0cb60a4caeed4a199c48253.png">
+          <img width="275px" height="275px" src="images\chapters\arcapproximation\da76341b841df1af8a39f797e85dfe3c.png">
           <label>Arc approximation of a Bézier curve</label>
         </fallback-image>
   <input type="range" min="0.1" max="5" step="0.1" value="0.5" class="slide-control">

docs/js/custom-element/lib/perform-code-surgery.js

@@ -22,7 +22,7 @@ export default function performCodeSurgery(code) {
   // 3. rewrite all public GraphicsAPI functions to have the required `this.` prefix
 
   GraphicsAPI.methods.forEach((fn) => {
-    const re = new RegExp(`([\\s\\r\\n])${fn}\\(`, `g`);
+    const re = new RegExp(`([({\\s\\r\\n])${fn}\\(`, `g`);
     code = code.replace(re, `$1this.${fn}(`);
   });
 

docs/zh-CN/index.html

@@ -328,7 +328,7 @@ function Bezier(3,t):
   <graphics-element title="二次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="3">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\control\c7cebd1c54c120c3a9513062e562f3a6.png">
+          <img width="275px" height="275px" src="images\chapters\control\71d891b569460c79765670d3f49d2da9.png">
           <label>二次插值</label>
         </fallback-image>
     <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -337,7 +337,7 @@ function Bezier(3,t):
   <graphics-element title="三次插值" width="275" height="275" src="./chapters/control/lerp.js" data-degree="4">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\control\2c5b710606f31ed8830397ad2a77d16e.png">
+          <img width="275px" height="275px" src="images\chapters\control\3b627846198c0cb3c542fe13cb923029.png">
           <label>三次插值</label>
         </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>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\control\882ae425daeb3f449e5a4d649b8425e7.png">
+          <img width="275px" height="275px" src="images\chapters\control\2cc2f0127510f2700656c2f894b36674.png">
           <label>15次插值</label>
         </fallback-image>
     <input type="range" min="0" max="1" step="0.01" value="0" class="slide-control">
@@ -1219,7 +1219,7 @@ function getCubicRoots(pa, pb, pc, pd) {
 <graphics-element title="The canonical curve map" width="400" height="400" src="./chapters/canonical/canonical.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="400px" height="400px" src="images\chapters\canonical\675217e6df3d75c86503dc2af623e14e.png">
+          <img width="400px" height="400px" src="images\chapters\canonical\c086e72bd8aaeab37436515ab251b2df.png">
           <label></label>
         </fallback-image></graphics-element>
 
@@ -1286,7 +1286,7 @@ function getCubicRoots(pa, pb, pc, pd) {
 <graphics-element title="A cubic curve mapped to canonical form" width="800" height="400" src="./chapters/canonical/interactive.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="800px" height="400px" src="images\chapters\canonical\344346f09b6d5d7e3ddf91084ad50d46.png">
+          <img width="800px" height="400px" src="images\chapters\canonical\83fe2473e20ea68b768765129ee44ae4.png">
           <label></label>
         </fallback-image></graphics-element>
 
@@ -1491,7 +1491,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\133bf9d02801a3149c9ddb8b313e6797.png">
+          <img width="825px" height="275px" src="images\chapters\tracing\09cfa54ec3709d54efdce78832e42367.png">
           <label></label>
         </fallback-image>
   <input type="range" min="2" max="24" step="1" value="8" class="slide-control">
@@ -1511,7 +1511,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\61876a2bd727df377619c5ad34ce86be.png">
+          <img width="275px" height="275px" src="images\chapters\intersections\cab1799841eedd1dcd1cd81b6045f40f.png">
           <label>Line/line intersections</label>
         </fallback-image></graphics-element>
 
@@ -1544,13 +1544,13 @@ lli = function(line1, line2):
 <graphics-element title="Quadratic curve/line intersections" width="275" height="275" src="./chapters/intersections/curve-line.js" data-type="quadratic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\intersections\594c2df534a1736c03cd3a96ff4a9913.png">
+          <img width="275px" height="275px" src="images\chapters\intersections\7003a384ec371217af2b225ae65872e7.png">
           <label>Quadratic curve/line intersections</label>
         </fallback-image></graphics-element>
 <graphics-element title="Cubic curve/line intersections" width="275" height="275" src="./chapters/intersections/curve-line.js" data-type="cubic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\intersections\dc26a6063dadc31d242f1c1c8f38bb5e.png">
+          <img width="275px" height="275px" src="images\chapters\intersections\4a762fb56468c342c72756a76d134f05.png">
           <label>Cubic curve/line intersections</label>
         </fallback-image></graphics-element>
 </div>
@@ -1578,7 +1578,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\914e097fe4341697e05b6fd328cc4c91.png">
+          <img width="825px" height="275px" src="images\chapters\curveintersection\9540ecc84c3fc63a07f5372ab031c99e.png">
           <label></label>
         </fallback-image>
   <input type="range" min="0.01" max="1" step="0.01" value="1" class="slide-control">
@@ -1665,7 +1665,7 @@ lli = function(line1, line2):
 <graphics-element title="Finding a circle through three points" width="275" height="275" src="./chapters/pointcurves/circle.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\pointcurves\173ea31517a72a927d561f121f0677db.png">
+          <img width="275px" height="275px" src="images\chapters\pointcurves\43875f6ad588bfd04cdb65b591a62052.png">
           <label>Finding a circle through three points</label>
         </fallback-image></graphics-element>
 
@@ -1679,7 +1679,7 @@ lli = function(line1, line2):
 <graphics-element title="Finding the cubic e₁ and e₂ given three points " width="275" height="275" src="./chapters/pointcurves/circle.js" data-show-curve="true">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\pointcurves\8d045d352f5017b65e60620b92d7ae29.png">
+          <img width="275px" height="275px" src="images\chapters\pointcurves\75f7b5b31e98444e13f17e5c3e5b7322.png">
           <label>Finding the cubic e₁ and e₂ given three points </label>
         </fallback-image></graphics-element>
 
@@ -1733,7 +1733,7 @@ for (coordinate, index) in LUT:
 <graphics-element title="Molding a quadratic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="quadratic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="825px" height="275px" src="images\chapters\molding\9a214cd85a1f0857b1b57db5e9c37b9c.png">
+          <img width="825px" height="275px" src="images\chapters\molding\aefb177e5532a9f995b9d88e85582c68.png">
           <label></label>
         </fallback-image></graphics-element>
 
@@ -1742,7 +1742,7 @@ for (coordinate, index) in LUT:
 <graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="825px" height="275px" src="images\chapters\molding\502de5e21415ee75ab5d2cffbc921a77.png">
+          <img width="825px" height="275px" src="images\chapters\molding\834af194de17a5eb2c1920773ab904e3.png">
           <label></label>
         </fallback-image></graphics-element>
 
@@ -1751,7 +1751,7 @@ for (coordinate, index) in LUT:
 <graphics-element title="Molding a cubic Bézier curve" width="825" height="275" src="./chapters/molding/molding.js" data-type="cubic" data-interpolated="true">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="825px" height="275px" src="images\chapters\molding\610251fd14e24cd1378590de87ce2a74.png">
+          <img width="825px" height="275px" src="images\chapters\molding\cdf7515d133cbf41ffbaea8c488e0924.png">
           <label></label>
         </fallback-image>
   <input type="range" min="10" max="200" step="1" value="100" class="slide-control">
@@ -1854,7 +1854,7 @@ for (coordinate, index) in LUT:
 <graphics-element title="A Catmull-Rom curve" width="275" height="275" src="./chapters/catmullconv/catmull-rom.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\catmullconv\a6289e403f079730b7546ab94176d42f.png">
+          <img width="275px" height="275px" src="images\chapters\catmullconv\aa46749b9469341d9249ca452390d875.png">
           <label>A Catmull-Rom curve</label>
         </fallback-image>
   <input type="range" min="0.1" max="1" step="0.01" value="0.5" class="slide-control tension">
@@ -2077,7 +2077,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Offsetting a quadratic Bézier curve" width="275" height="275" src="./chapters/offsetting/offsetting.js" data-type="quadratic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\offsetting\91cd824148a388762d27e40fabb34e0d.png">
+          <img width="275px" height="275px" src="images\chapters\offsetting\768094c3c47d3888cf81e7a1d20d2eab.png">
           <label>Offsetting a quadratic Bézier curve</label>
         </fallback-image>
   <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2086,7 +2086,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Offsetting a cubic Bézier curve" width="275" height="275" src="./chapters/offsetting/offsetting.js" data-type="cubic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\offsetting\953485135c6d856ae1327fd47e55c920.png">
+          <img width="275px" height="275px" src="images\chapters\offsetting\1ad78f9f9d001278c491b0f2be5cc8ea.png">
           <label>Offsetting a cubic Bézier curve</label>
         </fallback-image>
   <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2110,7 +2110,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Offsetting a quadratic Bézier curve" width="275" height="275" src="./chapters/graduatedoffset/offsetting.js" data-type="quadratic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\graduatedoffset\204745d093e479adaf1fc6fbba0d9d41.png">
+          <img width="275px" height="275px" src="images\chapters\graduatedoffset\8cc724d5343c65685d88c92b2d069a2a.png">
           <label>Offsetting a quadratic Bézier curve</label>
         </fallback-image>
   <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2119,7 +2119,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Offsetting a cubic Bézier curve" width="275" height="275" src="./chapters/graduatedoffset/offsetting.js" data-type="cubic">
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\graduatedoffset\99ff5ed1aec246be4490cc617c629138.png">
+          <img width="275px" height="275px" src="images\chapters\graduatedoffset\17bf62e05a1fc3387b0c210f2decff45.png">
           <label>Offsetting a cubic Bézier curve</label>
         </fallback-image>
   <input type="range" min="5" max="50" step="1" value="20" class="slide-control">
@@ -2136,7 +2136,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Quadratic Bézier arc approximation" width="400" height="400" src="./chapters/circles/arc-approximation.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="400px" height="400px" src="images\chapters\circles\6b6d06464219b8b0a046cfd99fe571d1.png">
+          <img width="400px" height="400px" src="images\chapters\circles\5801de8227960faa9bcbae578f78c2a3.png">
           <label></label>
         </fallback-image>
   <input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control">
@@ -2193,7 +2193,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Cubic Bézier arc approximation" width="400" height="400" src="./chapters/circles_cubic/arc-approximation.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="400px" height="400px" src="images\chapters\circles_cubic\9c6b58f84913ca69f930a19ade6baf53.png">
+          <img width="400px" height="400px" src="images\chapters\circles_cubic\da768b84c91262bab8ab36f895e8569b.png">
           <label></label>
         </fallback-image>
   <input type="range" min="-3.1415" max="3.1415" step="0.01" value="-0.7854" class="slide-control">
@@ -2309,7 +2309,7 @@ for p = 1 to points.length-3 (inclusive):
 <graphics-element title="Arc approximation of a Bézier curve" width="275" height="275" src="./chapters/arcapproximation/arcs.js" >
         <fallback-image>
           <span class="view-source">Scripts are disabled. Showing fallback image.</span>
-          <img width="275px" height="275px" src="images\chapters\arcapproximation\6f30b487d0cb60a4caeed4a199c48253.png">
+          <img width="275px" height="275px" src="images\chapters\arcapproximation\da76341b841df1af8a39f797e85dfe3c.png">
           <label>Arc approximation of a Bézier curve</label>
         </fallback-image>
   <input type="range" min="0.1" max="5" step="0.1" value="0.5" class="slide-control">