Implements doodler 0.0.3a

math/path.ts

@@ -1,4 +1,4 @@
-import { Vector } from "./vector.ts";
+import { Vector } from "doodler";
 
 export class ComplexPath {
 
@@ -42,8 +42,11 @@ export class PathSegment {
   points: [Vector, Vector, Vector, Vector]
   ctx?: CanvasRenderingContext2D;
 
+  length: number;
+
   constructor(points: [Vector, Vector, Vector, Vector]) {
     this.points = points;
+    this.length = this.calculateApproxLength(100);
   }
 
   setContext(ctx: CanvasRenderingContext2D) {
@@ -51,26 +54,30 @@ export class PathSegment {
   }
 
   draw() {
-    if (!this.ctx) return;
-    const ctx = this.ctx;
+    const [a,b,c,d] = this.points;
+    doodler.drawBezier(a,b,c,d, {
+      strokeColor: '#ffffff50'
+    })
+    // if (!this.ctx) return;
+    // const ctx = this.ctx;
 
-    ctx.save();
-    ctx.beginPath();
-    ctx.moveTo(this.points[0].x, this.points[0].y);
+    // ctx.save();
+    // ctx.beginPath();
+    // ctx.moveTo(this.points[0].x, this.points[0].y);
 
-    ctx.bezierCurveTo(
-      this.points[1].x,
-      this.points[1].y,
-      this.points[2].x,
-      this.points[2].y,
-      this.points[3].x,
-      this.points[3].y,
-    );
+    // ctx.bezierCurveTo(
+    //   this.points[1].x,
+    //   this.points[1].y,
+    //   this.points[2].x,
+    //   this.points[2].y,
+    //   this.points[3].x,
+    //   this.points[3].y,
+    // );
 
-    ctx.strokeStyle = '#ffffff50';
-    ctx.lineWidth = 2;
-    ctx.stroke();
-    ctx.restore();
+    // ctx.strokeStyle = '#ffffff50';
+    // ctx.lineWidth = 2;
+    // ctx.stroke();
+    // ctx.restore();
   }
 
   getPointAtT(t: number) {
@@ -169,4 +176,20 @@ export class PathSegment {
 
     return false;
   }
+
+  calculateApproxLength(resolution = 25) {
+    const stepSize = 1/resolution;
+    const points: Vector[] = []
+    for (let i = 0; i <= resolution; i++) {
+      const current = stepSize*i;
+      points.push(this.getPointAtT(current))
+    }
+    return points.reduce((acc:{prev?: Vector, length: number}, cur) => {
+      const prev = acc.prev;
+      acc.prev = cur;
+      if (!prev) return acc;
+      acc.length += cur.dist(prev);
+      return acc;
+    }, {prev: undefined, length: 0}).length
+  }
 }