www/js/renderer.ts

@@ -1,48 +1,40 @@
 import { Animation } from "./animation.js";
 import { CoupleRole, DanceRole, DancerIdentity, ExtendedDancerIdentity } from "./danceCommon.js";
+import * as exampleAnimations from "./exampleAnimations.js";
 import { DancerSetPosition, DancersSetPositions, dancerHeight, dancerHeightOffset, leftShoulder, lineDistance, rightShoulder, setDistance, degreesToRadians } from "./rendererConstants.js";
 
 
 
-function baseColorForDancer(identity: ExtendedDancerIdentity): {hue: number, sat: number, lum: number} {
-  if (identity.setIdentity.coupleRole == CoupleRole.Ones) {
-    if (identity.relativeSet < 0)
-      return { hue: 340, sat: 67, lum: 56 };
-    if (identity.relativeSet === 0)
-      return { hue: 27, sat: 99, lum: 59 };
-    if (identity.relativeSet > 0)
-      return { hue: 54, sat: 97, lum: 49 };
+function hueForDancer(identity: DancerIdentity): number {
+  if (identity.coupleRole == CoupleRole.Ones) {
+    if (identity.danceRole == DanceRole.Lark) {
+      return 0; //red
+    } else {
+      return 39; //orange
+    }
   } else {
-    if (identity.relativeSet < 0)
-      return { hue: 183, sat: 88, lum: 23 };
-    if (identity.relativeSet === 0)
-      return { hue: 249, sat: 42, lum: 37 };
-    if (identity.relativeSet > 0)
-      return { hue: 13, sat: 33, lum: 29 };
+    if (identity.danceRole == DanceRole.Lark) {
+      return 240; //blue
+    } else {
+      return 180; //teal
+    }
   }
-
-  throw new Error("Unreachable: relativeSet must be one of <, ===, or > 0.");
 }
 
 function colorForDancer(identity: ExtendedDancerIdentity) : string {
-  const baseColor = baseColorForDancer(identity);
-
-  const hue = baseColor.hue;
-  const sat = baseColor.sat - Math.abs(identity.relativeLine * 40);
-  const unclampedLum = baseColor.lum + (Math.abs(identity.relativeSet) <= 1 ? 0 : identity.relativeSet * 20);
+  const hue = hueForDancer(identity.setIdentity);
+  const sat = 100 - Math.abs(identity.relativeLine * 40);
+  const unclampedLum = 50 + identity.relativeSet * 20;
   const lum = unclampedLum < 10 ? 10 : unclampedLum > 90 ? 90 : unclampedLum;
   return `hsl(${hue}, ${sat}%, ${lum}%)`;
 }
 
 function colorForDancerLabel(identity: ExtendedDancerIdentity) : string {
-  const dancerColor = baseColorForDancer(identity);
-  const hue = (dancerColor.hue + 180) % 360;
+  const hue = (hueForDancer(identity.setIdentity) + 180) % 360;
   const sat = 100;
-  const unclampedLum = ((dancerColor.hue >= 215 && dancerColor.hue <= 285) || (identity.relativeSet < 0)
-                      || dancerColor.lum < 40) && identity.relativeSet < 2
+  const lum = hueForDancer(identity.setIdentity) === 240 && identity.relativeSet < 2 || identity.relativeSet < 0
               ? 100
               : 20 - identity.relativeSet * 40;
-  const lum = unclampedLum < 0 ? 0 : unclampedLum > 100 ? 100 : unclampedLum;
   return `hsl(${hue}, ${sat}%, ${lum}%)`;
 }
 
@@ -62,21 +54,13 @@ export class Renderer {
   drawDancerBody(identity: ExtendedDancerIdentity, drawText: boolean) {
     this.ctx.beginPath();
     this.ctx.moveTo(leftShoulder.x, leftShoulder.y);
-    if (identity.setIdentity.danceRole === DanceRole.Robin) {
-      // Draw triangle for robin.
-      this.ctx.lineTo(rightShoulder.x, rightShoulder.y);
-      this.ctx.lineTo(0, dancerHeight-dancerHeightOffset);
-    } else {
-      // Draw dome for lark.
-      this.ctx.arcTo(0, dancerHeight*2-dancerHeightOffset, rightShoulder.x, rightShoulder.y, dancerHeight * 1.5);
-      this.ctx.lineTo(rightShoulder.x, rightShoulder.y);
-    }
+    this.ctx.lineTo(rightShoulder.x, rightShoulder.y);
+    this.ctx.lineTo(0, dancerHeight-dancerHeightOffset);
     this.ctx.fill();
 
     // Draw dot at origin to identify "center" point of dancer.
     const backupFillStyle = this.ctx.fillStyle;
     this.ctx.fillStyle = 'black';
-
     const pointSize = 0.05;
     this.ctx.fillRect(-pointSize/2, -pointSize/2, pointSize, pointSize);
 
@@ -215,9 +199,9 @@ export class Renderer {
     for (var relativeLine = -extraLines; relativeLine <= extraLines; relativeLine++) {
       for (var relativeSet = -extraSets; relativeSet <= extraSets; relativeSet++) {
         this.ctx.save();
-        const hue = 0;
-        const sat = 0;
-        const lum = Math.min(98, 90 + Math.abs(Math.abs(relativeSet) + Math.abs(relativeLine)) * 5);
+        const hue = (relativeLine + relativeSet) % 2 === 0 ? 60 : 170;
+        const sat = 100 - Math.abs(relativeLine * 40);
+        const lum = Math.min(98, 90 + Math.abs(relativeSet) * 5);
         this.ctx.fillStyle = `hsl(${hue}, ${sat}%, ${lum}%)`;
         this.ctx.translate(relativeLine * lineDistance,
                            relativeSet * setDistance);