Wednesday, March 25th, 2009

JuicyDrop: More fun with music visualizations

Category: Canvas, JavaScript, Showcase

Jacob Seidelin is at it again, with another music visualization using canvas and more:

A couple of weeks ago I played around with music visualization using JavaScript/canvas and SoundManager2. Well, I couldn’t leave it at that and as I mentioned in the comments, I had an eye on the MilkDrop plugin for Winamp. The result so far is a little Winamp lookalike called JuicyAmp with its own music visualizer JuicyDrop that feeds on Milkdrop preset files.

If you just want to see the pretty colors -> CLICKY. (But please use Chrome or Firefox 3+)

MilkDrop is nice because, although there’s a built-in editor in the plugin, the presets are in plain text. They are basically just lists of variables and equations that, with a bit of mangling, can be evaluated as JavaScript. There are also extensive guides that explain how to author presets and how variables are passed around between the different equations. And, even better, the source code for the plugin was released a couple of years ago.

MilkDrop presets consist of a number of different elements (waveforms, shapes, per-pixel effects, etc). Some of them I haven’t touched at all, but JuicyDrop supports enough at the moment that a good handful of presets run just fine. That said, there are a whole bunch of problems to work out and the presets included were selected because they looked alright and didn’t make it blow up.

I strongly recommend using Chrome for this. Firefox 3 can play too but is probably somewhat slower. There’s something screwy going on with Safari, it’s like it’s refusing to update the display (try holding down a key on your keyboard), I’m not sure what exactly is causing it. Opera is a mixed experience for me and it seems to have a problem with playing the music that I haven’t found the reason for yet.

Posted by Dion Almaer at 4:17 am

4.6 rating from 36 votes


Comments feed TrackBack URI

works fine with opera 9.64 :)

Comment by totoloco — March 25, 2009

Current Firefox beta runs pretty smooth for me as well.

Comment by TNO — March 25, 2009

Cool. I guess I just need a machinery upgrade.

Comment by jseidelin — March 25, 2009

It’s really nice to see smth your eyes are not tired of. Pretty good. :)

Comment by Iflexion — March 25, 2009

Runs really well on FF 3.1 b2 (b3 is completely messed up for me so I plan on sticking on b2 for the foreseeable future).

On a completely unrelated note, you guys still didn’t post anything about Z-War >:(
Oh well, I’ve moved on to a new and much more epic JS game project now anyway :P

Comment by Darkimmortal — March 25, 2009

Leave a comment

You must be logged in to post a comment.