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

Compare commits

base: perelman:7c82d8f542ec8db7a70b724f7c7ec14644ddd5db
Branches Tags
perelman:main
perelman:feature/variants
perelman:exp/dancer-colors
perelman:exp/perf/cache-strings
..
compare: perelman:b6f2451920328a3b7c01388bee8d60cac868d183
Branches Tags
perelman:feature/variants
perelman:main
perelman:exp/dancer-colors
perelman:exp/perf/cache-strings

No commits in common. "7c82d8f542ec8db7a70b724f7c7ec14644ddd5db" and "b6f2451920328a3b7c01388bee8d60cac868d183" have entirely different histories.
7c82d8f542 ... b6f2451920

5 changed files with 27 additions and 115 deletions
Show Stats Expand all files Collapse all files

64
www/js/animation.ts
View File

@ -43,15 +43,12 @@ export abstract class AnimationSegment {
return interpolateLinear(progress, this.startPosition.rotation, this.endPosition.rotation);
}
abstract drawDebug(ctx: CanvasRenderingContext2D, progress: number);
positionAtFraction(progress: number) : DancerSetPosition {
return {
position: this.interpolateOffset(progress),
rotation: this.interpolateRotation(progress),
leftArmEnd: this.interpolateHandOffset(progress, Hand.Left),
rightArmEnd: this.interpolateHandOffset(progress, Hand.Right),
drawDebug: (ctx) => this.drawDebug(ctx, progress),
}
}
}
@ -87,13 +84,6 @@ export class LinearAnimationSegment extends AnimationSegment {
override interpolateOffset(progress: number): Offset {
return interpolateLinearOffset(progress, this.startPosition.position, this.endPosition.position);
}
override drawDebug(ctx: CanvasRenderingContext2D, progress: number) {
ctx.beginPath();
ctx.moveTo(this.startPosition.position.x, this.startPosition.position.y);
ctx.lineTo(this.endPosition.position.x, this.endPosition.position.y);
ctx.stroke();
}
}
export interface AnimationTransitionFlags {
@ -216,11 +206,6 @@ export class TransitionAnimationSegment extends AnimationSegment {
return actualHandOffset;
}
override drawDebug(ctx: CanvasRenderingContext2D, progress: number) {
// TODO display transition somehow?
this.actualAnimation.drawDebug(ctx, progress);
}
}
// TODO Not sure this really belongs here instead of on some Semantic* type.
@ -374,25 +359,6 @@ export class RotationAnimationSegment extends AnimationSegment {
return hand === Hand.Left ? leftShoulder : rightShoulder;
}
}
override drawDebug(ctx: CanvasRenderingContext2D, progress: number) {
ctx.beginPath();
const distance = this.closer?.middleDistance ?? this.endDistance;
let start: number, end: number;
if (Math.abs(this.endRotation - this.startRotation) >= 360) {
start = 0;
end = 2 * Math.PI;
} else {
start = degreesToRadians(this.startRotation);
end = degreesToRadians(this.endRotation);
}
ctx.ellipse(this.center.x, this.center.y,
this.xRadius * distance, this.yRadius * distance,
0,
start, end,
this.endRotation < this.startRotation);
ctx.stroke();
}
}
// For "PassBy" and related moves where stepping straight forward would walk into the
@ -406,7 +372,6 @@ export class StepWideLinearAnimationSegment extends AnimationSegment {
private readonly actualCenter: Offset;
private readonly hands: Map<Hand, HandAnimation>;
private readonly facing: "Start" | "Forward";
private readonly midPoint: Offset;
constructor({ beats, startPosition, endPosition, distanceAtMidpoint, otherPath, hands, facing }: {
beats: number;
@ -485,8 +450,6 @@ t = -b/2a
}
this.handTransitionProgress = 0.5 / beats;
this.midPoint = this.interpolateOffset(this.progressCenter ?? 0.5);
}
interpolateOffset(progress: number): Offset {
@ -549,14 +512,6 @@ t = -b/2a
return hand.shoulderPosition();
}
}
override drawDebug(ctx: CanvasRenderingContext2D, progress: number) {
ctx.beginPath();
ctx.moveTo(this.startPosition.position.x, this.startPosition.position.y);
ctx.lineTo(this.midPoint.x, this.midPoint.y);
ctx.lineTo(this.endPosition.position.x, this.endPosition.position.y);
ctx.stroke();
}
}
export class SlideAnimationSegment extends AnimationSegment {
@ -603,15 +558,6 @@ export class SlideAnimationSegment extends AnimationSegment {
const { segment, segmentProgress } = this.selectSegment(progress);
return segment.interpolateRotation(segmentProgress);
}
override drawDebug(ctx: CanvasRenderingContext2D, progress: number) {
// TODO Right way to handle the slide part?
const slide = OffsetTimes(this.slideAmount, progress);
ctx.translate(slide.x, slide.y);
const { segment, segmentProgress } = this.selectSegment(progress);
segment.drawDebug(ctx, segmentProgress);
}
}
export class Animation {
@ -687,17 +633,13 @@ export class Animation {
for (const [id, animationSegments] of this.segments.entries()) {
const basePosition = positionAtBeat(animationSegments, beat);
if (progression !== 0) {
const progressionOffset = OffsetTimes(
this.progression,
progression * (id.coupleRole === CoupleRole.Ones ? 1 : -1));
res.set(id, {
...basePosition,
position: OffsetPlus(
basePosition.position,
progressionOffset),
drawDebug: basePosition.drawDebug ?
(ctx) => { ctx.translate(progressionOffset.x, progressionOffset.y); basePosition.drawDebug!(ctx); }
: undefined
OffsetTimes(
this.progression,
progression * (id.coupleRole === CoupleRole.Ones ? 1 : -1)))
});
} else {
res.set(id, basePosition);

4
www/js/interpreter.ts
View File

@ -1157,7 +1157,7 @@ function moveAsLowLevelMoves({ move, nextMove, startingPos, numProgessions }: {
beats: turnBeats,
endPosition: {
kind: PositionKind.Circle,
which: endWhich,
which: endWhich.swapUpAndDown(),
facing: endWhich.facingAcross(),
hands: prevEnd.hands,
setOffset: prevEnd.setOffset,
@ -1183,7 +1183,7 @@ function moveAsLowLevelMoves({ move, nextMove, startingPos, numProgessions }: {
endPosition: {
...startingPos,
// TODO Does CourtesyTurn always end in same position?
which: startPos.which,
which: startPos.which.swapUpAndDown(),
facing: startPos.which.facingAcross(),
},
movementPattern: {

17
www/js/main.ts
View File

@ -89,13 +89,6 @@ function updateCanvasSettings(arg : ResetCanvasSetting) {
updateCanvasSettings({});
const debugRender = document.createElement('input');
debugRender.type = 'checkbox';
debugRender.checked = r.drawDebug;
const debugRenderLabel = document.createElement('label');
debugRenderLabel.htmlFor = debugRender.id = 'debugRender';
debugRenderLabel.innerText = 'Debug display';
const bpmSelector = document.createElement('input');
bpmSelector.type = 'number';
bpmSelector.value = '180';
@ -154,12 +147,6 @@ function drawAtCurrentBeat() {
.classList.add('currentMove');
}
debugRender.addEventListener('change', (ev) => {
r.drawDebug = debugRender.checked;
drawAtCurrentBeat();
restartAnimation(false);
})
beatSlider.addEventListener('input', (ev) => {
drawAtCurrentBeat();
beatDisplay.innerText = beatSlider.valueAsNumber.toFixed(1);
@ -413,10 +400,6 @@ displaySettingsDiv.appendChild(document.createElement('br'));
displaySettingsDiv.appendChild(extraLinesLabel);
displaySettingsDiv.appendChild(extraLinesSelector);
displaySettingsDiv.appendChild(document.createElement('br'));
displaySettingsDiv.appendChild(debugRender);
displaySettingsDiv.appendChild(debugRenderLabel);
wrapperDiv.appendChild(displaySettingsDiv);
// Default dance is Two Hearts in Time by Isaac Banner. Selected arbitrarily.

24
www/js/renderer.ts
View File

@ -44,7 +44,6 @@ export class Renderer {
animation?: Animation;
extraSets?: number;
extraLines?: number;
drawDebug: boolean = false;
constructor(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D) {
this.canvas = canvas;
@ -84,7 +83,7 @@ export class Renderer {
this.ctx.fillStyle = backupFillStyle;
}
drawDancer(position: DancerSetPosition, identity: ExtendedDancerIdentity, offsetSets: number, drawDebug: boolean) {
drawDancer(position: DancerSetPosition, identity: ExtendedDancerIdentity, offsetSets: number) {
this.ctx.save();
this.ctx.translate(identity.relativeLine * lineDistance,
@ -95,14 +94,6 @@ export class Renderer {
};
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));
@ -122,23 +113,22 @@ export class Renderer {
this.ctx.lineTo(position.rightArmEnd.x, position.rightArmEnd.y);
this.ctx.stroke();
}
}
this.ctx.restore();
}
drawSet(positions: DancersSetPositions, relativeSet: number, relativeLine: number, offsetSets: number, drawDebug: boolean) {
drawSet(positions: DancersSetPositions, relativeSet: number, relativeLine: number, offsetSets: number) {
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);
}
}
drawSets(positions: DancersSetPositions, offsetSets?: number, drawDebug?: boolean) {
drawSets(positions: DancersSetPositions, offsetSets?: number) {
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);
}
}
}
@ -163,9 +153,7 @@ export class Renderer {
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);
this.drawSets(positions, offsetSets, false);
this.drawSets(this.animation.positionsAtBeat(beatToDraw, progression % 2), offsetSets);
}
}

1
www/js/rendererConstants.ts
View File

@ -63,7 +63,6 @@ export interface DancerSetPosition {
rotation: number;
leftArmEnd?: Offset;
rightArmEnd?: Offset;
drawDebug?: (CanvasRenderingContext2D) => void;
}
export type DancersSetPositions = Map<DancerIdentity, DancerSetPosition>;