image regeneration + circles

docs/chapters/circles/arc-approximation.js

@@ -0,0 +1,57 @@
+let curve, w, h, pad = 55, r;
+
+setup() {
+    w = this.width;
+    h = this.height;
+    r = w/2 - pad;
+    curve = new Bezier(this,
+      { x: w - pad, y: h/2},
+      { x: w - pad, y: h/2},
+      { x: w - pad, y: h/2}
+    );
+    setSlider(`.slide-control`, `angle`, -PI/4, v => this.updateCurve(v));
+}
+
+draw() {
+  clear();
+  setColor(`lightgrey`);
+  line(0, h/2, w, h/2);
+  line(w/2, 0, w/2, h);
+
+  noFill();
+  setStroke(`red`);
+  circle(w/2, h/2, r);
+
+  noStroke();
+  setFill(`rgba(100,255,100,0.4)`);
+  let a = this.angle;
+  arc(w/2, h/2, r, a < 0 ? a : 0, a < 0 ? 0 : a, w/2, h/2);
+
+  curve.drawSkeleton();
+  curve.drawCurve();
+
+  setColor(`black`);
+  curve.points.forEach(p => {
+    circle(p.x, p.y, 2);
+    text(`(${p.x|0},${p.y|0})`, p.x+5, p.y);
+  });
+}
+
+updateCurve(a) {
+  let angle = -a;
+  let b = ( cos(angle) - 1 ) / sin(angle);
+
+  // new control point
+  curve.points[1] = {
+    x: w/2 + r * ( cos(angle) - b * sin(angle) ),
+    y: w/2 + r * ( sin(angle) + b * cos(angle) )
+  };
+
+  // new endpoint
+  curve.points[2] = {
+    x: w/2 + r * cos(angle),
+    y: w/2 + r * sin(angle)
+  };
+
+  return angle;
+}