in src/components/GeniePiano.tsx [106:133]
drawLoop(timestamp: DOMHighResTimeStamp) {
const dy = 4 * (timestamp - this.prevTimestamp) * (1 / 60);
this.prevTimestamp = timestamp;
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
// Remove all the notes that will be off the page;
this.notes = this.notes.filter(
(note) => note.on || note.y < this.contextHeight
);
// Advance all the notes.
for (let i = 0; i < this.notes.length; i++) {
const note = this.notes[i];
// If the note is still on, then its height goes up but it
// doesn't start sliding down yet.
if (note.on) {
note.height += dy;
} else {
note.y += dy;
}
this.context.globalAlpha = 1 - note.y / this.contextHeight;
this.context.fillStyle = note.color;
this.context.fillRect(note.x, note.y, note.width, note.height);
}
if (!this.detached) window.requestAnimationFrame(this.drawLoop.bind(this));
}