[WIP] Performance: aggressively cache strings in renderer.

www/js/renderer.ts

@@ -21,23 +21,73 @@ function hueForDancer(identity: DancerIdentity): number {
   }
 }
 
-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 colorForDancerCache = new Map<DancerIdentity, string[]>(
+  DancerIdentity.all().map(id => [id,
+    [...Array(49).keys()]
+    .map(reverseColorCacheKey)
+    .map(({relativeSet, relativeLine}) => colorForDancer(id, relativeSet, relativeLine))]));
+
+const colorForDancerLabelCache = new Map<DancerIdentity, string[]>(
+  DancerIdentity.all().map(id => [id,
+    [...Array(49).keys()]
+    .map(i => reverseColorCacheKey(i))
+    .map(({relativeSet, relativeLine}) => colorForDancerLabel(id, relativeSet, relativeLine))]));
+
+function colorCacheKey(relativeSet: number, relativeLine: number) {
+  relativeSet = Math.max(-3, Math.min(3, relativeSet)) + 3;
+  relativeLine = Math.max(-3, Math.min(3, relativeLine)) + 3;
+
+  return relativeLine * 7 + relativeSet;
+}
+function reverseColorCacheKey(key: number): { relativeSet: number, relativeLine: number } {
+  return {
+    relativeSet: (key % 7) - 3,
+    relativeLine: Math.floor(key / 7) - 3,
+  }
+}
+
+function colorForDancer(setIdentity: DancerIdentity, relativeSet: number, relativeLine: number) : string {
+  const hue = hueForDancer(setIdentity);
+  const sat = 100 - Math.abs(relativeLine * 40);
+  const unclampedLum = 50 + 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;
+function colorForDancerCached(setIdentity: DancerIdentity, relativeSet: number, relativeLine: number) : string {
+  return colorForDancerCache.get(setIdentity)![colorCacheKey(relativeSet, relativeLine)];
+}
+
+function colorForDancerById(identity: ExtendedDancerIdentity) : string {
+  return colorForDancer(identity.setIdentity, identity.relativeSet, identity.relativeLine);
+}
+
+function colorForDancerLabel(setIdentity: DancerIdentity, relativeSet: number, relativeLine: number) : string {
+  const dancerHue = hueForDancer(setIdentity);
+  const hue = (dancerHue + 180) % 360;
   const sat = 100;
-  const lum = hueForDancer(identity.setIdentity) === 240 && identity.relativeSet < 2 || identity.relativeSet < 0
+  const lum = dancerHue === 240 && relativeSet < 2 || relativeSet < 0
               ? 100
-              : 20 - identity.relativeSet * 40;
+              : 20 - relativeSet * 40;
   return `hsl(${hue}, ${sat}%, ${lum}%)`;
 }
 
+function colorForDancerLabelCached(setIdentity: DancerIdentity, relativeSet: number, relativeLine: number) : string {
+  return colorForDancerLabelCache.get(setIdentity)![colorCacheKey(relativeSet, relativeLine)];
+}
+
+function colorForDancerLabelById(identity: ExtendedDancerIdentity) : string {
+  return colorForDancerLabel(identity.setIdentity, identity.relativeSet, identity.relativeLine);
+}
+
+const positiveNumberStrings: string[] = [...Array(10).keys()].map(i => i.toString());
+const negativeNumberStrings: string[] = [...Array(10).keys()].map(i => (-i).toString());
+function cachedToString(smallNumber: number) {
+  if (Math.abs(smallNumber) >= 10) return smallNumber.toString();
+  if (smallNumber < 0) return negativeNumberStrings[-smallNumber];
+  else return positiveNumberStrings[smallNumber];
+}
+
 export class Renderer {
   canvas: HTMLCanvasElement;
   ctx: CanvasRenderingContext2D;
@@ -51,7 +101,7 @@ export class Renderer {
     this.ctx = ctx;
   }
 
-  drawDancerBody(identity: ExtendedDancerIdentity, drawText: boolean) {
+  drawDancerBody(setIdentity: DancerIdentity, relativeSet: number, relativeLine: number, drawText: boolean) {
     this.ctx.beginPath();
     this.ctx.moveTo(leftShoulder.x, leftShoulder.y);
     this.ctx.lineTo(rightShoulder.x, rightShoulder.y);
@@ -64,20 +114,20 @@ export class Renderer {
     const pointSize = 0.05;
     this.ctx.fillRect(-pointSize/2, -pointSize/2, pointSize, pointSize);
 
-    if (drawText && identity) {
+    if (drawText) {
       this.ctx.save();
 
       this.ctx.scale(-1, 1);
       this.ctx.rotate(Math.PI);
-      this.ctx.fillStyle = colorForDancerLabel(identity);
+      this.ctx.fillStyle = colorForDancerLabelCached(setIdentity, relativeSet, relativeLine);
 
       this.ctx.font = '0.15px sans'
-      this.ctx.fillText(identity.setIdentity.danceRole === DanceRole.Lark ? 'L' : 'R', -0.14, +0.04);
-      this.ctx.fillText(identity.setIdentity.coupleRole === CoupleRole.Ones ? '1' : '2', +0.04, +0.04);
+      this.ctx.fillText(setIdentity.danceRole === DanceRole.Lark ? 'L' : 'R', -0.14, +0.04);
+      this.ctx.fillText(setIdentity.coupleRole === CoupleRole.Ones ? '1' : '2', +0.04, +0.04);
 
       this.ctx.font = '0.1px sans'
-      this.ctx.fillText(identity.relativeLine.toString(), +0.14, +0.04);
-      this.ctx.fillText(identity.relativeSet.toString(), -0.22, +0.04);
+      this.ctx.fillText(cachedToString(relativeLine), +0.14, +0.04);
+      this.ctx.fillText(cachedToString(relativeSet), -0.22, +0.04);
 
       this.ctx.restore();
     }
@@ -90,11 +140,8 @@ export class Renderer {
 
     this.ctx.translate(identity.relativeLine * lineDistance,
                         identity.relativeSet * setDistance);
-    const realIdentity = {
-      ...identity,
-      relativeSet: identity.relativeSet + (offsetSets * (identity.setIdentity.coupleRole === CoupleRole.Ones ? 1 : -1))
-    };
-    this.ctx.fillStyle = this.ctx.strokeStyle = colorForDancer(realIdentity);
+    const relativeSet = identity.relativeSet + (offsetSets * (identity.setIdentity.coupleRole === CoupleRole.Ones ? 1 : -1));
+    this.ctx.fillStyle = this.ctx.strokeStyle = colorForDancerCached(identity.setIdentity, relativeSet, identity.relativeLine);
 
     if (drawDebug) {
       if (this.drawDebug && position.drawDebug) {
@@ -107,7 +154,7 @@ export class Renderer {
       this.ctx.translate(position.position.x, position.position.y);
       this.ctx.rotate(-degreesToRadians(position.rotation));
 
-      this.drawDancerBody(realIdentity, drawText);
+      this.drawDancerBody(identity.setIdentity, relativeSet, identity.relativeLine, drawText);
 
       // Draw arms.
       this.ctx.lineWidth = 0.03;