code comments

Pomax · Sep 20, 2020 · 792bd0d · 792bd0d
1 parent 0a30327
commit 792bd0d
Show file tree

Hide file tree

Showing 27 changed files with 97 additions and 61 deletions.
diff --git a/chapters/curveintersection/curve-curve.js b/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,18 +73,20 @@ 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 ]); }
         if (s1.right.overlaps(s2.right)) { this.pairs.push([ s1.right, s2.right ]); }
     });
   }
 
+  // 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/chapters/intersections/curve-line.js b/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/chapters/intersections/line-line.js b/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,13 +18,17 @@ 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,
     p3.x, p3.y,
     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/chapters/offsetting/offsetting.js b/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/chapters/polybezier/poly.js b/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/chapters/tracing/distance-function.js b/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/chapters/tracing/tracing.js b/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/...tion/e1f4f4dba7a338d342559bcfb0ea8e02.png → ...tion/b155682162a5b6da6d40c7b531164a7e.png b/...tion/e1f4f4dba7a338d342559bcfb0ea8e02.png → ...tion/b155682162a5b6da6d40c7b531164a7e.png
diff --git a/...ions/4a762fb56468c342c72756a76d134f05.png → ...ions/7196d3dec75d53f5df9d9c832ac3c493.png b/...ions/4a762fb56468c342c72756a76d134f05.png → ...ions/7196d3dec75d53f5df9d9c832ac3c493.png
diff --git a/...ions/7003a384ec371217af2b225ae65872e7.png → ...ions/9b70fb7b03f082882515e55c0a1eacff.png b/...ions/7003a384ec371217af2b225ae65872e7.png → ...ions/9b70fb7b03f082882515e55c0a1eacff.png
diff --git a/...ions/cab1799841eedd1dcd1cd81b6045f40f.png → ...ions/b3f61036d8dc9888a6a64a1171583dd1.png b/...ions/cab1799841eedd1dcd1cd81b6045f40f.png → ...ions/b3f61036d8dc9888a6a64a1171583dd1.png
diff --git a/...ting/768094c3c47d3888cf81e7a1d20d2eab.png → ...ting/03b8e0849e7c8ba64d8c076f47fe2ec7.png b/...ting/768094c3c47d3888cf81e7a1d20d2eab.png → ...ting/03b8e0849e7c8ba64d8c076f47fe2ec7.png
diff --git a/...ting/1ad78f9f9d001278c491b0f2be5cc8ea.png → ...ting/4c4738b6bf9f83eded12d680a29e337b.png b/...ting/1ad78f9f9d001278c491b0f2be5cc8ea.png → ...ting/4c4738b6bf9f83eded12d680a29e337b.png
diff --git a/...zier/adc3b55c9956849ec86ecffcd8864d8a.png → ...zier/1b94c6ada011bd8e50330e31a851a62e.png b/...zier/adc3b55c9956849ec86ecffcd8864d8a.png → ...zier/1b94c6ada011bd8e50330e31a851a62e.png
diff --git a/...zier/044f65dd588b0210499add16ea50a23d.png → ...zier/41522a397171423e8a465dc8c74f6e87.png b/...zier/044f65dd588b0210499add16ea50a23d.png → ...zier/41522a397171423e8a465dc8c74f6e87.png
diff --git a/...zier/b7dfe772ac90d762f48772b691a9070f.png → ...zier/6fb33629373d7a731b6ac3f5365cb9f0.png b/...zier/b7dfe772ac90d762f48772b691a9070f.png → ...zier/6fb33629373d7a731b6ac3f5365cb9f0.png
diff --git a/...zier/17a6ffbfffaa9046ad165ca880d9030d.png → ...zier/777f3814965c39ec3cdbb13eab0c4eeb.png b/...zier/17a6ffbfffaa9046ad165ca880d9030d.png → ...zier/777f3814965c39ec3cdbb13eab0c4eeb.png
diff --git a/...zier/a1a3aabd22c0221beb38403a4532ea86.png → ...zier/b3aebf7803f4430187c249a891095062.png b/...zier/a1a3aabd22c0221beb38403a4532ea86.png → ...zier/b3aebf7803f4430187c249a891095062.png
diff --git a/...zier/b492c486c25f17a95c690e235b8ad483.png → ...zier/db04f805f42bdc9a1b7ec4d6b401d853.png b/...zier/b492c486c25f17a95c690e235b8ad483.png → ...zier/db04f805f42bdc9a1b7ec4d6b401d853.png
diff --git a/...zier/b810f02639a79cf7f8ae416d7185614d.png → ...zier/f6c55cbc66333b6630939f67fc20e086.png b/...zier/b810f02639a79cf7f8ae416d7185614d.png → ...zier/f6c55cbc66333b6630939f67fc20e086.png
diff --git a/...zier/babb27083b805c7c77bb93cfecbefb2b.png → ...zier/fe41b628f46f7035d151a8210d30111f.png b/...zier/babb27083b805c7c77bb93cfecbefb2b.png → ...zier/fe41b628f46f7035d151a8210d30111f.png
diff --git a/...cing/09cfa54ec3709d54efdce78832e42367.png → ...cing/1cd7304fb8d044835bfbc305ca5e5d10.png b/...cing/09cfa54ec3709d54efdce78832e42367.png → ...cing/1cd7304fb8d044835bfbc305ca5e5d10.png
diff --git a/...cing/52f815cefe99dabc47ca83d0b97b61fc.png → ...cing/d6239520389637a3c42e76ee44d86c41.png b/...cing/52f815cefe99dabc47ca83d0b97b61fc.png → ...cing/d6239520389637a3c42e76ee44d86c41.png
diff --git a/index.html b/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 @@ <h1>
 					<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 @@ <h1>
 					<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 @@ <h3>Line-line intersections</h3>
 					<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 @@ <h3>What about curve-line intersections?</h3>
 						>
 							<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 @@ <h3>What about curve-line intersections?</h3>
 						>
 							<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 @@ <h1>
 					<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 @@ <h1>
 					>
 						<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 @@ <h1>
 					>
 						<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 @@ <h1>
 					>
 						<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 @@ <h1>
 					>
 						<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 @@ <h1>
 					>
 						<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 @@ <h1>
 					>
 						<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 @@ <h1>
 					>
 						<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 @@ <h1>
 					>
 						<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 @@ <h3>"What do you mean, you can't? Prove it."</h3>
 					>
 						<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 @@ <h3>"What do you mean, you can't? Prove it."</h3>
 					>
 						<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" />