Working with Parts and arrays/Drawing with sound

Hello,

I am fairly new to coding in general and p5.js in particular, so please bear with me as I try to explain my question.

I am trying to create a program that plays music based on reading arrays of ones and zeroes. So far that is going fine.I have created a phrase for each note of the scale. I am triggering a graphic to be drawn when the note sounds (a circle on the screen) and that is also going ok. There are circles in different positions on a horizontal line to represent the different notes, and I can get them to draw when they are supposed to.

What I am wanting to do is actually trigger the circle to start drawing BEFORE it sounds. I would want the circle to start drawing in a different position on screen and kind of ‘land’ where it is supposed to be when the note actually sounds. For example, let’s say that the array has this pattern [0, 0, 0, 1] - So on the first zero in the array it appears, the second and third zero it drops closer to the threshold point, and finally when the note sounds it arrives where it is supposed to be. Think of Guitar Hero to get an idea of what I want it to look like, but I want it to drop with the steps in the part.

The problem is that if the phrase reads 0 (zero) as a rest and won’t trigger the callback function. Is there a way to get it to kind of “scan ahead” and trigger an event to happen earlier in the phrase? I was thinking of using the onStep method to read a segment of the array and use an if statement to determine if there was a one in the segment to trigger the ball appearing but I don’t have any idea how to ask that method to look through a segment of the array.

Any help or ideas would be greatly appreciated.