full regeneration

docs/chapters/pointvectors3d/frenet.js

@@ -4,6 +4,7 @@ import { project, projectXY, projectXZ, projectYZ } from "./projection.js";
 let d, cube;
 
 setup() {
+  // step 1: let's define a cube to show our curve "in"
   d = this.width/2 + 25;
   cube = [
     {x:0, y:0, z:0},
@@ -15,16 +16,25 @@ setup() {
     {x:d, y:d, z:d},
     {x:0, y:d, z:d}
   ].map(p => project(p));
+
+  // step 2: let's also define our 3D curve
   const points = this.points = [
     {x:120, y:  0, z:  0},
     {x:120, y:220, z:  0},
     {x: 30, y:  0, z: 30},
     {x:  0, y:  0, z:200}
   ];
+
+  // step 3: to draw this curve to the screen, we need to project the
+  //         coordinates from 3D to 2D, for which we use what is called
+  //         a "cabinet projection".
   this.curve = new Bezier(this, points.map(p => project(p)));
+
+  // We also construct handy projections on just the X/Y, X/Z, and Y/Z planes.
   this.cxy = new Bezier(this, points.map(p => projectXY(p)));
   this.cxz = new Bezier(this, points.map(p => projectXZ(p)));
   this.cyz = new Bezier(this, points.map(p => projectYZ(p)));
+
   setSlider(`.slide-control`, `position`, 0);
 }
 
@@ -33,21 +43,32 @@ draw() {
   translate(this.width/2 - 60, this.height/2 + 75);
   const curve = this.curve;
 
+  // Draw all our planar curve projections first
   this.drawCurveProjections();
 
+  // And the "back" side of our cube
   this.drawCubeBack();
 
+  // Then, we draw the real curve
   curve.drawCurve(`grey`);
   setStroke(`grey`)
   line(curve.points[0].x, curve.points[0].y, curve.points[1].x, curve.points[1].y);
   line(curve.points[2].x, curve.points[2].y, curve.points[3].x, curve.points[3].y);
   curve.points.forEach(p => circle(p.x, p.y, 2));
 
+  // And the current point on that curve
   this.drawPoint(this.position);
 
+  // and then we can add the "front" of the cube.
   this.drawCubeFront();
 }
 
+drawCurveProjections() {
+  this.cxy.drawCurve(`#EEF`);
+  this.cxz.drawCurve(`#EEF`);
+  this.cyz.drawCurve(`#EEF`);
+}
+
 drawCubeBack() {
   const c = cube;
 
@@ -64,12 +85,6 @@ drawCubeBack() {
   line(c[0].x, c[0].y, c[4].x, c[4].y);
 }
 
-drawCurveProjections() {
-  this.cxy.drawCurve(`#EEF`);
-  this.cxz.drawCurve(`#EEF`);
-  this.cyz.drawCurve(`#EEF`);
-}
-
 drawPoint(t) {
   const {o, r, n, dt} = this.getFrenetVectors(t, this.points);
 
@@ -78,8 +93,13 @@ drawPoint(t) {
   const p = project(o);
   circle(p.x, p.y, 3);
 
+  // Draw our axis of rotation,
   this.drawVector(p, vec.normalize(r),  40, `blue`, `r`);
+
+  // our normal,
   this.drawVector(p, vec.normalize(n),  40, `red`, `n`);
+
+  // and our derivative.
   this.drawVector(p, vec.normalize(dt), 40, `green`, `t′`);
 
   setFill(`black`)
@@ -88,8 +108,6 @@ drawPoint(t) {
 
 drawCubeFront() {
   const c = cube;
-
-  // rest of the cube
   setStroke("lightgrey");
   line(c[1].x, c[1].y, c[2].x, c[2].y);
   line(c[2].x, c[2].y, c[3].x, c[3].y);
@@ -103,13 +121,20 @@ drawCubeFront() {
 }
 
 getFrenetVectors(t, originalPoints) {
+  // The frenet vectors are based on the (unprojected) curve,
+  // and its derivative curve.
   const curve = new Bezier(this, originalPoints);
   const d1curve = new Bezier(this, curve.dpoints[0]);
+  const o = curve.get(t);
   const dt = d1curve.get(t);
   const ddt = d1curve.derivative(t);
-  const o = curve.get(t);
-  const b = vec.plus(dt, ddt);
-  const r = vec.cross(b, dt);
+  // project the derivative into the future
+  const f = vec.plus(dt, ddt);
+  // and then find the axis of rotation wrt the plane
+  // spanned by the currented and projected derivative
+  const r = vec.cross(f, dt);
+  // after which the normal is found by rotating the
+  // tangent in that plane.
   const n = vec.normalize(vec.cross(r, dt));
   return { o, dt, r, n };
 }