regenerated all images

docs/chapters/pointvectors/pointvectors.js

@@ -0,0 +1,89 @@
+let curve;
+
+setup() {
+    const type = this.type = this.parameters.type ?? `quadratic`;
+    if (type === `quadratic`) {
+        curve = Bezier.defaultQuadratic(this);
+    } else {
+        curve = Bezier.defaultCubic(this);
+        curve.points[0].x = 30;
+        curve.points[0].y = 230;
+        curve.points[1].x = 75;
+        curve.points[1].y = 50;
+    }
+    setMovable(curve.points);
+}
+
+draw() {
+    clear();
+    curve.drawSkeleton();
+
+    const pts = curve.points;
+    const f = 15;
+
+    for(let i=0; i<=10; i++) {
+        let t = i/10.0;
+        let p = curve.get(t);
+        let d = this.type === `quadratic` ? this.getQuadraticDerivative(t, pts) : this.getCubicDerivative(t, pts);
+
+        let m = sqrt(d.x*d.x + d.y*d.y);
+        d = { x: d.x/m, y: d.y/m };
+        let n = this.getNormal(t, d);
+
+        setStroke(`blue`);
+        line(p.x, p.y, p.x + d.x*f, p.y + d.y*f);
+
+        setStroke(`red`);
+        line(p.x, p.y, p.x + n.x*f, p.y + n.y*f);
+
+        setStroke(`black`);
+        circle(p.x, p.y, 3);
+    }
+
+    curve.drawPoints();
+}
+
+getQuadraticDerivative(t, points) {
+    let mt = (1 - t), d = [
+        {
+            x: 2 * (points[1].x - points[0].x),
+            y: 2 * (points[1].y - points[0].y)
+        },
+        {
+            x: 2 * (points[2].x - points[1].x),
+            y: 2 * (points[2].y - points[1].y)
+        }
+    ];
+
+    return {
+        x: mt * d[0].x + t * d[1].x,
+        y: mt * d[0].y + t * d[1].y
+    };
+}
+
+getCubicDerivative(t, points) {
+    let mt = (1 - t), a = mt*mt, b = mt*t, c = t*t, d = [
+        {
+            x: 3 * (points[1].x - points[0].x),
+            y: 3 * (points[1].y - points[0].y)
+        },
+        {
+            x: 3 * (points[2].x - points[1].x),
+            y: 3 * (points[2].y - points[1].y)
+        },
+        {
+            x: 3 * (points[3].x - points[2].x),
+            y: 3 * (points[3].y - points[2].y)
+        }
+    ];
+
+    return {
+        x: a * d[0].x + b * d[1].x + c * d[2].x,
+        y: a * d[0].y + b * d[1].y + c * d[2].y
+    };
+}
+
+getNormal(t, d) {
+    const q = sqrt(d.x * d.x + d.y * d.y);
+    return { x: -d.y / q, y: d.x / q };
+}