Performance: reduce trail count from 10 to 7.

www/js/main.ts

@@ -41,7 +41,7 @@ const beatDisplay = document.createElement('span');
 beatDisplay.className = 'beatDisplay';
 beatDisplay.innerText = '0.0';
 
-const ctx = canvas.getContext('2d')!;
+const ctx = canvas.getContext('2d', { alpha: false })!;
 const r = new renderer.Renderer(canvas, ctx);
 
 const defaultSetSizeInPx = canvas.offsetHeight / 3;

www/js/renderer.ts

@@ -51,7 +51,7 @@ export class Renderer {
     this.ctx = ctx;
   }
 
-  drawDancerBody(identity: ExtendedDancerIdentity) {
+  drawDancerBody(identity: ExtendedDancerIdentity, drawText: boolean) {
     this.ctx.beginPath();
     this.ctx.moveTo(leftShoulder.x, leftShoulder.y);
     this.ctx.lineTo(rightShoulder.x, rightShoulder.y);
@@ -64,10 +64,11 @@ export class Renderer {
     const pointSize = 0.05;
     this.ctx.fillRect(-pointSize/2, -pointSize/2, pointSize, pointSize);
 
-    if (identity) {
+    if (drawText && identity) {
       this.ctx.save();
+
       this.ctx.scale(-1, 1);
-      this.ctx.rotate(degreesToRadians(180));
+      this.ctx.rotate(Math.PI);
       this.ctx.fillStyle = colorForDancerLabel(identity);
 
       this.ctx.font = '0.15px sans'
@@ -84,7 +85,7 @@ export class Renderer {
     this.ctx.fillStyle = backupFillStyle;
   }
 
-  drawDancer(position: DancerSetPosition, identity: ExtendedDancerIdentity, offsetSets: number, drawDebug: boolean) {
+  drawDancer(position: DancerSetPosition, identity: ExtendedDancerIdentity, offsetSets: number, drawText: boolean, drawDebug: boolean) {
     this.ctx.save();
 
     this.ctx.translate(identity.relativeLine * lineDistance,
@@ -106,7 +107,7 @@ export class Renderer {
       this.ctx.translate(position.position.x, position.position.y);
       this.ctx.rotate(-degreesToRadians(position.rotation));
 
-      this.drawDancerBody(realIdentity);
+      this.drawDancerBody(realIdentity, drawText);
 
       // Draw arms.
       this.ctx.lineWidth = 0.03;
@@ -127,18 +128,18 @@ export class Renderer {
     this.ctx.restore();
   }
 
-  drawSet(positions: DancersSetPositions, relativeSet: number, relativeLine: number, offsetSets: number, drawDebug: boolean) {
+  drawSet(positions: DancersSetPositions, relativeSet: number, relativeLine: number, offsetSets: number, drawText: boolean, drawDebug: boolean) {
     for (const entry of positions.entries()) {
-      this.drawDancer(entry[1], { setIdentity: entry[0], relativeLine, relativeSet }, offsetSets, drawDebug);
+      this.drawDancer(entry[1], { setIdentity: entry[0], relativeLine, relativeSet }, offsetSets, drawText, drawDebug);
     }
   }
 
-  drawSets(positions: DancersSetPositions, offsetSets?: number, drawDebug?: boolean) {
+  drawSets(positions: DancersSetPositions, offsetSets?: number, drawText?: boolean, drawDebug?: boolean) {
     const extraSets = this.extraSets ?? 0;
     const extraLines = this.extraLines ?? 0;
     for (var relativeLine = -extraLines; relativeLine <= extraLines; relativeLine++) {
       for (var relativeSet = -extraSets; relativeSet <= extraSets; relativeSet++) {
-        this.drawSet(positions, relativeSet, relativeLine, offsetSets ?? 0, !!drawDebug);
+        this.drawSet(positions, relativeSet, relativeLine, offsetSets ?? 0, drawText ?? true, !!drawDebug);
       }
     }
   }
@@ -153,7 +154,7 @@ export class Renderer {
     if (!this.animation) throw new Error("Attempted to render before setting animation.");
 
     this.clear();
-    const increments = 10;
+    const increments = 7;
     const trailLengthInBeats = 1;
     const incrementLength = trailLengthInBeats / increments;
     progression ??= 0;
@@ -164,8 +165,8 @@ export class Renderer {
       const beatToDraw = beat - i*incrementLength;
       this.ctx.globalAlpha = i == 0 ? 1 : (1 - i/increments)*0.3;
       const positions = this.animation.positionsAtBeat(beatToDraw, progression % 2);
-      if (this.drawDebug) this.drawSets(positions, offsetSets, true);
+      if (this.drawDebug) this.drawSets(positions, offsetSets, true, true);
-      this.drawSets(positions, offsetSets, false);
+      this.drawSets(positions, offsetSets, i === 0, false);
     }
   }