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.

This project idea resurfaced for me after I finished a project for my introductory CS course where we were asked to build a object-oriented simulator to animate fish sprites. The structure of the code allowed a user to input pretty much any kind of sprites (not just limited to fish) so I realized I could use this simulation code to help run my Rock Band-style drum tab visualization.

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.

Demo GIF of the drum tab visualizer

You can check out the code for this project here.