Add experimental Bézier support

Author: mbolis

.github/workflows/static.yml

@@ -31,10 +31,10 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Use Node.js v20
+      - name: Use Node.js v22
         uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '22.x'
       - name: Install dependencies
         run: npm ci
       - name: Build

index.html

@@ -58,7 +58,7 @@
       </div>
       <pre id=out></pre>
     </div>
-    <div id=useful_links>
+    <div id=useful_links style="display:none">
       <a target=_blank rel=noreferrer href=https://github.com/mbolis/line.script title="Find me on GitHub">
         <svg viewBox="0 0 438.549 438.549">
           <path fill="currentColor" d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path>

src/bezier/bezier.ts

@@ -0,0 +1,107 @@
+import type { Frame } from "../frames";
+import { rad2deg, Vector2d, type Degrees } from "../geometry";
+
+export interface BezierResult {
+  position: Vector2d;
+  facing: Degrees;
+}
+
+export class Bezier {
+  private static nextId = 0;
+  readonly id = Bezier.nextId++;
+
+  private mode: "quadratic" | "cubic";
+  private d10: Vector2d;
+  private d21: Vector2d;
+  private d32: Vector2d;
+
+  constructor(
+    protected p0: Vector2d,
+    protected p1: Vector2d,
+    protected p2: Vector2d,
+    protected p3?: Vector2d,
+  ) {
+    this.mode = p3 ? "cubic" : "quadratic";
+
+    this.p0 = Vector2d.of(p0);
+    this.p1 = Vector2d.of(p1);
+    this.p2 = Vector2d.of(p2);
+    this.p3 = p3 && Vector2d.of(p3);
+
+    this.d10 = this.p1.minus(p0);
+    this.d21 = this.p2.minus(p1);
+    this.d32 = p3 && this.p3.minus(p2);
+  }
+
+  protected reposition({ position, facingRadians }: Frame) {
+    this.p0 = this.p0.rotate(facingRadians).plus(position);
+    this.p1 = this.p1.rotate(facingRadians).plus(position);
+    this.p2 = this.p2.rotate(facingRadians).plus(position);
+    this.p3 = this.p3 && this.p3.rotate(facingRadians).plus(position);
+
+    this.d10 = this.p1.minus(this.p0);
+    this.d21 = this.p2.minus(this.p1);
+    this.d32 = this.p3 && this.p3.minus(this.p2);
+  }
+
+  value(t: number) {
+    return this[this.mode](t);
+  }
+
+  private quadratic(t: number): BezierResult {
+    const t_ = 1 - t;
+
+    const a = t_ ** 2;
+    const b = 2 * t * t_;
+    const c = t ** 2;
+    const position = this.p0.scale(a)
+      .plus(this.p1.scale(b))
+      .plus(this.p2.scale(c));
+    const facingCoords = this.d10.scale(t_)
+      .plus(this.d21.scale(t));
+    const facing = rad2deg(Math.atan2(facingCoords.y, facingCoords.x)) - 90;
+
+    return { position, facing };
+  }
+
+  private cubic(t: number): BezierResult {
+    const t_ = 1 - t;
+
+    const a = t_ ** 3;
+    const b = 3 * t * t_ ** 2;
+    const c = 3 * t ** 2 * t_;
+    const d = t ** 3;
+    const position = this.p0.scale(a)
+      .plus(this.p1.scale(b))
+      .plus(this.p2.scale(c))
+      .plus(this.p3.scale(d));
+    const a_ = t_ ** 2;
+    const b_ = 2 * t * t_;
+    const c_ = t ** 2
+    const facingCoords = this.d10.scale(a_)
+      .plus(this.d21.scale(b_))
+      .plus(this.d32.scale(c_));
+    const facing = rad2deg(Math.atan2(facingCoords.y, facingCoords.x)) - 90;
+
+    return { position, facing };
+  }
+
+  private static readonly APPROX_STEP = 1 / 16;
+
+  private _approxLength: number;
+
+  get approxLength() {
+    if (this._approxLength !== undefined) {
+      return this._approxLength;
+    }
+
+    let p = this.p0;
+    let length = 0;
+    for (let t = 0; t <= 1; t += Bezier.APPROX_STEP) {
+      const p_ = this.value(t).position;
+      length += p_.minus(p).length;
+      p = p_;
+    }
+    return this._approxLength = length | 0;
+  }
+}

