Mating Processingjs and JQuery

In my latest weekend project, I wanted to integrate jquery with processingjs. The way processingjs is developed, it’s requires a little trick to fire up processingjs at will. Though after much struggling I came up with following.

$(document).ready(function() {

dom_el = $("#canvas").get(0);

code = ''; /* fetch source string using ajax or hard code it */

stage.set_stage(function() {
stage_instance = new Processing(dom_el, code);

Code is pretty much self explanatory. The real essence is the Processing() constructor. It takes two arguments viz: Canvas DOM element and the source code string.

You can always fetch source code from a file using $.ajax(). I am using $.get();

Visual Music

Lately, I have been playing around with soundcloud and soundmanager. I always wanted to create an web based music player. Only restriction was that streaming api was not available. Anyways, Soundlcloud’s api seems pretty interesting. I also tried and apis, though i didn’t explored them much.

I am using Anton Lindqvist‘s soundcloud api wrapper along with soundmanager which happens to be the best api wrapper I was able to find for soundcloud so far.

soundcloud + soundmanager = free music 24x7!

I wanted to take to the next level. I wanted to add visualization to it. I still remember when winamp was released, it took world by a storm. It’s visualizations played an important role in it’s success.

And since, most of browsers now support html5 canvas. Then why not create a visualizer! I immediately started looking for canvas frameworks. Found a lot of them, but then decided to use processingjs. I am still playing around with processing. So, currently I don’t anything to show. Though I was able to make a ball bounce here and there based on DSP data. Will try to share some of the source code soon!

It’s a weekend project therefore, won’t be able to devote much time on it. And, since my last attempt to roll out a working product got stalled royally, I have decided to go slow with this one.