@efxlab/motion-canvas-2d 4.0.0

package/src/lib/curves/PolynomialSegment.ts

@@ -0,0 +1,124 @@
+import {BBox, Vector2} from '@efxlab/motion-canvas-core';
+import {moveTo} from '../utils';
+import {CurvePoint} from './CurvePoint';
+import {Polynomial2D} from './Polynomial2D';
+import {Segment} from './Segment';
+import {UniformPolynomialCurveSampler} from './UniformPolynomialCurveSampler';
+
+export abstract class PolynomialSegment extends Segment {
+  protected readonly pointSampler: UniformPolynomialCurveSampler;
+
+  public get arcLength(): number {
+    return this.length;
+  }
+
+  public abstract override get points(): Vector2[];
+
+  protected constructor(
+    protected readonly curve: Polynomial2D,
+    protected readonly length: number,
+  ) {
+    super();
+    this.pointSampler = new UniformPolynomialCurveSampler(this);
+  }
+
+  public getBBox(): BBox {
+    return this.curve.getBounds();
+  }
+
+  /**
+   * Evaluate the polynomial at the given t value.
+   *
+   * @param t - The t value at which to evaluate the curve.
+   */
+  public eval(t: number): CurvePoint {
+    const tangent = this.tangent(t);
+
+    return {
+      position: this.curve.eval(t),
+      tangent,
+      normal: tangent.perpendicular,
+    };
+  }
+
+  /**
+   * Split the curve into two separate polynomials at the given t value. The two
+   * resulting curves form the same overall shape as the original curve.
+   *
+   * @param t - The t value at which to split the curve.
+   */
+  public abstract split(t: number): [PolynomialSegment, PolynomialSegment];
+
+  public getPoint(distance: number): CurvePoint {
+    const closestPoint = this.pointSampler.pointAtDistance(
+      this.arcLength * distance,
+    );
+    return {
+      position: closestPoint.position,
+      tangent: closestPoint.tangent,
+      normal: closestPoint.tangent.perpendicular,
+    };
+  }
+
+  public transformPoints(matrix: DOMMatrix): Vector2[] {
+    return this.points.map(point => point.transformAsPoint(matrix));
+  }
+
+  /**
+   * Return the tangent of the point that sits at the provided t value on the
+   * curve.
+   *
+   * @param t - The t value at which to evaluate the curve.
+   */
+  public tangent(t: number): Vector2 {
+    return this.curve.evalDerivative(t).normalized;
+  }
+
+  public draw(
+    context: CanvasRenderingContext2D | Path2D,
+    start = 0,
+    end = 1,
+    move = true,
+  ): [CurvePoint, CurvePoint] {
+    let curve: PolynomialSegment | null = null;
+    let startT = start;
+    let endT = end;
+    let points = this.points;
+
+    if (start !== 0 || end !== 1) {
+      const startDistance = this.length * start;
+      const endDistance = this.length * end;
+
+      startT = this.pointSampler.distanceToT(startDistance);
+      endT = this.pointSampler.distanceToT(endDistance);
+      const relativeEndT = (endT - startT) / (1 - startT);
+
+      const [, startSegment] = this.split(startT);
+      [curve] = startSegment.split(relativeEndT);
+      points = curve.points;
+    }
+
+    if (move) {
+      moveTo(context, points[0]);
+    }
+    (curve ?? this).doDraw(context);
+
+    const startTangent = this.tangent(startT);
+    const endTangent = this.tangent(endT);
+
+    return [
+      {
+        position: points[0],
+        tangent: startTangent,
+        normal: startTangent.perpendicular,
+      },
+      {
+        position: points.at(-1)!,
+        tangent: endTangent,
+        normal: endTangent.perpendicular,
+      },
+    ];
+  }
+
+  protected abstract doDraw(context: CanvasRenderingContext2D | Path2D): void;
+}

package/src/lib/curves/QuadBezierSegment.ts

