Try It!

https://www.letssign.xyz

When you press play, it will

1. give you four beats of count in
2. the computer will play the rhythm for four beats
3. you need to play the rhythm for four beats
4. Steps 2 and 3 repeat to the end

Inspiration

All of the members of Programmatical Advantage are musicians. We met through our high school ensembles, and were not short of ideas when it came to music. When the music prompt was announced, we decided to look at tackling some of the biggest issues we had faced as musicians. This led to the birth of Retro Rhythm, as a way to make rhythms -the most tedious learning curve in music- fun.

What it does

Retro Rhythm is a simple premise - you click to the beat pattern it shows you. However, the beat patterns are far from easy. Whether it's high tempos, complex rhythms, endless mode, or all three, there is no shortage of challenges in this game.

How we built it

We began by splitting up the work 50/50. One duo would work on the Astro/React frontend, while the other duo would work on the FastAPI backend. The backend focuses on the tempo, random rhythm generation, creating and streaming a PNG file for the music to the frontend, and connecting to MongoDB for a leaderboard system.

Challenges

For the frontend there were two primary challenges, authentication and the game runtime. Authentication was difficult both due to the sensitive nature of user tokens as well as the challenge of integrating it with the backend. We routed the user to the backend, retrieved their token, encrypted it with an expiration date, set it as a cookie, and then redirected the user back to the frontend, all while ensuring a seamless experience. The game runtime ended up being very complex as it cannot run synchronously. While the user is playing the game, the browser has to already be fetching the next set. In addition, while some scoring is on the user click, a significant amount is done due to the lack of a user click. This variety of scoring methods led to a very large number of different entry points for the scoring method and resulted in some difficulty getting everything running properly. Additionally, since there were a significant amount of closures, there were some interesting JavaScript behaviors to do with saving state in closures that ended up making it impossible to use a single async method to control the game loop, further increasing difficulty.

The primary challenge the backend ran into was bad documentation. Many of the music related plugins with python, especially the python wrapper for Lilypond, hadn't been updated to the latest python version and had suboptimal documentation.

Accomplishments that we're proud of

• Building a fully functional rhythm game in 48 hours. (While getting sleep!)
• Learning how to use Astro, React, and FastAPI to develop a full scale game
• Learning how to use GitHub OAuth and integrating it with the frontend and backend

What we learned

This was the first time most of us were competing in a hackathon, and the deadline approached much faster than it seemed. It was also the first time any of us had worked with FastAPI, Lilypond, or the Abjad music library, so the learning curves for the packages were an early hurdle that had us struggling. By halfway through, we had quickly picked up how to effectively use the packages, letting us create our rhythm generation algorithm and the entire backend.

What’s next for Retro Rhythm

In the future, we hope to implement several other features, such as a hard mode for each level, more measures able to be played at once, mobile support, and better rhythm readability in general.

Built With

• abjad
• astro
• css
• fastapi
• javascript
• lilypond
• mongodb
• python
• typescript