Growing up, I absolutely loved playing Rock Band, especially on the drums. RB was my first introduction to playing the drums, and my hours upon hours of gameplay inspired me to eventually pick up some real sticks and learn the actual drums. As helpful and accessible as drum tab generally is, I found myself wishing for some way to turn this drum tab into a Rock Band/Guitar Hero-style visualization (vertical scrolling notes timed up to the music) to help make sight-reading tab a bit easier. Across a number of years, I tried a variety of approaches—at one point I made a flash game where I could play along with manually transcribed drum tab using the actual RB drum kit—but was never super successful.

With this simulation engine pretty much ready to go already, I just had to write some code that would convert drum tab into a valid input for the simulation. This primarily involves just reading drum tab and spacing out the corresponding notes/dots based on timing and which drum/cymbal is to be played. There are a lot of variations in styling for drum tab, so initially I’ve just made it work on a specific sample style with the intention of expanding this in the future.

Putting this all together finally gave me something similar to what I had been dreaming of for so long. Yes, the use of a fish simulator is maybe a little janky, and yes, the tab interpreter/converter works on a limited set of drum tabs, but this is a big step. This has been a dream project for awhile so I imagine there will be some continued work and improvements as I use the tool more over time. For now, I’m just happy to have a custom animation for my favorite song to play on the drums.

You can check out the code for this project here.