Skip to content

Commit b0c12d2

Browse files
committed
provide options to disable some interpolation processing
1 parent 34f8700 commit b0c12d2

File tree

2 files changed

+40
-11
lines changed

2 files changed

+40
-11
lines changed

internal/animate/prepare.ts

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ const optimizeOrder = (a: Point[], b: Point[]): Point[] => {
4040
return shift(minOffset, minOffsetBase);
4141
};
4242

43-
// TODO OPT allow extra division
4443
export const divide = (count: number, points: Point[]): Point[] => {
4544
if (points.length < 3) throw new Error("not enough points");
4645
if (count < points.length) throw new Error("cannot remove points");
@@ -65,7 +64,10 @@ export const divide = (count: number, points: Point[]): Point[] => {
6564
return out;
6665
};
6766

68-
// TODO OPT disable
67+
// If point has no handle and is on top of the point before or after it, use the
68+
// angle of the fixer shape's point at the same index. This is especially useful
69+
// when all the points of the initial shape are concentrated on the same
70+
// coordinates and "expand" into the target shape.
6971
const fixAnglesWith = (fixee: Point[], fixer: Point[]): Point[] => {
7072
return mapPoints(fixee, ({index, curr, prev, next}) => {
7173
if (curr.handleIn.length === 0 && coordEqual(prev(), curr)) {
@@ -78,7 +80,7 @@ const fixAnglesWith = (fixee: Point[], fixer: Point[]): Point[] => {
7880
});
7981
};
8082

81-
// TODO OPT disable
83+
// If point has no handle, use angle between before and after points.
8284
const fixAnglesSelf = (points: Point[]): Point[] => {
8385
return mapPoints(points, ({curr, prev, next}) => {
8486
const angle = angleOf(prev(), next());
@@ -114,10 +116,17 @@ const divideLengths = (lengths: number[], add: number): number[] => {
114116
return divisors;
115117
};
116118

117-
export const prepare = (a: Point[], b: Point[]): [Point[], Point[]] => {
118-
const pointCount = Math.max(a.length, b.length);
119+
export const prepare = (
120+
a: Point[],
121+
b: Point[],
122+
options: {rawAngles: boolean; divideRatio: number},
123+
): [Point[], Point[]] => {
124+
const pointCount = options.divideRatio * Math.max(a.length, b.length);
119125
const aNorm = divide(pointCount, a);
120126
const bNorm = divide(pointCount, b);
121127
const bOpt = optimizeOrder(aNorm, bNorm);
122-
return [fixAnglesWith(fixAnglesSelf(aNorm), bNorm), fixAnglesWith(fixAnglesSelf(bOpt), aNorm)];
128+
return [
129+
options.rawAngles ? aNorm : fixAnglesWith(fixAnglesSelf(aNorm), bNorm),
130+
options.rawAngles ? bOpt : fixAnglesWith(fixAnglesSelf(bOpt), aNorm),
131+
];
123132
};

internal/animate/testing/script.ts

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,11 @@ const testInterpolateBetween = (percentage: number) => {
108108
const testPrepPointsA = (percentage: number) => {
109109
const a = blob("a", 6, 0.15, {x: 0.45, y: 0.1});
110110
const b = blob("b", 10, 0.15, {x: 0.45, y: 0.1});
111-
drawClosed(ctx, debug, loopBetween(percentage, ...prepare(a, b)));
111+
drawClosed(
112+
ctx,
113+
debug,
114+
loopBetween(percentage, ...prepare(a, b, {rawAngles: false, divideRatio: 1})),
115+
);
112116
};
113117

114118
const testPrepPointsB = (percentage: number) => {
@@ -119,7 +123,11 @@ const testPrepPointsB = (percentage: number) => {
119123
point(0.6, 0.4, 0, 0, 0, 0),
120124
point(0.45, 0.4, 0, 0, 0, 0),
121125
];
122-
drawClosed(ctx, debug, loopBetween(percentage, ...prepare(a, b)));
126+
drawClosed(
127+
ctx,
128+
debug,
129+
loopBetween(percentage, ...prepare(a, b, {rawAngles: false, divideRatio: 1})),
130+
);
123131
};
124132

125133
const testPrepPointsC = (percentage: number) => {
@@ -138,7 +146,11 @@ const testPrepPointsC = (percentage: number) => {
138146
point(0.45, 0.5, 0, 0, 0, 0),
139147
point(0.5, 0.5, 0, 0, 0, 0),
140148
];
141-
drawClosed(ctx, debug, loopBetween(percentage, ...prepare(b, a)));
149+
drawClosed(
150+
ctx,
151+
debug,
152+
loopBetween(percentage, ...prepare(b, a, {rawAngles: false, divideRatio: 1})),
153+
);
142154
};
143155

144156
const testPrepPointsD = (percentage: number) => {
@@ -148,7 +160,11 @@ const testPrepPointsD = (percentage: number) => {
148160
point(0.525, 0.725, 0, 0, 0, 0),
149161
point(0.525, 0.725, 0, 0, 0, 0),
150162
];
151-
drawClosed(ctx, debug, loopBetween(percentage, ...prepare(a, b)));
163+
drawClosed(
164+
ctx,
165+
debug,
166+
loopBetween(percentage, ...prepare(a, b, {rawAngles: false, divideRatio: 1})),
167+
);
152168
};
153169

154170
const testPrepLetters = (percentage: number) => {
@@ -167,7 +183,11 @@ const testPrepLetters = (percentage: number) => {
167183
point(0.65, 0.45, 0, 0, 0, 0),
168184
];
169185
const b: Point[] = blob("", 8, 0.25, {x: 0.65, y: 0.2});
170-
drawClosed(ctx, debug, loopBetween(percentage, ...prepare(a, b)));
186+
drawClosed(
187+
ctx,
188+
debug,
189+
loopBetween(percentage, ...prepare(a, b, {rawAngles: false, divideRatio: 1})),
190+
);
171191
};
172192

173193
const testGen = () => {

0 commit comments

Comments
 (0)