add angle fix when points overlap

Author: g-harel

internal/animate/ease.ts

@@ -2,7 +2,7 @@ import {InterpolationFunc} from "./types";
 
 export const linear: InterpolationFunc = (progress: number) => {
     return progress;
-}
+};
 
 export const ease: InterpolationFunc = (progress: number) => {
     return 0.5 + 0.5 * Math.sin(Math.PI * (progress + 1.5));

internal/animate/prepare.ts

@@ -1,4 +1,14 @@
-import {copyPoint, length, reverse, shift, insertCount, distance, mod, angleOf} from "../util";
+import {
+    copyPoint,
+    length,
+    reverse,
+    shift,
+    insertCount,
+    distance,
+    mod,
+    angleOf,
+    coordEqual,
+} from "../util";
 import {Point, Shape} from "../types";
 
 const optimizeOrder = (a: Shape, b: Shape): Shape => {
@@ -52,7 +62,24 @@ export const divideShape = (count: number, points: Shape): Shape => {
     return out;
 };
 
-const fixAngles = (shape: Shape): Shape => {
+const fixAnglesWith = (fixee: Shape, fixer: Shape): Shape => {
+    const out: Shape = [];
+    for (let i = 0; i < fixee.length; i++) {
+        const before = fixee[mod(i - 1, fixee.length)];
+        const after = fixee[mod(i + 1, fixee.length)];
+        const point = copyPoint(fixee[i]);
+        if (point.handleIn.length === 0 && coordEqual(before, point)) {
+            point.handleIn.angle = fixer[i].handleIn.angle;
+        }
+        if (point.handleOut.length === 0 && coordEqual(after, point)) {
+            point.handleOut.angle = fixer[i].handleOut.angle;
+        }
+        out.push(point);
+    }
+    return out;
+};
+
+const fixAnglesSelf = (shape: Shape): Shape => {
     const out: Shape = [];
     for (let i = 0; i < shape.length; i++) {
         const before = shape[mod(i - 1, shape.length)];
@@ -97,5 +124,5 @@ export const prepShapes = (a: Shape, b: Shape): [Shape, Shape] => {
     const aNorm = divideShape(points, a);
     const bNorm = divideShape(points, b);
     const bOpt = optimizeOrder(aNorm, bNorm);
-    return [fixAngles(aNorm), fixAngles(bOpt)];
+    return [fixAnglesWith(fixAnglesSelf(aNorm), bNorm), fixAnglesWith(fixAnglesSelf(bOpt), aNorm)];
 };

internal/animate/testing/script.ts

@@ -21,7 +21,7 @@ const ctx = temp;
 
 const toggle = document.getElementById("toggle");
 if (toggle === null) throw new Error("no toggle");
-toggle.onclick = () => debug = !debug;
+toggle.onclick = () => (debug = !debug);
 
 const point = (x: number, y: number, ia: number, il: number, oa: number, ol: number): Point => {
     return {
@@ -142,6 +142,16 @@ const testPrepShapesC = (percentage: number) => {
     drawShape(ctx, debug, interpolateBetweenLoop(percentage, ...prepShapes(a, b)));
 };
 
+const testPrepShapesD = (percentage: number) => {
+    const a = blob("d", 8, 0.15, {x: 0.45, y: 0.65});
+    const b: Shape = [
+        point(0.525, 0.725, 0, 0, 0, 0),
+        point(0.525, 0.725, 0, 0, 0, 0),
+        point(0.525, 0.725, 0, 0, 0, 0),
+    ];
+    drawShape(ctx, debug, interpolateBetweenLoop(percentage, ...prepShapes(a, b)));
+};
+
 const blob = (seed: string, count: number, scale: number, offset: Coord): Shape => {
     const rgen = rand(seed);
     const shape = genBlob(count, () => 0.3 + 0.2 * rgen());
@@ -170,6 +180,7 @@ const blob = (seed: string, count: number, scale: number, offset: Coord): Shape
         testPrepShapesA(percentage);
         testPrepShapesB(percentage);
         testPrepShapesC(percentage);
+        testPrepShapesD(percentage);
 
         percentage += animationSpeed / 1000;
         percentage = mod(percentage, 1);

internal/util.ts

@@ -7,6 +7,12 @@ export const copyPoint = (p: Point): Point => ({
     handleOut: {...p.handleOut},
 });
 
+// TODO shape iterators
+
+export const coordEqual = (a: Coord, b: Coord): boolean => {
+    return a.x === b.x && a.y === b.y;
+};
+
 export const angleOf = (a: Coord, b: Coord): number => {
     const dx = b.x - a.x;
     const dy = -b.y + a.y;