perelman/contra-renderer
1
0
Fork 1
Code Issues 5 Pull Requests Activity

Compare commits

base: perelman:bc96ecf71333fec2d7c1f925a7f86816210449f8
Branches Tags
perelman:main
perelman:feature/variants
perelman:exp/dancer-colors
perelman:exp/perf/cache-strings
..
compare: perelman:ad3b945307978426b04a895abcbcbbd29ec4262d
Branches Tags
perelman:feature/variants
perelman:main
perelman:exp/dancer-colors
perelman:exp/perf/cache-strings

No commits in common. "bc96ecf71333fec2d7c1f925a7f86816210449f8" and "ad3b945307978426b04a895abcbcbbd29ec4262d" have entirely different histories.
bc96ecf713 ... ad3b945307

2 changed files with 13 additions and 14 deletions
Show Stats Expand all files Collapse all files

2
www/js/main.ts
View File

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

25
www/js/renderer.ts
View File

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