diff --git a/docs/chapters/whatis/interpolation.js b/docs/chapters/whatis/interpolation.js
index ee41ce7b..22ae6715 100644
--- a/docs/chapters/whatis/interpolation.js
+++ b/docs/chapters/whatis/interpolation.js
@@ -1,103 +1,130 @@
let curve;
setup() {
- curve = Bezier.defaultQuadratic(this);
- setMovable(curve.points);
- setSlider(`.slide-control`, `step`, 25)
+ setPanelCount(3);
+ curve = Bezier.defaultQuadratic(this);
+ setMovable(curve.points);
+
+ // We're going to
+ setSlider(`.slide-control`, `step`, 25);
}
draw() {
- clear(`white`);
- this.drawBasics();
- this.drawPointCurve();
- this.drawInterpolations();
- this.drawCurveCoordinates();
+ clear();
+ this.drawBasics();
+ this.drawPointCurve();
+ this.drawInterpolations();
+ this.drawCurveCoordinates();
}
+/**
+ * Draw the basic curve lines (from start to control to end)
+ */
drawBasics() {
- setStroke(`black`);
- setFill(`black`);
- curve.drawSkeleton();
- text(`First linear interpolation, spaced ${this.step}% (${Math.floor(99/this.step)} steps)`, {x:5, y:15});
+ setStroke(`black`);
+ setFill(`black`);
+ curve.drawSkeleton();
+ text(`First linear interpolation, spaced ${this.step}% (${Math.floor(99/this.step)} steps)`, {x:5, y:15});
- translate(this.height, 0);
+ nextPanel();
- line(0, 0, 0, this.height);
+ line(0, 0, 0, this.height);
+ curve.drawSkeleton();
+ text(`Second interpolation, between each generated pair`, {x:5, y:15});
- curve.drawSkeleton();
- text(`Second interpolation, between each generated pair`, {x:5, y:15});
+ nextPanel();
- translate(this.height, 0);
-
- line(0, 0, 0, this.height);
-
- curve.drawSkeleton();
- text(`Curve points generated this way`, {x:5, y:15});
+ line(0, 0, 0, this.height);
+ curve.drawSkeleton();
+ text(`Curve points generated this way`, {x:5, y:15});
}
+/**
+ * To show how each interpolated point fits on the curve,
+ * we'll draw the curve not as a straight line, but as a
+ * series of points, instead:
+ */
drawPointCurve() {
- setStroke(`lightgrey`);
- for(let i=1, e=50, p; i<=e; i++) {
- p = curve.get(i/e);
- circle(p.x, p.y, 1);
- }
+ setStroke(`lightgrey`);
+ for(let i=1, e=50, p; i<=e; i++) {
+ p = curve.get(i/e);
+ circle(p.x, p.y, 1);
+ }
}
+/**
+ * Draw the iteration in two steps, at an interval determined
+ * by our "step" value.
+ */
drawInterpolations() {
- for(let i=this.step; i<100; i+=this.step) {
- resetTransform();
- this.setIterationColor(i);
- let [np2, np3] = this.drawFirstInterpolation(curve.points, i);
- let np4 = this.drawSecondInterpolation(np2, np3, i);
- this.drawOnCurve(np4, i);
- }
-}
-
-setIterationColor(i) {
- let c = `#${(2*i).toString(16)}00${(255 - 2*i).toString(16)}`;
- setFill(c);
- setStroke(`${c}55`);
-}
-
-drawFirstInterpolation(p, i) {
- p = p.map(v => new Vector(v));
-
- let np2 = p[1].subtract(p[1].subtract(p[0]).scale(1 - i/100));
- circle(np2.x, np2.y, 5);
- text(`${i}%`, np2.add({x:10,y:0}));
-
- let np3 = p[2].subtract(p[2].subtract(p[1]).scale(1 - i/100));
- circle(np3.x, np3.y, 5);
- text(`${i}%`, np3.add({x:-10,y:-15}));
-
- return [np2, np3];
-}
-
-drawSecondInterpolation(np2, np3, i) {
- translate(this.height, 0);
-
- line(np2.x, np2.y, np3.x, np3.y);
- circle(np2.x, np2.y, 5);
- circle(np3.x, np3.y, 5);
-
- let np4 = np3.subtract(np3.subtract(np2).scale(1 - i/100));
- circle(np4.x, np4.y, 2);
- text(`${i}%`, np4.add({x:10,y:10}));
-
- return np4;
-}
-
-drawOnCurve(np4, i) {
- translate(this.height, 0);
- circle(np4.x, np4.y, 2);
- text(`ratio = ${i/100}`, np4.add({x:10,y:15}));
-}
-
-drawCurveCoordinates() {
+ for(let i=this.step; i<100; i+=this.step) {
resetTransform();
- curve.drawPoints();
- translate(this.height, 0);
- curve.drawPoints();
- translate(this.height, 0);
- curve.drawPoints();
+ this.setIterationColor(i);
+ let [np2, np3] = this.drawFirstInterpolation(curve.points, i);
+ let np4 = this.drawSecondInterpolation(np2, np3, i);
+ this.drawOnCurve(np4, i);
+ }
+}
+
+// a little helper function to make iteration points use a colour gradient
+setIterationColor(i) {
+ let c = `#${(2*i).toString(16)}00${(255 - 2*i).toString(16)}`;
+ setFill(c);
+ setStroke(`${c}55`);
+}
+
+/**
+ * The first iteration interpolates between the curve's "outlines"
+ */
+drawFirstInterpolation(p, i) {
+ p = p.map(v => new Vector(v));
+
+ let np2 = p[1].subtract(p[1].subtract(p[0]).scale(1 - i/100));
+ circle(np2.x, np2.y, 5);
+ text(`${i}%`, np2.add({x:10,y:0}));
+
+ let np3 = p[2].subtract(p[2].subtract(p[1]).scale(1 - i/100));
+ circle(np3.x, np3.y, 5);
+ text(`${i}%`, np3.add({x:-10,y:-15}));
+
+ return [np2, np3];
+}
+
+/**
+ * The second iteration interpolates between the first interpolations
+ */
+drawSecondInterpolation(np2, np3, i) {
+ nextPanel();
+
+ line(np2.x, np2.y, np3.x, np3.y);
+ circle(np2.x, np2.y, 5);
+ circle(np3.x, np3.y, 5);
+
+ let np4 = np3.subtract(np3.subtract(np2).scale(1 - i/100));
+ circle(np4.x, np4.y, 2);
+ text(`${i}%`, np4.add({x:10,y:10}));
+
+ return np4;
+}
+
+/**
+ * Draw a point on the curve with its corresponding "ratio" value next to it.
+ */
+drawOnCurve(np4, i) {
+ nextPanel();
+ circle(np4.x, np4.y, 2);
+ text(`ratio = ${i/100}`, np4.add({x:10,y:15}));
+}
+
+/**
+ * As a last step, draw the curve's control points, so that it's more
+ * obvious where the curve starts and stops, and how the control points work.
+ */
+drawCurveCoordinates() {
+ resetTransform();
+ curve.drawPoints();
+ nextPanel();
+ curve.drawPoints();
+ nextPanel();
+ curve.drawPoints();
}
diff --git a/docs/images/chapters/whatis/524dd296e96c0fe2281fb95146f8ea65.png b/docs/images/chapters/whatis/524dd296e96c0fe2281fb95146f8ea65.png
new file mode 100644
index 00000000..e6108a1e
Binary files /dev/null and b/docs/images/chapters/whatis/524dd296e96c0fe2281fb95146f8ea65.png differ
diff --git a/docs/images/chapters/whatis/9b3633889c38325c24c19ce18ab94ad6.png b/docs/images/chapters/whatis/9b3633889c38325c24c19ce18ab94ad6.png
deleted file mode 100644
index 949ae1c6..00000000
Binary files a/docs/images/chapters/whatis/9b3633889c38325c24c19ce18ab94ad6.png and /dev/null differ
diff --git a/docs/images/chapters/whatis/cd46926a37f90ea474d53f07a63c9ee6.png b/docs/images/chapters/whatis/cd46926a37f90ea474d53f07a63c9ee6.png
new file mode 100644
index 00000000..e6108a1e
Binary files /dev/null and b/docs/images/chapters/whatis/cd46926a37f90ea474d53f07a63c9ee6.png differ
diff --git a/docs/index.html b/docs/index.html
index b9891306..38c2b181 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -14,6 +14,7 @@
+<<<<<<< HEAD
@@ -36,6 +37,30 @@
+=======
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+>>>>>>> 87e04adbf7994baeb068384f6760469ed5a5c22b
@@ -54,6 +79,7 @@
+<<<<<<< HEAD
DEV PREVIEW ONLY