wrapping up molding

docs/chapters/molding/decasteljau.js

@@ -1,34 +0,0 @@
-let curve;
-
-setup() {
-    curve = Bezier.defaultCubic(this);
-    setMovable(curve.points);
-    setSlider(`.slide-control`, `position`, 0.5);
-}
-
-draw() {
-    clear();
-    const blue = `lightblue`;
-    const t = this.position;
-    const {A,B,C,S,E} = curve.getABC(t);
-    const struts = curve.drawStruts(t, blue, false);
-    curve.drawSkeleton(blue);
-    curve.drawCurve(`black`);
-    setStroke(blue);
-    line(S.x, S.y, E.x, E.y);
-    line(A.x, A.y, C.x, C.y);
-    curve.drawPoints();
-
-    [A,B,C].forEach(p => circle(p.x, p.y, 3));
-    setFill(`black`);
-    text(`A`, A.x+10, A.y);
-    text(`B`, B.x+10, B.y);
-    text(`C`, C.x+10, C.y);
-    setStroke(`purple`);
-
-    const lbl = [`v1`, `v2`, `e1`, `e2`];
-    [struts[4], struts[6], struts[7], struts[8]].forEach((p,i) => {
-        circle(p.x, p.y, 2);
-        text(lbl[i], p.x+10, p.y);
-    });
-}

docs/chapters/molding/molding.js

