Attempt at using variants for swing.

* Different shapes for larks/robins: robins are now domes, larks still
   triangles.
 * Related: partners the same color (might try very close colors?)
 * Attempt to have a color scheme so Ones are warm colors and Twos are
   cool colors to make neighbor vs. shadow interactions more clear at a
   glance.

www/index.html

@@ -58,29 +58,58 @@
         position: sticky;
         top: 0;
       }
-      th.Ones.Lark {
-        background-color: hsl(0, 80%, 50%);
+
+      th.Ones {
+        background-color: hsl(27, 99%, 59%);
       }
-      td.Ones.Lark {
-        background-color: hsl(0, 90%, 70%);
+      td.Ones {
+        background-color: hsl(27, 99%, 85%);
       }
-      th.Ones.Robin {
-        background-color: hsl(39, 80%, 50%);
+      th.Twos {
+        background-color: hsl(249, 42%, 57%);
       }
-      td.Ones.Robin {
-        background-color: hsl(39, 90%, 70%);
+      td.Twos {
+        background-color: hsl(249, 52%, 85%);
       }
-      th.Twos.Lark {
-        background-color: hsl(240, 70%, 65%);
+
+      th.Lark::before {
+        content: "◠";
+        text-decoration: line-through;
+        padding-right: 1ex;
       }
-      td.Twos.Lark {
-        background-color: hsl(240, 90%, 80%);
+      th.Robin::before {
+        content: "△";
+        padding-right: 1ex;
       }
-      th.Twos.Robin {
-        background-color: hsl(180, 80%, 50%);
+
+      td.Lark.Ones {
+        background:
+          radial-gradient(circle at bottom left, hsl(27, 99%, 75%) 15%, transparent 16%),
+          radial-gradient(circle at bottom right, hsl(27, 99%, 75%) 15%, transparent 16%),
+          hsl(27, 99%, 85%);
+        background-size: 6em 3em;
       }
-      td.Twos.Robin {
-        background-color: hsl(180, 90%, 70%);
+      td.Lark.Twos {
+        background:
+          radial-gradient(circle at bottom left, hsl(249, 42%, 75%) 15%, transparent 16%),
+          radial-gradient(circle at bottom right,hsl(249, 42%, 75%) 15%, transparent 16%),
+          hsl(249, 52%, 85%);
+        background-size: 6em 3em;
+      }
+
+      td.Robin.Ones {
+        background:
+          linear-gradient(45deg,hsl(27, 99%, 75%) 10%, transparent 10%),
+          linear-gradient(135deg, transparent 90%,hsl(27, 99%, 75%) 90%),
+          hsl(27, 99%, 85%);
+        background-size: 6em 3em;
+      }
+      td.Robin.Twos {
+        background:
+          linear-gradient(45deg,hsl(249, 42%, 75%) 10%, transparent 10%),
+          linear-gradient(135deg, transparent 90%,hsl(249, 42%, 75%) 90%),
+          hsl(249, 52%, 85%);
+        background-size: 6em 3em;
       }
 
       .move {

www/js/renderer.ts

@@ -1,40 +1,48 @@
 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 hueForDancer(identity: DancerIdentity): number {
-  if (identity.coupleRole == CoupleRole.Ones) {
-    if (identity.danceRole == DanceRole.Lark) {
-      return 0; //red
-    } else {
-      return 39; //orange
-    }
+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 };
   } else {
-    if (identity.danceRole == DanceRole.Lark) {
-      return 240; //blue
-    } else {
-      return 180; //teal
-    }
+    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 };
   }
+
+  throw new Error("Unreachable: relativeSet must be one of <, ===, or > 0.");
 }
 
 function colorForDancer(identity: ExtendedDancerIdentity) : string {
-  const hue = hueForDancer(identity.setIdentity);
-  const sat = 100 - Math.abs(identity.relativeLine * 40);
-  const unclampedLum = 50 + identity.relativeSet * 20;
+  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 lum = unclampedLum < 10 ? 10 : unclampedLum > 90 ? 90 : unclampedLum;
   return `hsl(${hue}, ${sat}%, ${lum}%)`;
 }
 
 function colorForDancerLabel(identity: ExtendedDancerIdentity) : string {
-  const hue = (hueForDancer(identity.setIdentity) + 180) % 360;
+  const dancerColor = baseColorForDancer(identity);
+  const hue = (dancerColor.hue + 180) % 360;
   const sat = 100;
-  const lum = hueForDancer(identity.setIdentity) === 240 && identity.relativeSet < 2 || identity.relativeSet < 0
+  const unclampedLum = ((dancerColor.hue >= 215 && dancerColor.hue <= 285) || (identity.relativeSet < 0)
+                      || dancerColor.lum < 40) && identity.relativeSet < 2
               ? 100
               : 20 - identity.relativeSet * 40;
+  const lum = unclampedLum < 0 ? 0 : unclampedLum > 100 ? 100 : unclampedLum;
   return `hsl(${hue}, ${sat}%, ${lum}%)`;
 }
 
@@ -54,13 +62,21 @@ export class Renderer {
   drawDancerBody(identity: ExtendedDancerIdentity, drawText: boolean) {
     this.ctx.beginPath();
     this.ctx.moveTo(leftShoulder.x, leftShoulder.y);
-    this.ctx.lineTo(rightShoulder.x, rightShoulder.y);
-    this.ctx.lineTo(0, dancerHeight-dancerHeightOffset);
+    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.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);
 
@@ -199,9 +215,9 @@ export class Renderer {
     for (var relativeLine = -extraLines; relativeLine <= extraLines; relativeLine++) {
       for (var relativeSet = -extraSets; relativeSet <= extraSets; relativeSet++) {
         this.ctx.save();
-        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);
+        const hue = 0;
+        const sat = 0;
+        const lum = Math.min(98, 90 + Math.abs(Math.abs(relativeSet) + Math.abs(relativeLine)) * 5);
         this.ctx.fillStyle = `hsl(${hue}, ${sat}%, ${lum}%)`;
         this.ctx.translate(relativeLine * lineDistance,
                            relativeSet * setDistance);