Sound Visualization and DancerJS

Last night, I found Jordan Santell’s DancerJS, a high-level audio API created to make cool visualizations. I was impressed and wanted to make something with it by using the onKick and offKick callbacks. When I started looking at the code, however, I did not like the way it was all put together. I’m not referring to the actual JavaScript code, but just the amount of individual scripts loaded in the main HTML example. I guess it’s a small personal annoyance, but right away I thought that all the necessary Dancer JavaScript code should live in one file and the code that tells DanceJS to do something should be inlined into the html file. That way you can quickly see how everything works and reuse.

So, first, I combined everything into one script called dancer-combined.js. Now, the default demo of DancerJS is pretty awesome, Jordan uses the three.js JavaScript 3D library to make a really neat effect. For my demo, I just want to keep it simple. I was browsing around JS1K demos recently and there are many awesome JavaScript visualizations there that I could combine into this demo. I decided on Yuri Ivatchkocitch’s Colorful Wavy Waves.

The wavy waves repsond to a click on the page so I just put the contents of the click function into the dancerJS onKick callback. Since I am only using the kick callbacks, I should point out that SoundManager also has these and I don’t even need to use DancerJS for such a demo. But, DanceJS does come with other neat features and functions if you are trying to do something more complex. Check out the demo and you can view the source to see how it was put together. Have you done anything with DancerJS?