contra-renderer/www/js/renderer.ts

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
    }
  } else {
    if (identity.danceRole == DanceRole.Lark) {
      return 240; //blue
    } else {
      return 180; //teal
    }
  }
}

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 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 sat = 100;
  const lum = hueForDancer(identity.setIdentity) === 240 && identity.relativeSet < 2 || identity.relativeSet < 0
              ? 100
              : 20 - identity.relativeSet * 40;
  return `hsl(${hue}, ${sat}%, ${lum}%)`;
}

export class Renderer {
  canvas: HTMLCanvasElement;
  ctx: CanvasRenderingContext2D;
  animation?: Animation;
  extraSets?: number;
  extraLines?: number;
  drawDebug: boolean = false;

  constructor(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) {
    this.canvas = canvas;
    this.ctx = ctx;
  }

  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);
    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);

    if (drawText && identity) {
      this.ctx.save();

      this.ctx.scale(-1, 1);
      this.ctx.rotate(Math.PI);
      this.ctx.fillStyle = colorForDancerLabel(identity);

      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.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.restore();
    }

    this.ctx.fillStyle = backupFillStyle;
  }

  drawDancer(position: DancerSetPosition, identity: ExtendedDancerIdentity, offsetSets: number, drawText: boolean, drawDebug: boolean) {
    this.ctx.save();

    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);

    if (drawDebug) {
      if (this.drawDebug && position.drawDebug) {
        this.ctx.save();
        this.ctx.lineWidth = 0.05;
        position.drawDebug(this.ctx);
        this.ctx.restore();
      }
    } else {
      this.ctx.translate(position.position.x, position.position.y);
      this.ctx.rotate(-degreesToRadians(position.rotation));

      this.drawDancerBody(realIdentity, drawText);

      // Draw arms.
      this.ctx.lineWidth = 0.03;
      if (position.leftArmEnd) {
        this.ctx.beginPath();
        this.ctx.moveTo(leftShoulder.x, leftShoulder.y);
        this.ctx.lineTo(position.leftArmEnd.x, position.leftArmEnd.y);
        this.ctx.stroke();
      }
      if (position.rightArmEnd) {
        this.ctx.beginPath();
        this.ctx.moveTo(rightShoulder.x, rightShoulder.y);
        this.ctx.lineTo(position.rightArmEnd.x, position.rightArmEnd.y);
        this.ctx.stroke();
      }
    }

    this.ctx.restore();
  }

  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, drawText, drawDebug);
    }
  }

  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, drawText ?? true, !!drawDebug);
      }
    }
  }

  drawSetsAtBeat(beat: number) {
    if (!this.animation) throw new Error("Attempted to render before setting animation.");

    this.drawSets(this.animation.positionsAtBeat(beat));
  }

  drawSetsWithTrails(beat: number, progression?: number) {
    if (!this.animation) throw new Error("Attempted to render before setting animation.");

    this.clear();
    const increments = 7;
    const trailLengthInBeats = 1;
    const incrementLength = trailLengthInBeats / increments;
    progression ??= 0;
    const offsetSets = this.animation.progression.y === 0
      ? 0
      : -((progression - (progression % 2)) / 2) / ((this.animation.progression.y * 2) / setDistance);
    for (var i = increments; i >= 0; i--) {
      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, true);
      this.drawSets(positions, offsetSets, i === 0, false);
    }
  }

  playAnimation(bpm: number, start: number, end: number) {
    const startTime = Date.now();
    const msPerBeat = (60*1000)/bpm;
    const drawSetsWithTrails = (b: number) => this.drawSetsWithTrails(b);

    function anim() {
      const now = Date.now();
      const msElapsed = now - startTime;
      const beat = start + msElapsed/msPerBeat;
      if (beat > end) {
        drawSetsWithTrails(end);
      } else {
        drawSetsWithTrails(beat);
        requestAnimationFrame(anim);
      }
    }
    anim();
  }

  clear() {
    // TODO Right way to clear?
    this.ctx.fillStyle = 'white';
    this.ctx.fillRect(-this.canvas.width, -this.canvas.height, 2*this.canvas.width, 2*this.canvas.height);

    const extraLines = this.extraLines ?? 0;
    const extraSets = this.extraSets ?? 0;
    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);
        this.ctx.fillStyle = `hsl(${hue}, ${sat}%, ${lum}%)`;
        this.ctx.translate(relativeLine * lineDistance,
                           relativeSet * setDistance);
        this.ctx.fillRect(-1.975, -1.975, 3.95, 3.95);
        this.ctx.restore();
      }
    }
  }
}