City Lights

City Lights is a music visualizer made using the modern WebGL and Web Audio APIs. The user can play songs from a playlist that is provided or use their own MP3s. Fireworks will shoot off over the city landscape according to the frequency graph of the sound file. Whether or not a fireworks is shot out, it's size, as well as it's velocity is determined by checking the difference between sections of the song, such as going from a low note to a high note.

My goal in coming to McHacks was to learn something new that I didn't know before, but not so new that it was out of my depth and impossible to make within 24-hours. As a game engineer, I was already very familiar with OpenGL, so I decided to make something using those skills. When I found WebGL, I realized that it shared many functions with OpenGL. However, it uses Javascript and is a web application, things I'm not overly familiar with and always wanted to learn more about. This project is a culmination of myself wanting to create something aesthetically pleasing yet technically challenging.

Github: https://github.com/wheressswaldo/McHacks-2015

Live: http://cityworks.me

Note: Laptops using dual graphics card such as NVIDIA Optimus should run the application using the high performance graphics processor in order to maximize performance.

Built With

• css
• html
• javascript
• web-audio
• webgl