Home > english, Programming > Mr. Doobs Harmony drawing APP ported to MAX / MSP

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:

  1. 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.
  2. 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...
  3. The coordinate system is different. I had to transform the Pixel values to the OpenGL coordinate system.
  4. 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

  1. July 9th, 2010 at 00:40 | #1

    That’s really cool! ๐Ÿ˜€

  2. admin
    July 9th, 2010 at 11:35 | #2

    Thanks! ๐Ÿ™‚

  3. Vlad
    July 12th, 2010 at 15:50 | #3

    Nice application ๐Ÿ™‚
    Do you have information, exist or no a port this application to ActionScript3?

  4. admin
    September 18th, 2010 at 22:29 | #4

    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

  5. Groz
    April 11th, 2012 at 18:05 | #5

    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!

  6. admin
    April 11th, 2012 at 18:47 | #6

    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!

  7. priscilla
    April 16th, 2012 at 00:35 | #7

    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.

  8. January 8th, 2014 at 16:12 | #8

    Hi thanks for yopur work , i have modified a little bit your code to meet my requirwments.
    here is the link let me know if you like.

  9. admin
    January 11th, 2014 at 13:00 | #9

    Hi riccardo,

    wow very cool project! thanks for sharing!

    Best regards,

  1. February 17th, 2011 at 14:47 | #1
  2. February 18th, 2011 at 13:06 | #2
  3. February 23rd, 2011 at 18:30 | #3
  4. August 9th, 2011 at 12:06 | #4