@twick/2d 0.11.0

package/src/lib/curves/createCurveProfileLerp.ts

@@ -0,0 +1,471 @@
+import {Vector2} from '@twick/core';
+import type {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;
+  };
+}

package/src/lib/curves/getBezierSplineProfile.ts

@@ -0,0 +1,223 @@
+import {Vector2, clamp} from '@twick/core';
+import {CubicBezierSegment} from './CubicBezierSegment';
+import type {CurveProfile} from './CurveProfile';
+import type {KnotInfo} from './KnotInfo';
+import type {PolynomialSegment} from './PolynomialSegment';
+import {QuadBezierSegment} from './QuadBezierSegment';
+
+function isCubicSegment(
+  segment: PolynomialSegment,
+): segment is CubicBezierSegment {
+  return segment instanceof CubicBezierSegment;
+}
+
+/**
+ * Update a given knot's handles to be a blend between the user provided handles
+ * and a set of auto calculated handles that smoothly connect the knot to its
+ * two neighboring knots.
+ *
+ * @param knot - The knot for which to calculate the handles
+ * @param previous - The previous knot in the spline, relative to the provided
+ *                   knot.
+ * @param next - The next knot in the spline, relative to the provided knot.
+ * @param smoothness - The desired smoothness of the spline. Affects the scaling
+ *                     of the auto calculated handles.
+ */
+function calculateSmoothHandles(
+  knot: KnotInfo,
+  previous: KnotInfo,
+  next: KnotInfo,
+  smoothness: number,
+) {
+  if (knot.auto.start === 0 && knot.auto.end === 0) {
+    return;
+  }
+
+  // See for reference:
+  // http://scaledinnovation.com/analytics/splines/aboutSplines.html
+  const distanceToPrev = knot.position.sub(previous.position).magnitude;
+  const distanceToNext = next.position.sub(knot.position).magnitude;
+  const fa = (smoothness * distanceToPrev) / (distanceToPrev + distanceToNext);
+  const fb = smoothness - fa;
+  const startHandle = new Vector2(
+    knot.position.x - fa * (next.position.x - previous.position.x),
+    knot.position.y - fa * (next.position.y - previous.position.y),
+  );
+  const endHandle = new Vector2(
+    knot.position.x + fb * (next.position.x - previous.position.x),
+    knot.position.y + fb * (next.position.y - previous.position.y),
+  );
+
+  knot.startHandle = knot.startHandle.lerp(startHandle, knot.auto.start);
+  knot.endHandle = knot.endHandle.lerp(endHandle, knot.auto.end);
+}
+
+/**
+ * Calculate the `minSin` value of the curve profile so that miter joins get
+ * taken into account properly.
+ */
+function updateMinSin(profile: CurveProfile) {
+  for (let i = 0; i < profile.segments.length; i++) {
+    const segmentA = profile.segments[i] as PolynomialSegment;
+    const segmentB = profile.segments[
+      (i + 1) % profile.segments.length
+    ] as PolynomialSegment;
+
+    // Quadratic Bézier segments will always join smoothly with the previous
+    // segment. This means that we can skip the segment since it's impossible
+    // to have a miter join between the two segments.
+    if (!isCubicSegment(segmentA) || !isCubicSegment(segmentB)) {
+      continue;
+    }
+
+    const startVector = segmentA.p2.sub(segmentA.p3).normalized.safe;
+    const endVector = segmentB.p1.sub(segmentB.p0).normalized.safe;
+    const dot = startVector.dot(endVector);
+
+    // A miter join can only occur if the handle is broken, so we can skip the
+    // segment if the handles are mirrored.
+    const isBroken = 1 - Math.abs(dot) > 0.0001;
+    if (!isBroken) {
+      continue;
+    }
+
+    const angleBetween = Math.acos(clamp(-1, 1, dot));
+    const angleSin = Math.sin(angleBetween / 2);
+
+    profile.minSin = Math.min(profile.minSin, Math.abs(angleSin));
+  }
+}
+
+function addSegmentToProfile(
+  profile: CurveProfile,
+  p0: Vector2,
+  p1: Vector2,
+  p2: Vector2,
+  p3?: Vector2,
+) {
+  const segment =
+    p3 !== undefined
+      ? new CubicBezierSegment(p0, p1, p2, p3)
+      : new QuadBezierSegment(p0, p1, p2);
+  profile.segments.push(segment);
+  profile.arcLength += segment.arcLength;
+}
+
+/**
+ * Calculate the curve profile of a spline based on a set of knots.
+ *
+ * @param knots - The knots defining the spline
+ * @param closed - Whether the spline should be closed or not
+ * @param smoothness - The desired smoothness of the spline when using auto
+ *                     calculated handles.
+ */
+export function getBezierSplineProfile(
+  knots: KnotInfo[],
+  closed: boolean,
+  smoothness: number,
+): CurveProfile {
+  const profile: CurveProfile = {
+    segments: [],
+    arcLength: 0,
+    minSin: 1,
+  };
+
+  // First, we want to calculate the actual handle positions for each knot. We
+  // do so using the knot's `auto` value to blend between the user-provided
+  // handles and the auto calculated smooth handles.
+  const numberOfKnots = knots.length;
+  for (let i = 0; i < numberOfKnots; i++) {
+    // Calculating the auto handles for a given knot requires both of the knot's
+    // neighboring knots. To make sure that this works properly for the first
+    // and last knots of the spline, we want to make sure to wrap around to the
+    // beginning and end of the array, respectively.
+    const prevIndex = (i - 1 + numberOfKnots) % numberOfKnots;
+    const nextIndex = (i + 1) % numberOfKnots;
+    calculateSmoothHandles(
+      knots[i],
+      knots[prevIndex],
+      knots[nextIndex],
+      smoothness,
+    );
+  }
+
+  const firstKnot = knots[0];
+  const secondKnot = knots[1];
+
+  // Drawing the first and last segments of a spline has a few edge cases we
+  // need to consider:
+  // If the spline is not closed and the first knot should use the auto
+  // calculated handles, we want to draw a quadratic Bézier curve instead of a
+  // cubic one.
+  if (!closed && firstKnot.auto.start === 1 && firstKnot.auto.end === 1) {
+    addSegmentToProfile(
+      profile,
+      firstKnot.position,
+      secondKnot.startHandle,
+      secondKnot.position,
+    );
+  } else {
+    // Otherwise, draw a cubic Bézier segment like we do for the other segments.
+    addSegmentToProfile(
+      profile,
+      firstKnot.position,
+      firstKnot.endHandle,
+      secondKnot.startHandle,
+      secondKnot.position,
+    );
+  }
+
+  // Add all intermediate spline segments as cubic Bézier curve segments.
+  for (let i = 1; i < numberOfKnots - 2; i++) {
+    const start = knots[i];
+    const end = knots[i + 1];
+    addSegmentToProfile(
+      profile,
+      start.position,
+      start.endHandle,
+      end.startHandle,
+      end.position,
+    );
+  }
+
+  const lastKnot = knots.at(-1)!;
+  const secondToLastKnot = knots.at(-2)!;
+
+  if (knots.length > 2) {
+    // Similar to the first segment, we also want to draw the last segment as a
+    // quadratic Bézier curve if the curve is not closed and the knot should
+    // use the auto calculated handles.
+    if (!closed && lastKnot.auto.start === 1 && lastKnot.auto.end === 1) {
+      addSegmentToProfile(
+        profile,
+        secondToLastKnot.position,
+        secondToLastKnot.endHandle,
+        lastKnot.position,
+      );
+    } else {
+      addSegmentToProfile(
+        profile,
+        secondToLastKnot.position,
+        secondToLastKnot.endHandle,
+        lastKnot.startHandle,
+        lastKnot.position,
+      );
+    }
+  }
+
+  // If the spline should be closed, add one final cubic Bézier segment
+  // connecting the last and first knots.
+  if (closed) {
+    addSegmentToProfile(
+      profile,
+      lastKnot.position,
+      lastKnot.endHandle,
+      firstKnot.startHandle,
+      firstKnot.position,
+    );
+  }
+
+  updateMinSin(profile);
+
+  return profile;
+}