Moon Tunes

Gameplay1
Gameplay2
Start screen

Inspiration

Our main inspiration was a website called Patatap which follows a similar format albeit we used space visuals and went for a revamped design.

What it does

Moon Tunes transforms your keyboard into a cosmic controller where each of your keys is synced to a sound such as a scale and a visual such as a comet wizzing by.

How we built it

We built Moon Tunes by first taking vocal chops from some of our favorite drum n' base tracks and edm songs and re-pitching them to better fit into our website. From there we designed svg planets and other space oddities to be displayed and animated them into the website. Lastly we made a function to map all the keys to animation plays and sounds while adding an event listener to wait for a key press.

Challenges we ran into

We initially tried using a library called Howler.js in order to get the audio to play but with no avail we switched to default React implementation of audio. Next time we would try to use it to improve our website's performance.

Accomplishments that we're proud of

We're proud of using React to make a polished version of the website concept that we liked and experimented with libraries with Howler to make our website more dynamic. Despite the intensive timeframe we had to code this in, we were able to come up with an idea that was relatively polished.

What we learned

Turning audio into a format where the user can readily interact and create with. Additionally, we learned how to contribute to a hackathon-like workflow as it was our first time hacking together something like this.