I'm working on a step sequencer in Tone.js Link here: https://glitch.com/edit/#!/sustaining-lunar-chard Everything is working well, but I can't seem to figure out why the timing is off. The first note triggers okay if you click the very first column, but after clicking in several notes, it seems to get out of wack.

Related code for triggering audio:

// Here is where we actually play the audio
function onSequenceStep(time, column) {
  // We build up a list of notes, which will equal
  // the numRows. This gets passed into our PolySynth
  let notesToPlay = [];

  // console.log(column) // output the current column
  
  // Go through each row
  data.forEach((row, rowIndex) => {
    // See if the note is "on"
    const isOn = row[column] == 1;
    // If its on, add it to the list of notes to play
    if (isOn) {
      const note = notes[rowIndex];
      notesToPlay.push(note);
    }
  });

  // Trigger a note
  const velocity = random(0.5, 1);
  synth.triggerAttackRelease(notesToPlay, noteInterval, time, velocity);
  Tone.Draw.schedule(function() {
    currentColumn = column;
  }, time);
}

// Code to assist in conversion of shapesList data into format of data array
function splitArrayIntoChunksOfLen(arr, len) {
  var chunks = [], i = 0, n = arr.length;
  while (i < n) {
    chunks.push(arr.slice(i, i += len));
  }
  return chunks;
}

function inputSequencerData() {
  /*
    1. Get shapesList active data into same format as data array ✅
    2. Set value of data array to array of shapesList active data ✅
  */
  // console.log(data);
  let shapesListSplit = splitArrayIntoChunksOfLen(shapesList, 16);

  for (let i = 0; i < shapesListSplit.length; i++) {
    // console.log(shapesListSplit[i]); // Log all rows of values

    // Loop over each shapesListSplit[i] and check if shapes are active
    for (let j = 0; j < shapesListSplit[i].length; j++) {
      if (shapesListSplit[i][j].active == true) {
        data[i][j] = 1;
      } else {
        data[i][j] = 0;
      }
    }
  }
}

This is the audio code being triggered in the draw() function.

  // Clear canvas and redraw
  for (let i = 0; i < shapesList.length; i++) {
    shapesList[i].show();
    inputSequencerData();
  }

It's based off of this example: https://glitch.com/edit/#!/tone-example-sequencer?path=sketch.js%3A223%3A27

Does anyone know what might be happening here? Any help would be much appreciated