.

docs/chapters/bsplines/basic.js

@@ -19,9 +19,6 @@ setup() {
 draw() {
     clear();
 
-    setStroke(`lightgrey`);
-    drawGrid(20);
-
     setStroke(this.parameters.showCurves ? `transparent` : `#CC00CC99`);
     for (let i=0, e=points.length-1, p, n; i<e; i++) {
       p = points[i];

docs/chapters/bsplines/rational-uniform.js

@@ -16,7 +16,7 @@ setup() {
   });
 
   points = points.concat(points.slice(0,3));
-  setMovable(points);
+  setMovable(points);;
 }
 
 setWeight(i, v) {
@@ -26,9 +26,6 @@ setWeight(i, v) {
 draw() {
   clear();
 
-  setStroke(`lightgrey`);
-  drawGrid(20);
-
   setStroke(`#CC00CC99`);
   for (let i=0, e=points.length-1, p, n; i<e; i++) {
     p = points[i];

docs/chapters/bsplines/reduced.js

@@ -34,9 +34,6 @@ setKnotValue(i, v) {
 draw() {
   clear();
 
-  setStroke(`lightgrey`);
-  drawGrid(20);
-
   setStroke(`#CC00CC99`);
   for (let i=0, e=points.length-1, p, n; i<e; i++) {
     p = points[i];

docs/chapters/bsplines/uniform.js

@@ -26,9 +26,6 @@ setKnotValue(i, v) {
 draw() {
   clear();
 
-  setStroke(`lightgrey`);
-  drawGrid(20);
-
   setStroke(`#CC00CC99`);
   for (let i=0, e=points.length-1, p, n; i<e; i++) {
     p = points[i];

docs/chapters/catmullconv/catmull-rom.js

@@ -21,8 +21,6 @@ transformTension(v) {
 
 draw() {
     clear();
-    setStroke(`lightgrey`);
-    drawGrid(20);
 
     const p = points, n = points.length;
     for (let i=1, e=n-2; i<e; i++) {

docs/chapters/curvefitting/curve-fitting.js

@@ -15,8 +15,6 @@ toggle() {
 
 draw() {
   clear();
-  setColor('lightgrey');
-  drawGrid(10);
 
   setColor('black');
   setFontSize(16);

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

@@ -18,8 +18,7 @@ The following graphic applies this algorithm to a pair of cubic curves, one step
 
 <graphics-element title="Curve/curve intersections" width="825" src="./curve-curve.js">
   <button class="next">Advance one step</button>
-  <button class="reset">Reset</button>
-  <input type="range" min="0.01" max="1" step="0.01" value="1" class="slide-control">
+  <input type="range" min="0.01" max="5" step="0.01" value="1" class="slide-control">
 </graphics-element>
 
 Finding self-intersections is effectively the same procedure, except that we're starting with a single curve, so we need to turn that into two separate curves first. This is trivially achieved by splitting at an inflection point, or if there are none, just splitting at `t=0.5` first, and then running the exact same algorithm as above, with all non-overlapping curve pairs getting removed at each iteration, and each successive step homing in on the curve's self-intersection points.

docs/chapters/curveintersection/curve-curve.js

@@ -29,12 +29,6 @@ setupEventListening() {
     this.step++;
     redraw();
   });
-
-  let reset = find(`.reset`);
-  if (reset) reset.listen([`click`,`touchstart`],  evt => {
-    this.pairReset();
-    redraw();
-  });
 }
 
 draw() {

docs/chapters/drawing/handler.js

@@ -30,8 +30,6 @@ module.exports = {
   draw: function(api, curve) {
     api.setPanelCount(1);
     api.reset();
-    api.setColor('lightgrey');
-    api.drawGrid(10,10);
 
     api.setColor('black');
 

docs/chapters/reordering/reorder.js

@@ -23,8 +23,6 @@ bindButtons() {
 
 draw() {
     clear();
-    setStroke(`lightgrey`);
-    drawGrid(20);
     this.drawCurve();
 }
 

docs/index.html

@@ -1582,7 +1582,7 @@ function drawCurve(points[], t):
 					<graphics-element title="A variable-order Bézier curve" width="275" height="275" src="./chapters/reordering/reorder.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\reordering\b143027eacfe962c77fb052686f359a1.png" />
+							<img width="275px" height="275px" src="images\chapters\reordering\71f47629388901b821976e034be159e4.png" />
 							<label>A variable-order Bézier curve</label>
 						</fallback-image>
 						<button class="raise">raise</button>
@@ -3577,12 +3577,11 @@ 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\390fe022c4e290a7a9d3814ae2936b77.png" />
+							<img width="825px" height="275px" src="images\chapters\curveintersection\e1f4f4dba7a338d342559bcfb0ea8e02.png" />
 							<label></label>
 						</fallback-image>
 						<button class="next">Advance one step</button>
-						<button class="reset">Reset</button>
-						<input type="range" min="0.01" max="1" step="0.01" value="1" class="slide-control" />
+						<input type="range" min="0.01" max="5" step="0.01" value="1" class="slide-control" />
 					</graphics-element>
 
 					<p>
@@ -4330,7 +4329,7 @@ for (coordinate, index) in LUT:
 					<graphics-element title="Fitting a Bézier curve" width="550" height="275" src="./chapters/curvefitting/curve-fitting.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="550px" height="275px" src="images\chapters\curvefitting\1307361f152242ab0263d81a469cf43b.png" />
+							<img width="550px" height="275px" src="images\chapters\curvefitting\798f3d7151dfb2887c7881a08e65cdd3.png" />
 							<label></label>
 						</fallback-image>
 						<button class="toggle">toggle</button>
@@ -4362,7 +4361,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\e1e640b29dd07f905c1555438511cad9.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" />
@@ -5653,7 +5652,7 @@ for p = 1 to points.length-3 (inclusive):
 					<graphics-element title="A B-Spline example" width="600" height="300" src="./chapters/bsplines/basic.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="600px" height="300px" src="images\chapters\bsplines\61f28e4b071beeaf755f8826c529fe0a.png" />
+							<img width="600px" height="300px" src="images\chapters\bsplines\fe3a8ca5706f286d916e36699e237e51.png" />
 							<label></label> </fallback-image
 					></graphics-element>
 
@@ -5675,7 +5674,7 @@ for p = 1 to points.length-3 (inclusive):
 					<graphics-element title="The components of a B-Spline " width="600" height="300" src="./chapters/bsplines/basic.js" data-show-curves="true">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="600px" height="300px" src="images\chapters\bsplines\ac9e15a627ed2bc88c5e1b73147b7991.png" />
+							<img width="600px" height="300px" src="images\chapters\bsplines\41167c64c51386414c6e62f0b45e6295.png" />
 							<label></label>
 						</fallback-image>
 						<!-- basis curve highlighter goes here -->
@@ -5845,7 +5844,7 @@ for(let L = 1; L &lt;= order; L++) {
 					<graphics-element title="A uniform B-Spline" width="400" height="400" src="./chapters/bsplines/uniform.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="400px" height="400px" src="images\chapters\bsplines\3cfaf7bf5e950072437cfe70391155fa.png" />
+							<img width="400px" height="400px" src="images\chapters\bsplines\48a30189e74658737b3a8b28bb816f8a.png" />
 							<label></label>
 						</fallback-image>
 						<!-- knot sliders go here -->
@@ -5870,7 +5869,7 @@ for(let L = 1; L &lt;= order; L++) {
 					<graphics-element title="A reduced uniform B-Spline" width="400" height="400" src="./chapters/bsplines/reduced.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="400px" height="400px" src="images\chapters\bsplines\6ba59877389e2c856234403ecbd953f9.png" />
+							<img width="400px" height="400px" src="images\chapters\bsplines\ceaef2fbee05a58aa11835925403b4cd.png" />
 							<label></label>
 						</fallback-image>
 						<!-- knot sliders go here -->
@@ -5891,7 +5890,7 @@ for(let L = 1; L &lt;= order; L++) {
 					<graphics-element title="An open, uniform B-Spline" width="400" height="400" src="./chapters/bsplines/uniform.js" data-open="true">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="400px" height="400px" src="images\chapters\bsplines\9c4bbb753918e3cb8cbc5a770a2af9ee.png" />
+							<img width="400px" height="400px" src="images\chapters\bsplines\0215dc106e4ad51afe043c0176a595f6.png" />
 							<label></label>
 						</fallback-image>
 						<!-- knot sliders go here -->
@@ -5914,7 +5913,7 @@ for(let L = 1; L &lt;= order; L++) {
 					<graphics-element title="A (closed) rational, uniform B-Spline" width="400" height="400" src="./chapters/bsplines/rational-uniform.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="400px" height="400px" src="images\chapters\bsplines\e50d628696245ef68b691e28b2162d56.png" />
+							<img width="400px" height="400px" src="images\chapters\bsplines\0d9c2186423466a32bb8fbd187409f82.png" />
 							<label></label>
 						</fallback-image>
 						<!-- knot sliders go here -->

docs/ja-JP/index.html

@@ -1417,7 +1417,7 @@ function drawCurve(points[], t):
 					<graphics-element title="A variable-order Bézier curve" width="275" height="275" src="./chapters/reordering/reorder.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\reordering\b143027eacfe962c77fb052686f359a1.png" />
+							<img width="275px" height="275px" src="images\chapters\reordering\71f47629388901b821976e034be159e4.png" />
 							<label>A variable-order Bézier curve</label>
 						</fallback-image>
 						<button class="raise">raise</button>
@@ -3412,12 +3412,11 @@ 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\390fe022c4e290a7a9d3814ae2936b77.png" />
+							<img width="825px" height="275px" src="images\chapters\curveintersection\e1f4f4dba7a338d342559bcfb0ea8e02.png" />
 							<label></label>
 						</fallback-image>
 						<button class="next">Advance one step</button>
-						<button class="reset">Reset</button>
-						<input type="range" min="0.01" max="1" step="0.01" value="1" class="slide-control" />
+						<input type="range" min="0.01" max="5" step="0.01" value="1" class="slide-control" />
 					</graphics-element>
 
 					<p>
@@ -4165,7 +4164,7 @@ for (coordinate, index) in LUT:
 					<graphics-element title="Fitting a Bézier curve" width="550" height="275" src="./chapters/curvefitting/curve-fitting.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="550px" height="275px" src="images\chapters\curvefitting\1307361f152242ab0263d81a469cf43b.png" />
+							<img width="550px" height="275px" src="images\chapters\curvefitting\798f3d7151dfb2887c7881a08e65cdd3.png" />
 							<label></label>
 						</fallback-image>
 						<button class="toggle">toggle</button>
@@ -4197,7 +4196,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\e1e640b29dd07f905c1555438511cad9.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" />
@@ -5488,7 +5487,7 @@ for p = 1 to points.length-3 (inclusive):
 					<graphics-element title="A B-Spline example" width="600" height="300" src="./chapters/bsplines/basic.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="600px" height="300px" src="images\chapters\bsplines\61f28e4b071beeaf755f8826c529fe0a.png" />
+							<img width="600px" height="300px" src="images\chapters\bsplines\fe3a8ca5706f286d916e36699e237e51.png" />
 							<label></label> </fallback-image
 					></graphics-element>
 
@@ -5510,7 +5509,7 @@ for p = 1 to points.length-3 (inclusive):
 					<graphics-element title="The components of a B-Spline " width="600" height="300" src="./chapters/bsplines/basic.js" data-show-curves="true">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="600px" height="300px" src="images\chapters\bsplines\ac9e15a627ed2bc88c5e1b73147b7991.png" />
+							<img width="600px" height="300px" src="images\chapters\bsplines\41167c64c51386414c6e62f0b45e6295.png" />
 							<label></label>
 						</fallback-image>
 						<!-- basis curve highlighter goes here -->
@@ -5680,7 +5679,7 @@ for(let L = 1; L &lt;= order; L++) {
 					<graphics-element title="A uniform B-Spline" width="400" height="400" src="./chapters/bsplines/uniform.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="400px" height="400px" src="images\chapters\bsplines\3cfaf7bf5e950072437cfe70391155fa.png" />
+							<img width="400px" height="400px" src="images\chapters\bsplines\48a30189e74658737b3a8b28bb816f8a.png" />
 							<label></label>
 						</fallback-image>
 						<!-- knot sliders go here -->
@@ -5705,7 +5704,7 @@ for(let L = 1; L &lt;= order; L++) {
 					<graphics-element title="A reduced uniform B-Spline" width="400" height="400" src="./chapters/bsplines/reduced.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="400px" height="400px" src="images\chapters\bsplines\6ba59877389e2c856234403ecbd953f9.png" />
+							<img width="400px" height="400px" src="images\chapters\bsplines\ceaef2fbee05a58aa11835925403b4cd.png" />
 							<label></label>
 						</fallback-image>
 						<!-- knot sliders go here -->
@@ -5726,7 +5725,7 @@ for(let L = 1; L &lt;= order; L++) {
 					<graphics-element title="An open, uniform B-Spline" width="400" height="400" src="./chapters/bsplines/uniform.js" data-open="true">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="400px" height="400px" src="images\chapters\bsplines\9c4bbb753918e3cb8cbc5a770a2af9ee.png" />
+							<img width="400px" height="400px" src="images\chapters\bsplines\0215dc106e4ad51afe043c0176a595f6.png" />
 							<label></label>
 						</fallback-image>
 						<!-- knot sliders go here -->
@@ -5749,7 +5748,7 @@ for(let L = 1; L &lt;= order; L++) {
 					<graphics-element title="A (closed) rational, uniform B-Spline" width="400" height="400" src="./chapters/bsplines/rational-uniform.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="400px" height="400px" src="images\chapters\bsplines\e50d628696245ef68b691e28b2162d56.png" />
+							<img width="400px" height="400px" src="images\chapters\bsplines\0d9c2186423466a32bb8fbd187409f82.png" />
 							<label></label>
 						</fallback-image>
 						<!-- knot sliders go here -->

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

@@ -254,7 +254,7 @@ class GraphicsAPI extends BaseAPI {
       label.innerHTML = propLabel;
       wrapper.append(label);
       slider.parentNode.replaceChild(wrapper, slider);
-      slider.setAttribute(`class`, `slider`);
+      slider.classList.add(`slider`);
       this._sliders[propname] = slider;
       wrapper.append(slider);
       let valueField = create(`label`);
@@ -597,10 +597,12 @@ class GraphicsAPI extends BaseAPI {
     this.ctx.restoreStyle();
     if (!preserveTransforms) this.resetTransform();
     if (this._gridParams) {
+      this.ctx.cacheStyle();
       this.setStroke(this._gridParams.color);
       this.translate(0.5, 0.5);
       this.drawGrid(this._gridParams.size);
       this.translate(-0.5, -0.5);
+      this.ctx.restoreStyle();
     }
   }
 

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

@@ -45,6 +45,8 @@ class GraphicsElement extends CustomElement {
   constructor() {
     super({ header: false, footer: false });
 
+    this.originalHTML = this.outerHTML;
+
     // Do we load immediately?
     if (isInViewport(this)) {
       this.loadSource();
@@ -76,10 +78,13 @@ class GraphicsElement extends CustomElement {
   getStyle() {
     return `
       :host([hidden]) { display: none; }
+      :host { max-width: calc(2em + ${this.getAttribute(`width`)}px); }
       :host style { display: none; }
+      :host .top-title { display: flex; flex-direction: row; justify-content: space-between; }
       :host canvas { position: relative; z-index: 1; display: block; margin: auto; border-radius: 0; box-sizing: content-box!important; border: 1px solid lightgrey; }
       :host canvas:focus { border: 1px solid red; }
-      :host a.view-source { display: block; position:relative; top: -0.6em; margin-bottom: -0.2em; font-size: 60%; text-decoration: none; }
+      :host a.view-source { font-size: 60%; text-decoration: none; }
+      :host button.reset { font-size: 0.5em; }
       :host label { display: block; font-style:italic; font-size: 0.9em; text-align: right; }
     `;
   }
@@ -183,7 +188,10 @@ class GraphicsElement extends CustomElement {
       rerender = true;
     }
 
-    const uid = `bg-uid-${Date.now()}-${`${Math.random()}`.replace(`0.`, ``)}`;
+    const uid = (this.uid = `bg-uid-${Date.now()}-${`${Math.random()}`.replace(
+      `0.`,
+      ``
+    )}`);
     window[uid] = this;
 
     // Step 1: fix the imports. This is ... a bit of work.
@@ -244,6 +252,13 @@ class GraphicsElement extends CustomElement {
     if (rerender) this.render();
   }
 
+  /**
+   * Reload this graphics element the brute force way.
+   */
+  async reset() {
+    this.outerHTML = this.originalHTML;
+  }
+
   /**
    * Hand the <graphics-element> a reference to the "Example" instance that it built.
    */
@@ -308,12 +323,23 @@ class GraphicsElement extends CustomElement {
     if (this.canvas) slotParent.insertBefore(this.canvas, this._slot);
     if (this.label) slotParent.insertBefore(this.label, this._slot);
 
-    const a = document.createElement("a");
-    a.classList.add("view-source");
+    const toptitle = document.createElement(`div`);
+    toptitle.classList.add(`top-title`);
+
+    const a = document.createElement(`a`);
+    a.classList.add(`view-source`);
     a.textContent = `view source`;
     a.href = this.src;
     a.target = `_blank`;
-    if (this.label) slotParent.insertBefore(a, this.canvas);
+    toptitle.append(a);
+
+    const r = document.createElement(`button`);
+    r.classList.add(`reset`);
+    r.textContent = `reset`;
+    r.addEventListener(`click`, () => this.reset());
+    toptitle.append(r);
+
+    if (this.label) slotParent.insertBefore(toptitle, this.canvas);
   }
 }
 

docs/zh-CN/index.html

@@ -1389,7 +1389,7 @@ function drawCurve(points[], t):
 					<graphics-element title="A variable-order Bézier curve" width="275" height="275" src="./chapters/reordering/reorder.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="275px" height="275px" src="images\chapters\reordering\b143027eacfe962c77fb052686f359a1.png" />
+							<img width="275px" height="275px" src="images\chapters\reordering\71f47629388901b821976e034be159e4.png" />
 							<label>A variable-order Bézier curve</label>
 						</fallback-image>
 						<button class="raise">raise</button>
@@ -3384,12 +3384,11 @@ 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\390fe022c4e290a7a9d3814ae2936b77.png" />
+							<img width="825px" height="275px" src="images\chapters\curveintersection\e1f4f4dba7a338d342559bcfb0ea8e02.png" />
 							<label></label>
 						</fallback-image>
 						<button class="next">Advance one step</button>
-						<button class="reset">Reset</button>
-						<input type="range" min="0.01" max="1" step="0.01" value="1" class="slide-control" />
+						<input type="range" min="0.01" max="5" step="0.01" value="1" class="slide-control" />
 					</graphics-element>
 
 					<p>
@@ -4137,7 +4136,7 @@ for (coordinate, index) in LUT:
 					<graphics-element title="Fitting a Bézier curve" width="550" height="275" src="./chapters/curvefitting/curve-fitting.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="550px" height="275px" src="images\chapters\curvefitting\1307361f152242ab0263d81a469cf43b.png" />
+							<img width="550px" height="275px" src="images\chapters\curvefitting\798f3d7151dfb2887c7881a08e65cdd3.png" />
 							<label></label>
 						</fallback-image>
 						<button class="toggle">toggle</button>
@@ -4169,7 +4168,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\e1e640b29dd07f905c1555438511cad9.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" />
@@ -5460,7 +5459,7 @@ for p = 1 to points.length-3 (inclusive):
 					<graphics-element title="A B-Spline example" width="600" height="300" src="./chapters/bsplines/basic.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="600px" height="300px" src="images\chapters\bsplines\61f28e4b071beeaf755f8826c529fe0a.png" />
+							<img width="600px" height="300px" src="images\chapters\bsplines\fe3a8ca5706f286d916e36699e237e51.png" />
 							<label></label> </fallback-image
 					></graphics-element>
 
@@ -5482,7 +5481,7 @@ for p = 1 to points.length-3 (inclusive):
 					<graphics-element title="The components of a B-Spline " width="600" height="300" src="./chapters/bsplines/basic.js" data-show-curves="true">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="600px" height="300px" src="images\chapters\bsplines\ac9e15a627ed2bc88c5e1b73147b7991.png" />
+							<img width="600px" height="300px" src="images\chapters\bsplines\41167c64c51386414c6e62f0b45e6295.png" />
 							<label></label>
 						</fallback-image>
 						<!-- basis curve highlighter goes here -->
@@ -5652,7 +5651,7 @@ for(let L = 1; L &lt;= order; L++) {
 					<graphics-element title="A uniform B-Spline" width="400" height="400" src="./chapters/bsplines/uniform.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="400px" height="400px" src="images\chapters\bsplines\3cfaf7bf5e950072437cfe70391155fa.png" />
+							<img width="400px" height="400px" src="images\chapters\bsplines\48a30189e74658737b3a8b28bb816f8a.png" />
 							<label></label>
 						</fallback-image>
 						<!-- knot sliders go here -->
@@ -5677,7 +5676,7 @@ for(let L = 1; L &lt;= order; L++) {
 					<graphics-element title="A reduced uniform B-Spline" width="400" height="400" src="./chapters/bsplines/reduced.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="400px" height="400px" src="images\chapters\bsplines\6ba59877389e2c856234403ecbd953f9.png" />
+							<img width="400px" height="400px" src="images\chapters\bsplines\ceaef2fbee05a58aa11835925403b4cd.png" />
 							<label></label>
 						</fallback-image>
 						<!-- knot sliders go here -->
@@ -5698,7 +5697,7 @@ for(let L = 1; L &lt;= order; L++) {
 					<graphics-element title="An open, uniform B-Spline" width="400" height="400" src="./chapters/bsplines/uniform.js" data-open="true">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="400px" height="400px" src="images\chapters\bsplines\9c4bbb753918e3cb8cbc5a770a2af9ee.png" />
+							<img width="400px" height="400px" src="images\chapters\bsplines\0215dc106e4ad51afe043c0176a595f6.png" />
 							<label></label>
 						</fallback-image>
 						<!-- knot sliders go here -->
@@ -5721,7 +5720,7 @@ for(let L = 1; L &lt;= order; L++) {
 					<graphics-element title="A (closed) rational, uniform B-Spline" width="400" height="400" src="./chapters/bsplines/rational-uniform.js">
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="400px" height="400px" src="images\chapters\bsplines\e50d628696245ef68b691e28b2162d56.png" />
+							<img width="400px" height="400px" src="images\chapters\bsplines\0d9c2186423466a32bb8fbd187409f82.png" />
 							<label></label>
 						</fallback-image>
 						<!-- knot sliders go here -->