@canvas-commons/2d 0.2.0

package/src/lib/curves/UniformPolynomialCurveSampler.ts

@@ -0,0 +1,93 @@
+import {Vector2, clamp, remap} from '@canvas-commons/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;
+  }
+}

package/src/lib/curves/createCurveProfileLerp.ts

@@ -0,0 +1,471 @@
+import {Vector2} from '@canvas-commons/core';
+import {CurveProfile} from './CurveProfile';
+import {LineSegment} from './LineSegment';
+import {getPointAtDistance} from './getPointAtDistance';
+import {getPolylineProfile} from './getPolylineProfile';
+
+// Based on kute.js svgMorph plugin
+
+interface SubcurveProfile extends CurveProfile {
+  closed: boolean;
+}
+
+interface PolygonProfile {
+  /**
+   * If path closed, first point and last point must be equal
+   */
+  points: Vector2[];
+  closed: boolean;
+}
+
+/**
+ * Split segments of polygon until distance between adjacent point is less than or equal maxLength. This function mutate original points.
+ * @param points - Polygon points
+ * @param maxLength - max distance between two point
+ */
+
+function bisect(points: Vector2[], maxLength: number) {
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i];
+    let b = points[i + 1];
+    while (a.sub(b).magnitude > maxLength) {
+      b = Vector2.lerp(a, b, 0.5);
+      points.splice(i + 1, 0, b);
+    }
+  }
+}
+
+/**
+ * Convert curve which only contain LineSegment into polygon.
+ * @param curve - curve to convert. curve must contain 1 subpath
+ * @param maxLength - max distance between two point
+ * @returns - null if curve contain segment other than LineSegment
+ */
+
+function exactPolygonPoints(
+  curve: SubcurveProfile,
+  maxLength: number,
+): Vector2[] | null {
+  const points: Vector2[] = [];
+
+  let endPoint: Vector2 | null = null;
+  for (const segment of curve.segments) {
+    if (!(segment instanceof LineSegment)) return null;
+
+    points.push(segment.from);
+
+    endPoint = segment.to;
+  }
+
+  if (endPoint) points.push(endPoint);
+
+  if (!Number.isNaN(maxLength) && maxLength > 0) {
+    bisect(points, maxLength);
+  }
+
+  return points;
+}
+
+/**
+ * Calculate area of polygon
+ * @param points - polygon points
+ * @returns - area of polygon
+ */
+
+function polygonArea(points: Vector2[]) {
+  return (
+    points.reduce((area, a, i) => {
+      const b = points[(i + 1) % points.length];
+      return area + (a.y * b.x - a.x * b.y);
+    }, 0) / 2
+  );
+}
+
+/**
+ * Convert curve into polygon by sampling curve profile
+ * @param curve - curve to convert. curve must contain only 1 subpath
+ * @param maxLength - max distance between point
+ * @returns - always return polygon points
+ */
+
+function approximatePolygonPoints(
+  curve: SubcurveProfile,
+  maxLength: number,
+): Vector2[] {
+  const points: Vector2[] = [];
+
+  let numPoints = 3;
+  if (!Number.isNaN(maxLength) && maxLength > 0) {
+    numPoints = Math.max(numPoints, Math.ceil(curve.arcLength / maxLength));
+  }
+
+  for (let i = 0; i < numPoints; i += 1) {
+    const point = getPointAtDistance(
+      curve,
+      curve.arcLength * (i / (numPoints - 1)),
+    );
+    points.push(point.position);
+  }
+
+  if (polygonArea(points) > 0) points.reverse();
+
+  return points;
+}
+
+/**
+ * Split curve into subpaths
+ * @param curve - curve to split
+ * @returns - subpaths of curve
+ */
+
+function splitCurve(curve: CurveProfile) {
+  if (curve.segments.length === 0) return [];
+
+  let current: SubcurveProfile = {
+    arcLength: 0,
+    minSin: 0,
+    segments: [],
+    closed: false,
+  };
+
+  let endPoint: Vector2 | null = null;
+
+  const composite: SubcurveProfile[] = [current];
+
+  for (const segment of curve.segments) {
+    const start = segment.getPoint(0).position;
+
+    if (endPoint && !start.equals(endPoint)) {
+      current = {
+        arcLength: 0,
+        minSin: 0,
+        segments: [],
+        closed: false,
+      };
+      composite.push(current);
+    }
+
+    current.segments.push(segment);
+    current.arcLength += segment.arcLength;
+    endPoint = segment.getPoint(1).position;
+  }
+
+  for (const sub of composite) {
+    sub.closed = sub.segments[0]
+      .getPoint(0)
+      .position.equals(
+        sub.segments[sub.segments.length - 1].getPoint(1).position,
+      );
+  }
+
+  return composite;
+}
+
+/**
+ * Convert curve into polygon use best possible method
+ * @param curve - curve to convert
+ * @param maxLength - max distance between two point
+ * @returns - polgon points
+ */
+
+function subcurveToPolygon(
+  curve: SubcurveProfile,
+  maxLength: number,
+): PolygonProfile {
+  const points =
+    exactPolygonPoints(curve, maxLength) ||
+    approximatePolygonPoints(curve, maxLength);
+  return {
+    points: [...points],
+    closed: curve.closed,
+  };
+}
+
+/**
+ * Calculate polygon perimeter
+ * @param points - polygon points
+ * @returns - perimeter of polygon
+ */
+
+export function polygonLength(points: Vector2[]) {
+  return points.reduce((length, point, i) => {
+    if (i) return length + points[i - 1].sub(point).magnitude;
+    return 0;
+  }, 0);
+}
+
+/**s
+ * Sample additional points for polygon to better match its pair. This will mutate original points.
+ * @param points - polygon points
+ * @param numPoints - number of points to be added
+ */
+
+function addPoints(points: Vector2[], numPoints: number) {
+  const desiredLength = points.length + numPoints;
+  const step = polygonLength(points) / numPoints;
+
+  let i = 0;
+  let cursor = 0;
+  let insertAt = step / 2;
+
+  while (points.length < desiredLength) {
+    const a = points[i];
+    const b = points[(i + 1) % points.length];
+    const length = a.sub(b).magnitude;
+
+    if (insertAt <= cursor + length) {
+      points.splice(
+        i + 1,
+        0,
+        length
+          ? Vector2.lerp(a, b, (insertAt - cursor) / length)
+          : new Vector2(a),
+      );
+      insertAt += step;
+    } else {
+      cursor += length;
+      i += 1;
+    }
+  }
+}
+
+/**
+ * Calculate total moving point distance when morphing between polygon points
+ * @param points - first polygon points
+ * @param reference - second polygon points
+ * @param offset - offset for first polygon points
+ * @returns
+ */
+
+export function calculateLerpDistance(
+  points: Vector2[],
+  reference: Vector2[],
+  offset: number,
+) {
+  const len = points.length;
+  let sumOfSquares = 0;
+
+  for (let i = 0; i < reference.length; i += 1) {
+    const a = points[(offset + i) % len];
+    const b = reference[i];
+    sumOfSquares += a.sub(b).squaredMagnitude;
+  }
+
+  return sumOfSquares;
+}
+
+/**
+ * Rotate polygon in order to minimize moving points.
+ * @param polygon - polygon to be rotated
+ * @param reference - polygon to be reference
+ */
+
+function rotatePolygon(polygon: PolygonProfile, reference: PolygonProfile) {
+  const {points, closed} = polygon;
+  const len = points.length;
+
+  if (!closed) {
+    const originalDistance = calculateLerpDistance(points, reference.points, 0);
+    const reversedPoints = [...points].reverse();
+    const reversedDistance = calculateLerpDistance(
+      reversedPoints,
+      reference.points,
+      0,
+    );
+    if (reversedDistance < originalDistance) polygon.points = reversedPoints;
+  } else {
+    let minDistance = Infinity;
+    let bestOffset = 0;
+    const last = points.pop();
+
+    // Closed polygon first point must equal last point
+    // When we rotate polygon, first point is changed which mean last point also must changed
+    // When we remove last point, calculateLerpDistance will assume last point is equal first point
+    // Proof:
+    // len = points.length = reference.length - 1
+    // When i = 0:
+    // (offset + i) % len = offset % len
+    // When i = reference.length - 1 or i = len
+    // (offset + i) % len = (offset + len) % len = offset % len
+
+    for (let offset = 0; offset < len; offset += 1) {
+      const distance = calculateLerpDistance(points, reference.points, offset);
+      if (distance < minDistance) {
+        minDistance = distance;
+        bestOffset = offset;
+      }
+    }
+
+    if (last) points.push(last);
+
+    if (bestOffset) {
+      points.pop();
+      const spliced = points.splice(0, bestOffset);
+      points.splice(points.length, 0, ...spliced);
+      points.push(points[0]);
+    }
+  }
+}
+
+/**
+ * Round polygon's points coordinate to a specified amount of decimal
+ * @param points - polygon point to be rounded
+ * @param round - amount of decimal
+ * @returns - new polygon point
+ */
+
+function roundPolygon(
+  {points, ...rest}: PolygonProfile,
+  round: number,
+): PolygonProfile {
+  const pow = round >= 1 ? 10 ** round : 1;
+  return {
+    points: points.map(point => {
+      const [x, y] = [point.x, point.y].map(n => Math.round(n * pow) / pow);
+      return new Vector2(x, y);
+    }),
+    ...rest,
+  };
+}
+
+/**
+ * Create two polygon to tween between sub curve/path
+ * @param from - source curve
+ * @param to - targe curve
+ * @param precision - desired distance between two point
+ * @param round - amount of decimal when rounding
+ * @returns two polygon ready to tween
+ */
+
+function getSubcurveInterpolationPolygon(
+  from: SubcurveProfile,
+  to: SubcurveProfile,
+  precision: number,
+  round: number,
+) {
+  const morphPrecision = precision;
+  const fromRing = subcurveToPolygon(from, morphPrecision);
+  const toRing = subcurveToPolygon(to, morphPrecision);
+
+  const diff = fromRing.points.length - toRing.points.length;
+
+  addPoints(fromRing.points, diff < 0 ? diff * -1 : 0);
+  addPoints(toRing.points, diff > 0 ? diff : 0);
+
+  if (!from.closed && to.closed) rotatePolygon(toRing, fromRing);
+  else rotatePolygon(fromRing, toRing);
+
+  return {
+    from: roundPolygon(fromRing, round),
+    to: roundPolygon(toRing, round),
+  };
+}
+
+/**
+ * Make two sub curve list have equal length
+ * @param subcurves - List to add
+ * @param reference - Reference list
+ */
+
+function balanceSubcurves(
+  subcurves: SubcurveProfile[],
+  reference: SubcurveProfile[],
+) {
+  for (let i = subcurves.length; i < reference.length; i++) {
+    const point = reference[i].segments[0].getPoint(0).position;
+    subcurves.push({
+      arcLength: 0,
+      closed: false,
+      minSin: 0,
+      segments: [new LineSegment(point, point)],
+    });
+  }
+}
+
+/**
+ * Create two polygon to tween between curve
+ * @param from - source curve
+ * @param to - targe curve
+ * @param precision - desired distance between two point
+ * @param round - amount of decimal when rounding
+ * @returns list that contain list of polygon before and after tween
+ */
+
+function getInterpolationPolygon(
+  from: CurveProfile,
+  to: CurveProfile,
+  precision: number,
+  round: number,
+) {
+  const fromSub = splitCurve(from);
+  const toSub = splitCurve(to);
+
+  if (fromSub.length < toSub.length) balanceSubcurves(fromSub, toSub);
+  else balanceSubcurves(toSub, fromSub);
+
+  return fromSub.map((sub, i) =>
+    getSubcurveInterpolationPolygon(sub, toSub[i], precision, round),
+  );
+}
+
+/**
+ * Add curve into another curve
+ * @param target - target curve
+ * @param source - curve to add
+ */
+
+function addCurveToCurve(target: CurveProfile, source: CurveProfile) {
+  const {segments, arcLength, minSin} = source;
+  target.segments.push(...segments);
+  target.arcLength += arcLength;
+  target.minSin = Math.min(target.minSin, minSin);
+}
+
+/**
+ * Interpolate between two polygon points.
+ * @param from - source polygon points
+ * @param to - target polygon points
+ * @param value - interpolation progress
+ * @returns - new polygon points
+ */
+
+export function polygonPointsLerp(
+  from: Vector2[],
+  to: Vector2[],
+  value: number,
+): Vector2[] {
+  const points: Vector2[] = [];
+  if (value === 0) return [...from];
+  if (value === 1) return [...to];
+
+  for (let i = 0; i < from.length; i++) {
+    const a = from[i];
+    const b = to[i];
+    points.push(Vector2.lerp(a, b, value));
+  }
+  return points;
+}
+
+/**
+ * Create interpolator to tween between two curve
+ * @param a - source curve
+ * @param b - target curve
+ * @returns - curve interpolator
+ */
+
+export function createCurveProfileLerp(a: CurveProfile, b: CurveProfile) {
+  const interpolations = getInterpolationPolygon(a, b, 5, 4);
+
+  return (progress: number) => {
+    const curve: CurveProfile = {
+      segments: [],
+      arcLength: 0,
+      minSin: 1,
+    };
+    for (const {from, to} of interpolations) {
+      const points = polygonPointsLerp(from.points, to.points, progress);
+      addCurveToCurve(curve, getPolylineProfile(points, 0, false));
+    }
+    return curve;
+  };
+}