For exploring the JavaScript API in MAX / MSP / Jitter I decided to port the Harmony Web Application by Mr. Doob. I really fall in love with the different brush styles. MAX / MSP / Jitter is pretty cool for doing audio visual stuff, and I think the different brush style might be nice for this. Fortunately, Mr. Doob published the source code and the code is nice, too! Therefore, it was not so difficult to understand the code. During my porting process I had to consider four things:

Object Oriented Programming and working with more JavaScript files don't work so easily in Max/MSP. For the reason of simplicity (and KISS), I decided to write everything in one JavaScript file. JSUI (JavaScrip UI) in Max/MSP does not support the normal drawing functions. I had to port the drawing functions to OPEN GL drawing functions. Which is also positive for the perfomance, I think... The coordinate system is different. I had to transform the Pixel values to the OpenGL coordinate system. MAX /MSP does not support the standard Interval function setInterval. The JavaScript Object Task is the substitute. In the end I think it is a cleaner solution

After dealing with these minor obstacles, everything worked fine. I was quite surprised how good the JavaScript performed in Max/MSP. Furthermore, in combination with Jitter and other available Max/MSP Objects you can rock with JavaScript!

For a better understanding, I created a short introduction video clip. It shows how to use the JSUI Canvas and how to use the programmable input channels. In my example zip file is included one Max patch, which works with colorTracking as an input channel. Choose your cam input, and afterwards click in the camera picture which color should be tracked. In the end it gives you an inspiration how different we can interact with the canvas.

Mr. Doob was disappointed a little bit, how the people used his source code. So please keep in mind his blog post and share your code changes. I also publised my source code on google code.

Download Harmony for Max/MSP/JITTER