cubicBezierToPoints does not consider the symmetry of control points

[Wen Jun]

Current Behavior

when cubic bezier like this:

const p1 = { x: 0.0, y: 200.0 };
const p2 = { x: 100.0, y: 0.0 };
const p3 = { x: 200.0, y: 400.0 };
const p4 = { x: 300.0, y: 200.0 };

render as follow:

Expected Behavior

Possible Solution

Add flag first to force recursion for the first time

export const cubicBezierToPoints = (
  bezier: CubicBezier,
  splitThreshold: number
): Array<Point> => {
  const points = [
    { x: bezier.p1.x, y: bezier.p1.y },
    { x: bezier.p4.x, y: bezier.p4.y },
  ];

  const cubicBezierSplit = (
    bezier: CubicBezier,
    min: number,
    max: number,
    insertIndex: number,
    first = false
  ) => {
    const time = lerp(min, max, 0.5);
    const midLerp = lerp2(bezier.p2, bezier.p3, time);

    const pointOnCurve = lerp2(
      lerp2(lerp2(bezier.p1, bezier.p2, time), midLerp, time),
      lerp2(midLerp, lerp2(bezier.p3, bezier.p4, time), time),
      time
    );

    const prevPoint = points[insertIndex - 1];
    const nextPoint = points[insertIndex];

    points.splice(insertIndex, 0, pointOnCurve);

    if (
      dot(
        normalize(sub(prevPoint, pointOnCurve)),
        normalize(sub(nextPoint, pointOnCurve))
      ) > splitThreshold ||
      first
    ) {
      cubicBezierSplit(bezier, time, max, insertIndex + 1);
      cubicBezierSplit(bezier, min, time, insertIndex);
    }
  };

  cubicBezierSplit(bezier, 0, 1, 1, true);

  return points;
};

[Andrew Lowndes]

Closing now #2 has been merged