We wanted to create an artistic and interactive project that featured an interesting use of audio and color in order to awaken a state of inspiration, trance, and euphoria in all players and participants. We also wanted to personalize gaming in a way by giving users the ability to choose their own background music for the game - but beware, your favorite song might just generate the most difficult level! How long can you last?

What it does

Procedurally generates a "soundscape" in which you navigate a spaceship to "beat the song." y

How I built it

HTML5 Canvas and a lot of patience. Using the WebAudio API we were able to analyze the frequencies and bands of the music and generate graphics for it. The Soundcloud API enabled us to dynamically acquire music without needing to store any audio on our local server.

Challenges I ran into

The WebAudio API is extremely new with minimal widespread use and documentation. Audio analysis itself is incredibly challenging and one of the major endeavors in modern computer science research. Therefore we needed to try a more simple approach. The Soundcloud API also presented challenges as there is a yet unfixed bug in their API that creates an extra challenge for us.

Accomplishments that I'm proud of

The entire project was beyond our comfort zone. Using Canvas to this extent an animating so many different, layered components, and keeping track of the collisions and monitoring for different conditions was brutal. Ultimately worth it.

What I learned

JavaScript, jQuery, HTML5 Canvas, WebAudio API, Soundcloud API

What's next for SoundScape

More game mechanics, better animations and graphics!

Share this project: