offsetting

docs/chapters/graduatedoffset/offsetting.js

@@ -0,0 +1,63 @@
+let curve;
+
+setup() {
+  const type  = this.parameters.type ?? `quadratic`;
+  if (type === `quadratic`) {
+    curve = Bezier.defaultQuadratic(this);
+  } else {
+    curve = Bezier.defaultCubic(this);
+  }
+  setMovable(curve.points);
+  setSlider(`.slide-control`, `distance`, 20);
+}
+
+draw() {
+  clear();
+  noFill();
+  curve.drawSkeleton();
+  curve.drawCurve(`lightblue`);
+  this.outline(curve, this.distance).forEach(c => this.drawCurve(c));
+  curve.drawPoints();
+};
+
+drawCurve(c) {
+  setStroke( randomColor() );
+  start()
+  c.getLUT(16).forEach(p => vertex(p.x, p.y));
+  end();
+}
+
+outline(curve, d) {
+  const reduced = curve.reduce(),
+        fcurves = [];
+
+  let bcurves = [],
+      alen = 0,
+      tlen = curve.length();
+
+  // form curve oulines
+  reduced.forEach(segment => {
+    let slen = segment.length();
+    fcurves.push(segment.scale(this.linearDistanceFunction(d, tlen, alen, slen)));
+    bcurves.push(segment.scale(this.linearDistanceFunction(-d, tlen, alen, slen)));
+    alen += slen;
+  });
+
+  // reverse the "return" outline
+  bcurves = bcurves
+    .map(s => {
+      s.points = s.points.reverse();
+      return s;
+    })
+    .reverse();
+
+  return [...fcurves, ...bcurves];
+}
+
+linearDistanceFunction(d, tlen, alen, slen)  {
+  return v => {
+    const f1 = alen / tlen,
+          f2 = (alen + slen) / tlen;
+    return map(v, 0, 1, f1 * d, f2 * d);
+  };
+}