We had wanted to make a simple and clean audio pad web app that would present cool-looking effects to echo the feeling of the music. HackHarvard seemed like a good venue to try to develop something like this, so we decided to go ahead and hack it up.

What it does

The web app allows a user to hit keys on the keyboard that serve as audio pads whose output is reflected by water ripples and a changing sphere in a small interactive environment.

How we built it

We used Evan Wallace's LightGL - an very lightweight implementation of more conventional heavy WebGL libraries - in order to make the web app and shade the various objects as necessary. We also used Evan Wallace's caustic effects in order to correctly simulate fluid dynamics in the app. We obtained the sounds for the sound pads from and worked them into the app with HTML5's audio player.

Challenges we ran into

Both of us were new to LightGL, and it turns out that it is ways different from other WebGL implementations. We ran into some challenges over how to implement some conventional WebGL effects in LightGL, but we overcame them.

Accomplishments that we're proud of

We're proud that we did end up getting at least part of our initial vision implemented and that we were able to overcome some of the difficulties we had with LightGL.

What we learned

We learned, at least at a proficient level, how to use LightGL and also how to define shaders in this system.

What's next for Water Sound Pad

What we want to do next is enhance the visual effects even further with dynamic ambient lighting and add looping functionality.

Built With

Share this project: