bogsworth/contra-renderer
1
0
Fork 0
forked from perelman/contra-renderer
Code Pull Requests Activity

Compare commits

merge into: bogsworth:main
Branches Tags
bogsworth:main
bogsworth:feature/variants
bogsworth:exp/dancer-colors
bogsworth:exp/perf/cache-strings
perelman:feature/variants
perelman:main
perelman:exp/dancer-colors
perelman:exp/perf/cache-strings
...
pull from: bogsworth:exp/perf/cache-strings
Branches Tags
bogsworth:feature/variants
bogsworth:main
bogsworth:exp/dancer-colors
bogsworth:exp/perf/cache-strings
perelman:feature/variants
perelman:main
perelman:exp/dancer-colors
perelman:exp/perf/cache-strings

1 Commits
main ... exp/perf/c

Author SHA1 Message Date
Daniel Perelman
7deda1af48 [WIP] Performance: aggressively cache strings in renderer. 2023-10-09 14:52:52 -07:00
1 changed files with 68 additions and 21 deletions
Show Stats Expand all files Collapse all files

89
www/js/renderer.ts
View File

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