full circle chapters rewrite

docs/chapters/circles_cubic/arc-basics.js

@@ -0,0 +1,119 @@
+let curve, w, h, pad = 75, r;
+
+setup() {
+    w = this.width;
+    h = this.height;
+    r = w - 2 * pad;
+    curve = new Bezier(this,
+//      { x: r, y: h/2},
+      { x: r, y: h/2},
+      { x: r, y: h/2},
+      { x: r, y: h/2}
+    );
+    setSlider(`.slide-control`, `angle`, 1.57, v => this.updateCurve2(v));
+}
+
+draw() {
+  clear();
+
+  translate(1.5 * pad,pad);
+  setColor(`grey`);
+  line(0,-h,0,h);
+  line(-w,0,w,0);
+  curve.drawSkeleton(`grey`);
+  let p = curve.drawStruts(0.5, `grey`, false);
+  curve.drawCurve(`black`);
+  // this.drawCubicInformation(p);
+  this.drawQuadraticInformation(p);
+}
+
+drawQuadraticInformation(p) {
+  noFill();
+  setStroke(`black`)
+  let a = this.angle;
+  let ar = 20
+  arc(0,0,ar,0,a);
+  setStroke(`grey`);
+  let br = 4 * ar;
+  arc(0,0,br,0,a/2);
+  line(0,0, p[2].x, p[2].y);
+  line(0,0, p[1].x, p[1].y);
+
+  setFill(`black`);
+  setTextStroke(`white`, 3);
+  text(`P1`, p[0]);
+  text(`P2`, p[1]);
+  text(`P3`, p[2]);
+  text(`B`, p[5]);
+
+  text(`θ`, 1.2 * ar * cos(a / 3), 1.2 * ar * sin(a / 3));
+  text(`θ/2`, 1.2 * br * cos(a / 4), 1.2 * br * sin(a / 4));
+}
+
+
+drawCubicInformation(p) {
+  noFill();
+  setStroke(`black`)
+  let a = this.angle;
+  let ar = 20
+  arc(0,0,ar,0,a);
+  setStroke(`grey`);
+  let br = 4 * ar;
+  arc(0,0,br,0,a/2);
+  line(0,0, p[3].x, p[3].y);
+  line(0,0, p[9].x, p[9].y);
+
+  setFill(`black`);
+  setTextStroke(`white`, 3);
+  text(`P1`, p[0]);
+  text(`P2`, p[1]);
+  text(`P3`, p[2]);
+  text(`P4`, p[3]);
+  text(`A`, p[5]);
+  text(`B`, p[9]);
+  text(`e1`, p[7]);
+  text(`e2`, p[8]);
+
+  text(`θ`, 1.2 * ar * cos(a / 3), 1.2 * ar * sin(a / 3));
+  text(`θ/2`, 1.2 * br * cos(a / 4), 1.2 * br * sin(a / 4));
+}
+
+updateCurve3(a) {
+  this.angle = a;
+  let p = curve.points;
+  let d = r * 4/3 * tan(a/4);
+
+  // start point
+  p[0].x = r;
+  p[0].y = 0;
+
+  // end point
+  p[3].x = r * cos(a);
+  p[3].y = r * sin(a);
+
+  // first control point
+  p[1].x = r;
+  p[1].y = d;
+
+  // second control point
+  p[2].x = p[3].x + d * sin(a);
+  p[2].y = p[3].y - d * cos(a);
+}
+
+updateCurve2(a) {
+  this.angle = a;
+  let p = curve.points;
+  let d = r * tan(a/2);
+
+  // start point
+  p[0].x = r;
+  p[0].y = 0;
+
+  // control point
+  p[1].x = r;
+  p[1].y = d;
+
+  // end point
+  p[2].x = r * cos(a);
+  p[2].y = r * sin(a);
+}