www/js/animation.ts

@@ -25,10 +25,10 @@ export abstract class AnimationSegment {
     this.endPosition = endPosition;
   }
 
-  abstract interpolateOffset(progress: number);
+  protected abstract interpolateOffset(progress: number);
 
   // TODO Not sure this interpolation is actually right for arms...
-  interpolateHandOffset(progress: number, hand: Hand) : Offset | undefined {
+  protected interpolateHandOffset(progress: number, hand: Hand) : Offset | undefined {
     let prev = hand === Hand.Left ? this.startPosition.leftArmEnd : this.startPosition.rightArmEnd;
     let next = hand === Hand.Left ? this.endPosition.leftArmEnd : this.endPosition.rightArmEnd;
 
@@ -39,7 +39,7 @@ export abstract class AnimationSegment {
     return interpolateLinearOffset(progress, prev, next);
   }
 
-  interpolateRotation(progress: number) {
+  protected interpolateRotation(progress: number) {
     return interpolateLinear(progress, this.startPosition.rotation, this.endPosition.rotation);
   }
 
@@ -65,120 +65,19 @@ function interpolateLinearOffset(progress: number, prev: Offset, next: Offset):
 }
 
 export class LinearAnimationSegment extends AnimationSegment {
-  constructor({ beats, startPosition, endPosition }: {
-    beats: number;
-    startPosition: DancerSetPosition;
-    endPosition: DancerSetPosition;
-  }) {
+  constructor(beats: number, startPosition: DancerSetPosition, endPosition: DancerSetPosition) {
     super(beats, startPosition, endPosition);
   }
 
   public static standStill(startAndEndPosition: DancerSetPosition, beats?: number) {
-    return new LinearAnimationSegment({
-      beats: beats ?? 0,
-      startPosition: startAndEndPosition,
-      endPosition: startAndEndPosition
-    });
+    return new LinearAnimationSegment(beats ?? 0, startAndEndPosition, startAndEndPosition);
   }
 
-  override interpolateOffset(progress: number) {
+  protected interpolateOffset(progress: number) {
     return interpolateLinearOffset(progress, this.startPosition.position, this.endPosition.position);
   }
 }
 
-export interface AnimationTransitionFlags {
-  rotation?: boolean;
-  hands?: boolean;
-}
-export class TransitionAnimationSegment extends AnimationSegment {
-  private readonly actualAnimation: AnimationSegment;
-  private readonly flags: AnimationTransitionFlags;
-  private readonly startTransitionProgress: number;
-  private readonly endTransitionProgress: number;
-  private readonly startRotation: number;
-  private readonly endRotation: number;
-
-  constructor({ actualAnimation, flags, startTransitionBeats, endTransitionBeats }: {
-    actualAnimation: AnimationSegment;
-    flags: AnimationTransitionFlags;
-    startTransitionBeats: number;
-    endTransitionBeats?: number;
-  }) {
-    super(actualAnimation.beats, actualAnimation.startPosition, actualAnimation.endPosition);
-
-    this.actualAnimation = actualAnimation;
-    this.flags = flags;
-    this.startTransitionProgress = startTransitionBeats / actualAnimation.beats;
-    this.endTransitionProgress = endTransitionBeats === undefined ? this.startTransitionProgress : endTransitionBeats / actualAnimation.beats;
-
-    this.startRotation = this.startPosition.rotation;
-    this.endRotation = this.endPosition.rotation;
-    if (this.flags.rotation) {
-      const actualStart = this.actualAnimation.interpolateRotation(0);
-      const actualEnd = this.actualAnimation.interpolateRotation(1);
-
-      const rotationPositive = actualEnd > actualStart;
-
-      const transitionStart = this.actualAnimation.interpolateRotation(this.startTransitionProgress);
-      const transitionEnd = this.actualAnimation.interpolateRotation(1 - this.endTransitionProgress);
-
-      if (rotationPositive) {
-        while (transitionStart < this.startRotation) {
-          this.startRotation -= 360;
-        }
-        while (transitionEnd > this.endRotation) {
-          this.endRotation += 360;
-        }
-      } else {
-        while (transitionStart > this.startRotation) {
-          this.startRotation += 360;
-        }
-        while (transitionEnd < this.endRotation) {
-          this.endRotation -= 360;
-        }
-      }
-    }
-  }
-
-  override interpolateOffset(progress: number) {
-    return this.actualAnimation.interpolateOffset(progress);
-  }
-
-  override interpolateRotation(progress: number): number {
-    const actualRotation = this.actualAnimation.interpolateRotation(progress);
-
-    if (this.flags.rotation) {
-      if (progress < this.startTransitionProgress) {
-        return interpolateLinear(progress / this.startTransitionProgress, this.startRotation, actualRotation);
-      } else if ((1 - progress) < this.endTransitionProgress) {
-        return interpolateLinear((1 - progress) / this.endTransitionProgress, this.endRotation, actualRotation);
-      }
-    }
-
-    return actualRotation;
-  }
-
-  override interpolateHandOffset(progress: number, hand: Hand): Offset | undefined {
-    const actualHandOffset = this.actualAnimation.interpolateHandOffset(progress, hand);
-
-    if (this.flags.hands) {
-      if (progress < this.startTransitionProgress) {
-        const startHand = hand === Hand.Left
-          ? this.startPosition.leftArmEnd ?? leftShoulder
-          : this.startPosition.rightArmEnd ?? rightShoulder;
-        return interpolateLinearOffset(progress / this.startTransitionProgress, startHand, actualHandOffset ?? hand.shoulderPosition());
-      } else if (1 - progress < this.endTransitionProgress) {
-        const endHand = hand === Hand.Left
-          ? this.endPosition.leftArmEnd ?? leftShoulder
-          : this.endPosition.rightArmEnd ?? rightShoulder;
-        return interpolateLinearOffset((1 - progress) / this.endTransitionProgress, endHand, actualHandOffset ?? hand.shoulderPosition());
-      }
-    }
-
-    return actualHandOffset;
-  }
-}
-
 // TODO Not sure this really belongs here instead of on some Semantic* type.
 export enum RotationAnimationFacing {
   Linear = "Linear", // Default, linearly interpolate.
@@ -196,7 +95,12 @@ interface Closer {
   transitionProgress: number,
 }
 export interface HandAnimation {
-  kind: "Linear" | "Center" | "None" | "Start" | "End"
+  kind: "Linear" | "Center" | "None",
+  transitionBeats?: number,
+}
+interface HandAnimationInternal {
+  kind: "Linear" | "Center" | "None",
+  transitionProgress: number,
 }
 
 export class RotationAnimationSegment extends AnimationSegment {
@@ -210,21 +114,27 @@ export class RotationAnimationSegment extends AnimationSegment {
   private readonly facing: RotationAnimationFacing;
   private readonly startFacing: Rotation;
   private readonly closer?: Closer;
-  private readonly hands: Map<Hand, HandAnimation>;
+  private readonly hands: Map<Hand, HandAnimationInternal>;
+  private readonly rotationTransitionProgress: number;
 
-  constructor({ beats, startPosition, endPosition, rotation, around, facing, closer, hands }: {
-    beats: number;
-    startPosition: DancerSetPosition;
-    endPosition: DancerSetPosition;
-    rotation: number; around: RotationAround;
-    facing: RotationAnimationFacing;
-    closer?: CloserDuringRotation;
-    hands?: Map<Hand, HandAnimation>;
-  }) {
+  constructor(beats: number, startPosition: DancerSetPosition, endPosition: DancerSetPosition,
+              rotation: number, around: RotationAround, facing: RotationAnimationFacing,
+              closer?: CloserDuringRotation, hands?: Map<Hand, HandAnimation>,
+              rotationTransitionBeats?: number) {
     super(beats, startPosition, endPosition);
 
-    this.hands = new Map<Hand, HandAnimation>(
-      [Hand.Left, Hand.Right].map(h => [h, hands?.get(h) ?? { kind: "Linear" }]));
+    function convertHandAnimation(anim: HandAnimation | undefined): HandAnimationInternal {
+      if (!anim) {
+        return { kind: "Linear", transitionProgress: 0 };
+      } else {
+        return {
+          ...anim,
+          transitionProgress: (anim.transitionBeats ?? 0) / beats
+        }
+      }
+    }
+    this.hands = new Map<Hand, HandAnimationInternal>(
+      [Hand.Left, Hand.Right].map(h => [h, convertHandAnimation(hands?.get(h))]));
 
     this.facing = facing;
     this.xRadius = around.width / 2;
@@ -238,6 +148,7 @@ export class RotationAnimationSegment extends AnimationSegment {
       // Canvas rotation is backwards of what we expect, so take the negative here.
       return -radiansToDegrees(radians);
     }
+    this.rotationTransitionProgress = (rotationTransitionBeats ?? 0) / beats;
     this.startRotation = positionToDegrees(startPosition.position);
     this.startFacing = startPosition.rotation;
     const actualRotation = normalizeRotation(positionToDegrees(endPosition.position) - this.startRotation,
@@ -258,7 +169,7 @@ export class RotationAnimationSegment extends AnimationSegment {
     }
   }
 
-  override interpolateOffset(progress: number) {
+  protected interpolateOffset(progress: number) {
     const radians = -degreesToRadians(interpolateLinear(progress, this.startRotation, this.endRotation));
     let distance: number;
     if (!this.closer) {
@@ -278,7 +189,7 @@ export class RotationAnimationSegment extends AnimationSegment {
     }
   }
 
-  override interpolateRotation(progress: number): number {
+  protected interpolateRotation(progress: number): number {
     if (this.facing === RotationAnimationFacing.Linear) {
       return super.interpolateRotation(progress);
     } else {
@@ -286,27 +197,41 @@ export class RotationAnimationSegment extends AnimationSegment {
       let rotation : number;
       switch (this.facing) {
         case RotationAnimationFacing.Center:
-          return degrees - 90;
+          rotation = degrees - 90;
+          break;
         case RotationAnimationFacing.CenterRelative:
-          return degrees - this.startRotation + this.startFacing;
+          rotation = degrees - this.startRotation + this.startFacing;
+          break;
         case RotationAnimationFacing.Forward:
-          return degrees + 180;
+          rotation = degrees + 180;
+          break;
         case RotationAnimationFacing.Backward:
-          return degrees;
+          rotation = degrees;
+          break;
+      }
+
+      if (progress < this.rotationTransitionProgress) {
+        return interpolateLinear(progress / this.rotationTransitionProgress, this.startRotation, rotation);
+      } else if ((1 - progress) < this.rotationTransitionProgress) {
+        return interpolateLinear((1 - progress) / this.rotationTransitionProgress, this.endRotation, rotation);
+      } else {
+        return rotation;
       }
     }
   }
 
-  override interpolateHandOffset(progress: number, hand: Hand): Offset | undefined {
-    const handAnim : HandAnimation = this.hands.get(hand)!;
+  protected interpolateHandOffset(progress: number, hand: Hand): Offset | undefined {
+    const handAnim : HandAnimationInternal = this.hands.get(hand)!;
     let middlePos : Offset;
     switch (handAnim.kind) {
-      case "Start":
-        return hand === Hand.Left ? this.startPosition.leftArmEnd : this.startPosition.rightArmEnd;
-      case "End":
-        return hand === Hand.Left ? this.endPosition.leftArmEnd : this.endPosition.rightArmEnd;
       case "Linear":
+        if (handAnim.transitionProgress === 0) {
           return super.interpolateHandOffset(progress, hand);
+        } else if (progress < handAnim.transitionProgress) {
+          return super.interpolateHandOffset(progress / handAnim.transitionProgress, hand);
+        } else {
+          return super.interpolateHandOffset(1, hand);
+        }
       case "Center":
         const position = this.interpolateOffset(progress);
         const offset = {
@@ -319,10 +244,28 @@ export class RotationAnimationSegment extends AnimationSegment {
           x: -Math.cos(rotation) * offset.x + Math.sin(rotation) * offset.y,
           y: -Math.sin(rotation) * offset.x - Math.cos(rotation) * offset.y,
         }
-        return centerPos;
+        middlePos = centerPos;
+        break;
       case "None":
-        return hand === Hand.Left ? leftShoulder : rightShoulder;
+        middlePos = hand === Hand.Left ? leftShoulder : rightShoulder;
+        break;
     }
+
+    if (handAnim.transitionProgress) {
+      if (progress < handAnim.transitionProgress) {
+        const startHand = hand === Hand.Left
+          ? this.startPosition.leftArmEnd ?? leftShoulder
+          : this.startPosition.rightArmEnd ?? rightShoulder;
+        return interpolateLinearOffset(progress / handAnim.transitionProgress, startHand, middlePos);
+      } else if (1 - progress < handAnim.transitionProgress) {
+        const endHand = hand === Hand.Left
+          ? this.endPosition.leftArmEnd ?? leftShoulder
+          : this.endPosition.rightArmEnd ?? rightShoulder;
+        return interpolateLinearOffset((1 - progress) / handAnim.transitionProgress, endHand, middlePos);
+      }
+    }
+
+    return middlePos;
   }
 }
 

www/js/lowLevelMove.ts

@@ -287,13 +287,11 @@ export function animateLowLevelMove(move: LowLevelMove): animation.AnimationSegm
           + JSON.stringify(move.startPosition) + ", end=" + JSON.stringify(move.endPosition);
         }
         return [
-          new animation.LinearAnimationSegment({
-            beats: move.beats,
-            startPosition: startSetPosition,
-            endPosition: {
+          new animation.LinearAnimationSegment(move.beats,
+            startSetPosition,
+            {
               ...endSetPosition,
               rotation: startSetPosition.rotation + rotation,
-            }
             }),
         ];
       case SemanticAnimationKind.Circle:
@@ -302,27 +300,22 @@ export function animateLowLevelMove(move: LowLevelMove): animation.AnimationSegm
         }
 
         return [
-          new animation.TransitionAnimationSegment({
-            actualAnimation: new animation.RotationAnimationSegment({
-              beats: move.beats,
-              startPosition: startSetPosition,
-              endPosition: endSetPosition,
-              rotation: move.movementPattern.places * 90,
-              around: {
+          new animation.RotationAnimationSegment(move.beats,
+            startSetPosition,
+            endSetPosition,
+            move.movementPattern.places * 90,
+            {
               center: CenterOfSet(move.startPosition.setOffset, move.startPosition.lineOffset),
               width: setWidth,
               height: setHeight,
             },
-              facing: animation.RotationAnimationFacing.Center, closer: undefined, hands: new Map<Hand, animation.HandAnimation>([
-                [Hand.Left, { kind: "End" }],
-                [Hand.Right, { kind: "End" }],
+            animation.RotationAnimationFacing.Center,
+            undefined,
+            new Map<Hand, animation.HandAnimation>([
+              [Hand.Left, { kind: "Linear", transitionBeats: 1 }],
+              [Hand.Right, { kind: "Linear", transitionBeats: 1 }],
             ])
-            }),
-            flags: {
-              hands: true
-            },
-            startTransitionBeats: 1
-          }),
+          ),
         ];
       case SemanticAnimationKind.DoSiDo:
         // TODO Rotation
@@ -333,18 +326,17 @@ export function animateLowLevelMove(move: LowLevelMove): animation.AnimationSegm
         }
         const center = CenterOf(move.startPosition.which.leftRightSide(), move.startPosition.setOffset, move.startPosition.lineOffset);
         return [
-          new animation.RotationAnimationSegment({
-            beats: move.beats,
-            startPosition: startSetPosition,
-            endPosition: endSetPosition,
-            rotation: move.movementPattern.amount,
-            around: {
+          new animation.RotationAnimationSegment(move.beats,
+            startSetPosition,
+            endSetPosition,
+            move.movementPattern.amount,
+            {
               center,
               width: setWidth / 3,
               height: setHeight,
             },
-            facing: animation.RotationAnimationFacing.Linear
-          }),
+            animation.RotationAnimationFacing.Linear,
+          ),
         ];
       case SemanticAnimationKind.RotateAround:
         // TODO Rotation
@@ -357,37 +349,31 @@ export function animateLowLevelMove(move: LowLevelMove): animation.AnimationSegm
         const rotateCenter = CenterOf(move.movementPattern.around, move.startPosition.setOffset, move.startPosition.lineOffset);
         const hands = move.movementPattern.byHand
           ? new Map<Hand, animation.HandAnimation>([
-            [move.movementPattern.byHand, { kind: "Center" }],
-            [move.movementPattern.byHand.opposite(), { kind: "None" }],
+            [move.movementPattern.byHand, { kind: "Center", transitionBeats: 1 }],
+            [move.movementPattern.byHand.opposite(), { kind: "None", transitionBeats: 1 }],
           ])
           : new Map<Hand, animation.HandAnimation>([
-            [Hand.Left, { kind: "None" }],
-            [Hand.Right, { kind: "None" }],
+            [Hand.Left, { kind: "None", transitionBeats: 1 }],
+            [Hand.Right, { kind: "None", transitionBeats: 1 }],
           ]);
         return [
-          new animation.TransitionAnimationSegment({
-            actualAnimation: new animation.RotationAnimationSegment({
-              beats: move.beats,
-              startPosition: startSetPosition,
-              endPosition: endSetPosition,
-              rotation: move.movementPattern.minAmount,
-              around: {
+          new animation.RotationAnimationSegment(move.beats,
+            startSetPosition,
+            endSetPosition,
+            move.movementPattern.minAmount,
+            {
               center: rotateCenter,
               width: setWidth / 5,
               height: setHeight / 5,
             },
-              facing: animation.RotationAnimationFacing.Center, closer: {
+            animation.RotationAnimationFacing.Center,
+            {
               transitionBeats: 1,
               minDistance: setWidth,
             },
-              hands
-            }),
-            flags: {
-              hands: true,
-              rotation: true
-            },
-            startTransitionBeats: 1
-          }),
+            hands,
+            1,
+          ),
         ];
       case SemanticAnimationKind.Swing:
         if (move.startPosition.kind !== PositionKind.Circle || move.endPosition.kind !== PositionKind.Circle) {
@@ -414,33 +400,29 @@ export function animateLowLevelMove(move: LowLevelMove): animation.AnimationSegm
         });
 
         return [
-          new animation.LinearAnimationSegment({
-            beats: 1,
-            startPosition: startSetPosition,
-            endPosition: swingStart,
-          }),
-          new animation.RotationAnimationSegment({
-            beats: move.beats - 3,
-            startPosition: swingStart,
-            endPosition: beforeUnfold,
-            rotation: move.movementPattern.minAmount,
-            around: {
+          new animation.LinearAnimationSegment(1,
+            startSetPosition,
+            swingStart,
+          ),
+          new animation.RotationAnimationSegment(move.beats - 3,
+            swingStart,
+            beforeUnfold,
+            move.movementPattern.minAmount, // TODO base minAmount on number of beats?
+            {
               center: rotateSwingCenter,
               width: setWidth / 5,
               height: setHeight / 5,
             },
-            facing: animation.RotationAnimationFacing.CenterRelative
-          }),
-          new animation.LinearAnimationSegment({
-            beats: 1,
-            startPosition: beforeUnfold,
-            endPosition: unfolded,
-          }),
-          new animation.LinearAnimationSegment({
-            beats: 1,
-            startPosition: unfolded,
-            endPosition: endSetPosition,
-          }),
+            animation.RotationAnimationFacing.CenterRelative,
+          ),
+          new animation.LinearAnimationSegment(1,
+            beforeUnfold,
+            unfolded,
+          ),
+          new animation.LinearAnimationSegment(1,
+            unfolded,
+            endSetPosition,
+          ),
         ];
       case SemanticAnimationKind.TwirlSwap:
         const twirlCenter =
@@ -453,26 +435,25 @@ export function animateLowLevelMove(move: LowLevelMove): animation.AnimationSegm
           rightArmEnd: startSetPosition.rightArmEnd === undefined ? undefined : endSetPosition.rightArmEnd,
         };
         return [
-          new animation.RotationAnimationSegment({
-            beats: move.beats - 1,
-            startPosition: startSetPosition,
-            endPosition: {
+          new animation.RotationAnimationSegment(move.beats - 1,
+            startSetPosition,
+            {
               ...postTwirlPos,
               rotation: endSetPosition.rotation - (move.startPosition.hands?.has(Hand.Left) ? 360 : 0)
             },
-            rotation: 180,
-            around: {
+            180,
+            {
               center: twirlCenter,
               width: aroundTopOrBottom ? setWidth : setWidth / 4,
               height: aroundTopOrBottom ? setHeight / 4 : setHeight,
             },
-            facing: animation.RotationAnimationFacing.Linear, closer: undefined, hands: new Map<Hand, animation.HandAnimation>([[[...move.startPosition.hands!.keys()][0], { kind: "Center" }]])
-          }),
-          new animation.LinearAnimationSegment({
-            beats: 1,
-            startPosition: postTwirlPos,
-            endPosition: endSetPosition
-          })
+            animation.RotationAnimationFacing.Linear,
+            undefined,
+            new Map<Hand, animation.HandAnimation>([[[...move.startPosition.hands!.keys()][0], {kind: "Center"}]]),
+          ),
+          new animation.LinearAnimationSegment(1,
+            postTwirlPos,
+            endSetPosition)
         ];
     }