Mr. Doobs Harmony drawing APP ported to MAX / MSP
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.
That’s really cool! 😀
Thanks! 🙂
Nice application 🙂
Do you have information, exist or no a port this application to ActionScript3?
Hi @Vlad
unfortunately, I have not any information about an ActionScript 3 Port. But I think it should not be so difficult to port the code.
I also created a thread about Harmony on the Max/MSP Forum. Joshua enhanced the code and know it is completely running with hardware acceleration 🙂 See the code here
http://cycling74.com/forums/topic.php?id=28503&replies=5#post-141861
This is AWSOME!
I have a question..
Is it possible to raise the quality of the output in the jit.window?
I’m trying to see it in full screen but when I do that I see a low q drawing, with big pixels..
Anyway, Thanks for sharing!
Thx Groz for your feedback! I don’t know how to improve the quality of the output. But I am sure that the MaxMsp people know a simple solution. This thread is right place for your question 😉 http://cycling74.com/forums/topic.php?id=28503&replies=5#post-141861
Happy coding!
Hi,
Have a problem using the Google Chrome app. Harmony. Does not work..is there a support forum I can go to? Any input would be appreciated. Thank’s in advance.
Hi thanks for yopur work , i have modified a little bit your code to meet my requirwments.
http://riccardopedica.tumblr.com/musicdrawingproj
here is the link let me know if you like.
Hi riccardo,
wow very cool project! thanks for sharing!
Best regards,
Flo