diff --git a/docs/chapters/molding/decasteljau.js b/docs/chapters/molding/decasteljau.js
deleted file mode 100644
index 632c5b5c..00000000
--- a/docs/chapters/molding/decasteljau.js
+++ /dev/null
@@ -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);
- });
-}
diff --git a/docs/chapters/molding/molding.js b/docs/chapters/molding/molding.js
index 461796b3..50e5012e 100644
--- a/docs/chapters/molding/molding.js
+++ b/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 = {
diff --git a/docs/images/chapters/molding/834af194de17a5eb2c1920773ab904e3.png b/docs/images/chapters/molding/1039d0bb0e49cfb472c2fa37f9010190.png
similarity index 100%
rename from docs/images/chapters/molding/834af194de17a5eb2c1920773ab904e3.png
rename to docs/images/chapters/molding/1039d0bb0e49cfb472c2fa37f9010190.png
diff --git a/docs/images/chapters/molding/aefb177e5532a9f995b9d88e85582c68.png b/docs/images/chapters/molding/2bd215d1db191b52a89a94727b6aa5ce.png
similarity index 100%
rename from docs/images/chapters/molding/aefb177e5532a9f995b9d88e85582c68.png
rename to docs/images/chapters/molding/2bd215d1db191b52a89a94727b6aa5ce.png
diff --git a/docs/images/chapters/molding/cdf7515d133cbf41ffbaea8c488e0924.png b/docs/images/chapters/molding/a54f990aa49fb9ea8200b59259f955f3.png
similarity index 100%
rename from docs/images/chapters/molding/cdf7515d133cbf41ffbaea8c488e0924.png
rename to docs/images/chapters/molding/a54f990aa49fb9ea8200b59259f955f3.png
diff --git a/docs/index.html b/docs/index.html
index 9ecc224e..f6c6dbb9 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -31,7 +31,7 @@
-
+
@@ -5023,7 +5023,7 @@ for (coordinate, index) in LUT:
>
Scripts are disabled. Showing fallback image.
-
+
@@ -5041,7 +5041,7 @@ for (coordinate, index) in LUT:
Scripts are disabled. Showing fallback image.
-
+
@@ -5064,7 +5064,7 @@ for (coordinate, index) in LUT:
>
Scripts are disabled. Showing fallback image.
-
+
diff --git a/docs/ja-JP/index.html b/docs/ja-JP/index.html
index 766323a6..503a2ed7 100644
--- a/docs/ja-JP/index.html
+++ b/docs/ja-JP/index.html
@@ -33,7 +33,7 @@
-
+
@@ -4860,7 +4860,7 @@ for (coordinate, index) in LUT:
>
Scripts are disabled. Showing fallback image.
-
+
@@ -4878,7 +4878,7 @@ for (coordinate, index) in LUT:
Scripts are disabled. Showing fallback image.
-
+
@@ -4901,7 +4901,7 @@ for (coordinate, index) in LUT:
>
Scripts are disabled. Showing fallback image.
-
+
diff --git a/docs/news/2020-09-18.html b/docs/news/2020-09-18.html
index 671092a3..85e534b4 100644
--- a/docs/news/2020-09-18.html
+++ b/docs/news/2020-09-18.html
@@ -27,7 +27,7 @@
-
+
diff --git a/docs/news/index.html b/docs/news/index.html
index 42c968ea..03779ea0 100644
--- a/docs/news/index.html
+++ b/docs/news/index.html
@@ -26,7 +26,7 @@
-
+
diff --git a/docs/news/rss.xml b/docs/news/rss.xml
index fdd9baaf..aca722e1 100644
--- a/docs/news/rss.xml
+++ b/docs/news/rss.xml
@@ -6,7 +6,7 @@
News updates for the primer on Bézier Curves by Pomaxen-GB
- Sat Sep 26 2020 09:36:40 +00:00
+ Sat Sep 26 2020 11:25:04 +00:00https://pomax.github.io/bezierinfo/images/og-image.pngA Primer on Bézier Curves
diff --git a/docs/zh-CN/index.html b/docs/zh-CN/index.html
index 69116701..5d2b9af6 100644
--- a/docs/zh-CN/index.html
+++ b/docs/zh-CN/index.html
@@ -33,7 +33,7 @@
-
+
@@ -4834,7 +4834,7 @@ for (coordinate, index) in LUT:
>
Scripts are disabled. Showing fallback image.
-
+
@@ -4852,7 +4852,7 @@ for (coordinate, index) in LUT:
Scripts are disabled. Showing fallback image.
-
+
@@ -4875,7 +4875,7 @@ for (coordinate, index) in LUT:
>
Scripts are disabled. Showing fallback image.
-
+
+ 
+ 
+ 