@@ -0,0 +1,64 @@
+import {Vector2, lazy} from '@efxlab/motion-canvas-core';
+import {quadraticCurveTo} from '../utils';
+import {Polynomial2D} from './Polynomial2D';
+import {PolynomialSegment} from './PolynomialSegment';
+
+/**
+ * A spline segment representing a quadratic Bézier curve.
+ */
+export class QuadBezierSegment extends PolynomialSegment {
+  @lazy(() => document.createElementNS('http://www.w3.org/2000/svg', 'path'))
+  private static el: SVGPathElement;
+
+  public get points(): Vector2[] {
+    return [this.p0, this.p1, this.p2];
+  }
+
+  public constructor(
+    public readonly p0: Vector2,
+    public readonly p1: Vector2,
+    public readonly p2: Vector2,
+  ) {
+    super(
+      new Polynomial2D(
+        p0,
+        // 2*(-p0+p1)
+        p0.flipped.add(p1).scale(2),
+        // p0-2*p1+p2
+        p0.sub(p1.scale(2)).add(p2),
+      ),
+      QuadBezierSegment.getLength(p0, p1, p2),
+    );
+  }
+
+  public split(t: number): [PolynomialSegment, PolynomialSegment] {
+    const a = new Vector2(
+      this.p0.x + (this.p1.x - this.p0.x) * t,
+      this.p0.y + (this.p1.y - this.p0.y) * t,
+    );
+    const b = new Vector2(
+      this.p1.x + (this.p2.x - this.p1.x) * t,
+      this.p1.y + (this.p2.y - this.p1.y) * t,
+    );
+    const p = new Vector2(a.x + (b.x - a.x) * t, a.y + (b.y - a.y) * t);
+
+    const left = new QuadBezierSegment(this.p0, a, p);
+    const right = new QuadBezierSegment(p, b, this.p2);
+
+    return [left, right];
+  }
+
+  protected static getLength(p0: Vector2, p1: Vector2, p2: Vector2): number {
+    // Let the browser do the work for us instead of calculating the arclength
+    // manually.
+    QuadBezierSegment.el.setAttribute(
+      'd',
+      `M ${p0.x} ${p0.y} Q ${p1.x} ${p1.y} ${p2.x} ${p2.y}`,
+    );
+    return QuadBezierSegment.el.getTotalLength();
+  }
+
+  protected override doDraw(context: CanvasRenderingContext2D | Path2D) {
+    quadraticCurveTo(context, this.p1, this.p2);
+  }
+}

package/src/lib/curves/Segment.ts

@@ -0,0 +1,17 @@
+import {Vector2} from '@efxlab/motion-canvas-core';
+import {CurvePoint} from './CurvePoint';
+
+export abstract class Segment {
+  public abstract readonly points: Vector2[];
+
+  public abstract draw(
+    context: CanvasRenderingContext2D | Path2D,
+    start: number,
+    end: number,
+    move: boolean,
+  ): [CurvePoint, CurvePoint];
+
+  public abstract getPoint(distance: number): CurvePoint;
+
+  public abstract get arcLength(): number;
+}

package/src/lib/curves/UniformPolynomialCurveSampler.ts

@@ -0,0 +1,93 @@
+import {Vector2, clamp, remap} from '@efxlab/motion-canvas-core';
+import {CurvePoint} from './CurvePoint';
+import {PolynomialSegment} from './PolynomialSegment';
+
+/**
+ * Class to uniformly sample points on a given polynomial curve.
+ *
+ * @remarks
+ * In order to uniformly sample points from non-linear curves, this sampler
+ * re-parameterizes the curve by arclength.
+ */
+export class UniformPolynomialCurveSampler {
+  private sampledDistances: number[] = [];
+
+  /**
+   * @param curve - The curve to sample
+   * @param samples - How many points to sample from the provided curve. The
+   *                  more points get sampled, the higher the resolution–and
+   *                  therefore precision–of the sampler.
+   */
+  public constructor(
+    private readonly curve: PolynomialSegment,
+    samples = 20,
+  ) {
+    this.resample(samples);
+  }
+
+  /**
+   * Discard all previously sampled points and resample the provided number of
+   * points from the curve.
+   *
+   * @param samples - The number of points to sample.
+   */
+  public resample(samples: number): void {
+    this.sampledDistances = [0];
+
+    let length = 0;
+    let previous: Vector2 = this.curve.eval(0).position;
+    for (let i = 1; i < samples; i++) {
+      const t = i / (samples - 1);
+      const curvePoint = this.curve.eval(t);
+      const segmentLength = previous.sub(curvePoint.position).magnitude;
+
+      length += segmentLength;
+
+      this.sampledDistances.push(length);
+      previous = curvePoint.position;
+    }
+
+    // Account for any accumulated floating point errors and explicitly set the
+    // distance of the last point to the arclength of the curve.
+    this.sampledDistances[this.sampledDistances.length - 1] =
+      this.curve.arcLength;
+  }
+
+  /**
+   * Return the point at the provided distance along the sampled curve's
+   * arclength.
+   *
+   * @param distance - The distance along the curve's arclength for which to
+   *                   retrieve the point.
+   */
+  public pointAtDistance(distance: number): CurvePoint {
+    return this.curve.eval(this.distanceToT(distance));
+  }
+
+  /**
+   * Return the t value for the point at the provided distance along the sampled
+   * curve's arc length.
+   *
+   * @param distance - The distance along the arclength
+   */
+  public distanceToT(distance: number): number {
+    const samples = this.sampledDistances.length;
+    distance = clamp(0, this.curve.arcLength, distance);
+
+    for (let i = 0; i < samples; i++) {
+      const lower = this.sampledDistances[i];
+      const upper = this.sampledDistances[i + 1];
+      if (distance >= lower && distance <= upper) {
+        return remap(
+          lower,
+          upper,
+          i / (samples - 1),
+          (i + 1) / (samples - 1),
+          distance,
+        );
+      }
+    }
+
+    return 1;
+  }
+}