@@ -14,6 +14,7 @@ setup() {
 draw() {
     clear();
 
+    // First and foremost, the curve itself
     curve.drawSkeleton();
     curve.drawCurve();
     curve.drawPoints();
@@ -21,6 +22,7 @@ draw() {
 
     nextPanel();
 
+    // then the "as you're moving a point" curve:
     curve.drawSkeleton(`lightblue`);
     curve.drawCurve(`lightblue`);
     curve.points.forEach(p => circle(p.x, p.y, 2));
@@ -28,6 +30,7 @@ draw() {
 
     nextPanel();
 
+    // And finally, only the result
     this.drawResult();
 }
 
@@ -57,6 +60,10 @@ drawMark() {
 }
 
 drawQuadraticMark() {
+    // This is the function that composes a new quadratic curve
+    // based on the established start and end points, as well as
+    // the information it knows about point B that you started
+    // when when you clicked/tapped the graphic.
     let {B, t} = this.mark;
     setFill(`black`);
     text(`t: ${t.toFixed(5)}`, this.panelWidth/2, 15, CENTER);
@@ -72,7 +79,6 @@ drawQuadraticMark() {
         text(lbl[i], p.x + 10, p.y);
     });
 
-
     if (this.currentPoint) {
         let {A,B,C,S,E} = curve.getABC(t, this.position);
         setColor(`purple`);
@@ -88,6 +94,10 @@ drawQuadraticMark() {
 }
 
 drawCubicMark() {
+    // This is the function that composes a new cubic curve based
+    // on the established start and end points, as well as the
+    // information it knows about point B that you started when
+    // when you clicked/tapped the graphic.
     const S = curve.points[0],
           E = curve.points[curve.order],
           {B, t, e1, e2} = this.mark,
@@ -98,9 +108,16 @@ drawCubicMark() {
           ne1 = { x: nB.x + d1.x, y: nB.y + d1.y },
           ne2 = { x: nB.x + d2.x, y: nB.y + d2.y },
           {A, C} = curve.getABC(t, nB),
+          // The cubic case requires us to derive two control points,
+          // which we'll do in a separate function to keep the code
+          // at least somewhat manageable.
           {v1, v2, C1, C2} = this.deriveControlPoints(S, A, E, ne1, ne2, t);
 
     if (this.parameters.interpolated) {
+        // For the last example, we need to show what the "ideal" curve
+        // looks like, in addition to the one we actually get when we
+        // rely on the B we picked with the `t` value and e1/e2 points
+        // that point B had...
         const ideal = this.getIdealisedCurve(S, nB, E);
         this.ideal = new Bezier(this, [ideal.S, ideal.C1, ideal.C2, ideal.E]);
     }
@@ -140,7 +157,9 @@ drawCubicMark() {
 }
 
 deriveControlPoints(S, A, E, e1, e2, t) {
-    // And then use those to derive the correct v1/v2/C1/C2 coordinates
+    // Deriving the control points is effectively "doing what
+    // we talk about in the section", in code:
+
     const v1 = {
         x: A.x - (A.x - e1.x)/(1-t),
         y: A.y - (A.y - e1.y)/(1-t)
@@ -163,6 +182,10 @@ deriveControlPoints(S, A, E, e1, e2, t) {
 }
 
 getIdealisedCurve(p1, p2, p3) {
+    // This "reruns" the curve composition, but with a `t` value
+    // that is unrelated to the actual point B we picked, instead
+    // using whatever the appropriate `t` value would be if we were
+    // trying to fit a circular arc, as per earlier in the section.
     const c = utils.getccenter(p1, p2, p3),
           d1 = dist(p1.x, p1.y, p2.x, p2.y),
           d2 = dist(p3.x, p3.y, p2.x, p2.y),
@@ -195,11 +218,13 @@ drawResult() {
     last.points.forEach(p => circle(p.x, p.y, 2));
 
     if (this.mark) {
+        // Did you click/touch somewhere on the curve?
         let t = this.mark.t;
         let B = last.get(t);
         circle(B.x, B.y, 3);
 
         if (this.ideal) {
+            // Do we want to show the "interpolated" composition?
             let d = dist(this.mark.B.x, this.mark.B.y, this.position.x, this.position.y);
             let t = min(this.falloff, d) / this.falloff;
             this.ideal.drawCurve(`lightblue`);
@@ -219,10 +244,12 @@ drawResult() {
 
 onMouseDown() {
     if (this.currentPoint !== this.position) {
+        // "moving one of the curve's construction points"
         this.mark = false;
         this.position.projection = false;
     }
     else if (this.position.projection) {
+        // "moving an on-curve point"
         let t = this.position.projection.t;
         if (this.type === `quadratic`) {
             this.mark = {

docs/index.html

@@ -31,7 +31,7 @@
 		<meta property="og:locale" content="en-GB" />
 		<meta property="og:type" content="article" />
 		<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
-		<meta property="og:updated_time" content="2020-09-26T16:36:40+00:00" />
+		<meta property="og:updated_time" content="2020-09-26T18:25:04+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" />
@@ -5023,7 +5023,7 @@ for (coordinate, index) in LUT:
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="825px" height="275px" src="./images/chapters/molding/aefb177e5532a9f995b9d88e85582c68.png" loading="lazy" />
+							<img width="825px" height="275px" src="./images/chapters/molding/2bd215d1db191b52a89a94727b6aa5ce.png" loading="lazy" />
 							<label></label> </fallback-image
 					></graphics-element>
 					<p>
@@ -5041,7 +5041,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/834af194de17a5eb2c1920773ab904e3.png" loading="lazy" />
+							<img width="825px" height="275px" src="./images/chapters/molding/a54f990aa49fb9ea8200b59259f955f3.png" loading="lazy" />
 							<label></label> </fallback-image
 					></graphics-element>
 					<p>
@@ -5064,7 +5064,7 @@ for (coordinate, index) in LUT:
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="825px" height="275px" src="./images/chapters/molding/cdf7515d133cbf41ffbaea8c488e0924.png" loading="lazy" />
+							<img width="825px" height="275px" src="./images/chapters/molding/1039d0bb0e49cfb472c2fa37f9010190.png" loading="lazy" />
 							<label></label>
 						</fallback-image>
 						<input type="range" min="10" max="200" step="1" value="100" class="slide-control" />

docs/ja-JP/index.html

@@ -33,7 +33,7 @@
 		<meta property="og:locale" content="ja-JP" />
 		<meta property="og:type" content="article" />
 		<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
-		<meta property="og:updated_time" content="2020-09-26T16:36:40+00:00" />
+		<meta property="og:updated_time" content="2020-09-26T18:25:04+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" />
@@ -4860,7 +4860,7 @@ for (coordinate, index) in LUT:
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="825px" height="275px" src="./images/chapters/molding/aefb177e5532a9f995b9d88e85582c68.png" loading="lazy" />
+							<img width="825px" height="275px" src="./images/chapters/molding/2bd215d1db191b52a89a94727b6aa5ce.png" loading="lazy" />
 							<label></label> </fallback-image
 					></graphics-element>
 					<p>
@@ -4878,7 +4878,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/834af194de17a5eb2c1920773ab904e3.png" loading="lazy" />
+							<img width="825px" height="275px" src="./images/chapters/molding/a54f990aa49fb9ea8200b59259f955f3.png" loading="lazy" />
 							<label></label> </fallback-image
 					></graphics-element>
 					<p>
@@ -4901,7 +4901,7 @@ for (coordinate, index) in LUT:
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="825px" height="275px" src="./images/chapters/molding/cdf7515d133cbf41ffbaea8c488e0924.png" loading="lazy" />
+							<img width="825px" height="275px" src="./images/chapters/molding/1039d0bb0e49cfb472c2fa37f9010190.png" loading="lazy" />
 							<label></label>
 						</fallback-image>
 						<input type="range" min="10" max="200" step="1" value="100" class="slide-control" />

docs/news/2020-09-18.html

@@ -27,7 +27,7 @@
 		<meta property="og:locale" content="en-GB" />
 		<meta property="og:type" content="article" />
 		<meta property="og:published_time" content="Thu Sep 17 2020 17:00:00 +00:00" />
-		<meta property="og:updated_time" content="Sat Sep 26 2020 09:36:40 +00:00" />
+		<meta property="og:updated_time" content="Sat Sep 26 2020 11:25:04 +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" />

docs/news/index.html

@@ -26,7 +26,7 @@
 		<meta property="og:description" content="" />
 		<meta property="og:locale" content="en-GB" />
 		<meta property="og:type" content="article" />
-		<meta property="og:published_time" content="Sat Sep 26 2020 09:36:40 GMT-0700 (Pacific Daylight Time)" />
+		<meta property="og:published_time" content="Sat Sep 26 2020 11:25:04 GMT-0700 (Pacific Daylight Time)" />
 		<meta property="og:updated_time" content="" />
 		<meta property="og:author" content="Mike 'Pomax' Kamermans" />
 		<meta property="og:section" content="Bézier Curves" />

docs/news/rss.xml

@@ -6,7 +6,7 @@
   <atom:link href="https://pomax.github.io/bezierinfo" rel="self"></atom:link>
   <description>News updates for the <a href="https://pomax.github.io/bezierinfo">primer on Bézier Curves</a> by Pomax</description>
   <language>en-GB</language>
-  <lastBuildDate>Sat Sep 26 2020 09:36:40 +00:00</lastBuildDate>
+  <lastBuildDate>Sat Sep 26 2020 11:25:04 +00:00</lastBuildDate>
   <image>
     <url>https://pomax.github.io/bezierinfo/images/og-image.png</url>
     <title>A Primer on Bézier Curves</title>

docs/zh-CN/index.html

@@ -33,7 +33,7 @@
 		<meta property="og:locale" content="zh-CN" />
 		<meta property="og:type" content="article" />
 		<meta property="og:published_time" content="2013-06-13T12:00:00+00:00" />
-		<meta property="og:updated_time" content="2020-09-26T16:36:40+00:00" />
+		<meta property="og:updated_time" content="2020-09-26T18:25:04+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" />
@@ -4834,7 +4834,7 @@ for (coordinate, index) in LUT:
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="825px" height="275px" src="./images/chapters/molding/aefb177e5532a9f995b9d88e85582c68.png" loading="lazy" />
+							<img width="825px" height="275px" src="./images/chapters/molding/2bd215d1db191b52a89a94727b6aa5ce.png" loading="lazy" />
 							<label></label> </fallback-image
 					></graphics-element>
 					<p>
@@ -4852,7 +4852,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/834af194de17a5eb2c1920773ab904e3.png" loading="lazy" />
+							<img width="825px" height="275px" src="./images/chapters/molding/a54f990aa49fb9ea8200b59259f955f3.png" loading="lazy" />
 							<label></label> </fallback-image
 					></graphics-element>
 					<p>
@@ -4875,7 +4875,7 @@ for (coordinate, index) in LUT:
 					>
 						<fallback-image>
 							<span class="view-source">Scripts are disabled. Showing fallback image.</span>
-							<img width="825px" height="275px" src="./images/chapters/molding/cdf7515d133cbf41ffbaea8c488e0924.png" loading="lazy" />
+							<img width="825px" height="275px" src="./images/chapters/molding/1039d0bb0e49cfb472c2fa37f9010190.png" loading="lazy" />
 							<label></label>
 						</fallback-image>
 						<input type="range" min="10" max="200" step="1" value="100" class="slide-control" />