drawLoop()

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));
  }