in src/components/GeniePiano.tsx [88:117]
width: parseFloat(width),
height: 0,
color: CONSTANTS.COLORS[button],
on: true,
};
this.notes.push(noteToPaint);
return noteToPaint;
}
stopNote(noteToPaint) {
noteToPaint.on = false;
}
startDrawLoop() {
this.prevTimestamp = performance.now();
window.requestAnimationFrame(this.drawLoop.bind(this));
}
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++) {