src/bezier/index.ts

@@ -0,0 +1,50 @@
+import type { Frame } from "../frames";
+import { Vector2d } from "../geometry";
+import { Bezier as BezierCurve, type BezierResult } from "./bezier";
+
+const subscribers = new Map<number, (r: BezierResult) => void>();
+const worker = new Worker(new URL("./worker", import.meta.url), { type: "module" });
+worker.addEventListener("message", e => {
+  const { id, value, done } = e.data;
+  if (done) {
+    subscribers.delete(id);
+  } else {
+    value.position = Vector2d.of(value.position);
+    subscribers.get(id)(value);
+  }
+});
+
+export class Bezier extends BezierCurve {
+  private lut = [] as BezierResult[];
+
+  constructor(
+    p0: Vector2d,
+    p1: Vector2d,
+    p2: Vector2d,
+    p3?: Vector2d,
+  ) {
+    super(p0, p1, p2, p3);
+
+    const lut = this.lut;
+    subscribers.set(this.id, v => lut.push(v))
+  }
+
+  repositionAndCalculate(frame: Frame, sync: boolean) {
+    this.reposition(frame);
+    if (sync) {
+      const length = this.approxLength;
+      for (let i = 0; i < length; i++) {
+        this.lut.push(this.value(i / (length - 1)));
+      }
+    } else {
+      worker.postMessage({ id: this.id, p0: this.p0, p1: this.p1, p2: this.p2, p3: this.p3 });
+    }
+  }
+
+  lookupValues(t: number) {
+    const i = this.approxLength * t | 0;
+    const values = this.lut.slice(0, i + 1);
+    if (values.length === 0) return [this.value(t)];
+    return values;
+  }
+}

src/bezier/worker.ts

@@ -0,0 +1,12 @@
+import { Bezier } from "./bezier";
+
+addEventListener("message", e => {
+  const { id, p0, p1, p2, p3 } = e.data;
+
+  const curve = new Bezier(p0, p1, p2, p3);
+  const length = curve.approxLength;
+  for (let i = 0; i < length; i++) {
+    postMessage({ id, value: curve.value(i / (length - 1)) });
+  }
+  postMessage({ done: true });
+});

src/frames.ts

@@ -6,22 +6,23 @@ type FrameMutations = {
   facing?: Degrees;
   height?: number;
   opacity?: number;
-  newStrokes?: Stroke[];
+  strokes?: Stroke[];
   foreground?: string;
   background?: string;
   speed?: number;
 }
+
 export class Frame {
   static new() {
     return new Frame;
   }
 
   private constructor(
-    readonly position: Vector2d = Vector2d.ORIGIN,
-    readonly facing: Degrees = 0,
+    readonly position = Vector2d.ORIGIN,
+    readonly facing = 0 as Degrees,
     readonly height = 0,
     readonly opacity = 1,
-    readonly strokes: Stroke[] = [],
+    readonly strokes = [] as Stroke[],
     readonly foreground = "",
     readonly background = "",
     readonly speed = 100,
@@ -34,13 +35,13 @@ export class Frame {
   with(properties: FrameMutations): Frame {
     return new Frame(
       properties.position || this.position,
-      "facing" in properties ? properties.facing : this.facing,
-      "height" in properties ? properties.height : this.height,
-      "opacity" in properties ? properties.opacity : this.opacity,
-      "newStrokes" in properties ? this.strokes.concat(properties.newStrokes) : this.strokes,
-      "foreground" in properties ? properties.foreground : this.foreground,
-      "background" in properties ? properties.background : this.background,
-      "speed" in properties ? properties.speed : this.speed);
+      properties.facing !== undefined ? properties.facing : this.facing,
+      properties.height !== undefined ? properties.height : this.height,
+      properties.opacity !== undefined ? properties.opacity : this.opacity,
+      properties.strokes || this.strokes,
+      properties.foreground !== undefined ? properties.foreground : this.foreground,
+      properties.background !== undefined ? properties.background : this.background,
+      properties.speed !== undefined ? properties.speed : this.speed);
   }
 }
 

src/geometry.ts

@@ -12,6 +12,10 @@ export class Vector2d {
   readonly x: number;
   readonly y: number;
 
+  static of({ x, y }: { x: number, y: number }) {
+    return new Vector2d(x, y);
+  }
+
   static x(x: number): Vector2d {
     return new Vector2d(x, 0);
   }
@@ -27,32 +31,36 @@ export class Vector2d {
     this.y = y;
   }
 
-  plus(that: Vector2d): Vector2d {
+  get length() {
+    return Math.sqrt(this.x ** 2 + this.y ** 2);
+  }
+
+  plus(that: Vector2d) {
     return new Vector2d(this.x + that.x, this.y + that.y);
   }
 
-  minus(that: Vector2d): Vector2d {
+  minus(that: Vector2d) {
     return new Vector2d(this.x - that.x, this.y - that.y);
   }
 
-  scale(k: number): Vector2d {
+  scale(k: number) {
     return new Vector2d(k * this.x, k * this.y);
   }
 
-  rotate(th: Radians): Vector2d {
+  rotate(th: Radians) {
     let x = this.x * Math.cos(th) - this.y * Math.sin(th);
     let y = this.x * Math.sin(th) + this.y * Math.cos(th);
     return new Vector2d(x, y);
   }
 
-  segmentTo(point: Vector2d): Segment {
+  segmentTo(point: Vector2d) {
     return new Segment(this, point);
   }
-  segmentBy(translation: Vector2d): Segment {
+  segmentBy(translation: Vector2d) {
     return new Segment(this, this.plus(translation));
   }
 
-  toString(): string {
+  toString() {
     return `(${this.x},${this.y})`;
   }
 };

src/gui.ts

@@ -4,12 +4,14 @@ import { Frame } from "./frames";
 export const ZOOM_DOWN = 1;
 export const ZOOM_UP = 1.5;
 
+export const DEFAULT_SCALE = 3.2;
+
 export class Painter {
   position: Vector2d = Vector2d.ORIGIN;
   facing: Degrees = 0;
   z = ZOOM_DOWN;
   zoom = 0.5;
-  scale = 3.2;
+  scale = DEFAULT_SCALE;
   opacity = 1;
   brushColor = "black";
 

src/index.ts

@@ -6,7 +6,7 @@ import "codemirror/mode/javascript/javascript";
 
 import { Animation, Frame } from "./frames";
 import { Interpreter, Instruction } from "./interpreter";
-import { Painter } from "./gui";
+import { DEFAULT_SCALE, Painter } from "./gui";
 import * as disk from "./disk";
 import * as output from "./output";
 import "./style.css";
@@ -91,11 +91,11 @@ class PainterStudio {
 
   draw() {
     this.drawPaper(this.ctx);
-    this.frame.strokes.forEach(stroke => stroke.defaultColor(this.frame.foreground).draw(ctx, 3.2));
+    this.frame.strokes.forEach(stroke => stroke.defaultColor(this.frame.foreground).draw(ctx, DEFAULT_SCALE));
     this.painter.draw(this.ctx);
   }
 
-  private drawPaper(ctx: CanvasRenderingContext2D, scale = 3.2) {
+  private drawPaper(ctx: CanvasRenderingContext2D, scale = DEFAULT_SCALE) {
     const WIDTH = ctx.canvas.width;
     const HEIGHT = ctx.canvas.height;
     const X = WIDTH / 2;