Forums > Javascript

Mr. Doobs Harmony Drawing Application ported to Max MSP

September 14, 2010 | 1:02 pm

Hello people,

I fall in love with the brush style of Mr. Doobs drawing app Harmony ( http://mrdoob.com/projects/harmony/ ). I am Interactive Art Developer and quite new in Max/MSP. Motivated by extending my skills I ported it to Javascript in Max MSP. Now I want to share my results with you. You can download and see my code on my blog

http://blog.derhess.de/2010/07/08/mr-doobs-harmony-drawing-app-ported-to-max-msp/

or just have a short look on my vimeo introduction video

I would be happy about some feedback from you.

Best regards,
Florian


September 14, 2010 | 6:39 pm

Hi Florian,

Very cool! Thanks for sharing. Since JSUI uses the software renderer, I’ve taken a minute to quickly convert your code to work with jit.gl.sketch, which is hardware accelerated. I’ve attached to this post. The main differences are:

- define jit.window, jit.gl.render, jit.gl.sketch, in the JS code
- create a resetsketch() function to appropriately create and simulate the sketch.default2d() method
- create a JitterListener and callback function to simulate the onclick and ondrag behavior of JSUI, and reset the sketch if the window is resized

Hopefully this is of general use for people trying to port these sort of JSUI based applications to jit.gl.sketch.

Cheers,
Joshua


September 14, 2010 | 7:52 pm

this is really great florian!

thanks for the sketch port joshua.

fyi, it looks like setting the brush to ribbon breaks the javascript (causes an error that requires re-instantiation).
didin’t really investigate, but thought i’d pass that along.


September 14, 2010 | 8:28 pm

Thanks for pointing this out Rob. I’ve solved the ribbon and a few other problems (blending for squares and rounded squares, z-axis issues for squares, and potential window lingering on patcher close).

Here’s the revised version.


September 18, 2010 | 8:26 pm

Hey Joshua

thanks for the improvement! The use of the Code depends on the GNU General Public License Version 3. Mr Doob was a little bit sad how people used his code. For more information here is his blog post about it

http://mrdoob.com/blog/post/696


September 20, 2010 | 5:50 pm

Hi,

thanks a lot for sharing harmony…

Joshua, i just change your last code to have alpha background.
I change the harmony name to ‘Draw’ cause i m using ‘harmony’ name for sound effect.

Now i need to make a texure to use it in an other gl context.
using jit.gl.asyncread object seem to be a bad way.
May be it’s possible to do that inside the javascript… but i don’t know how…

Thanks for you for your help and sorry for my bad english !

fxw


October 5, 2010 | 12:56 pm

Joshua, where could one read the documentation of the javascript interface to jitter that you have used here? I have several pretty complex jsui based application (with many different jsui objects working together for better life on earth) and I would love to get my CPU cycles back.

will this approach work with jit.pwindow instead of jit.window? I have my jsui’s all layout inside one patch and I would like to keep it this way.


October 5, 2010 | 5:11 pm

See the jitter JavaScript tutorials. Yes it will work with a named jit.pwindow created in the patch.


February 23, 2011 | 4:33 pm

Hi

I extended the harmony component a little bit more. Now you can use multiple brushes at the same time. Source code and an introduction video are on my blog:
http://blog.derhess.de/2011/02/23/harmony-in-max-msp-with-multiple-brushes/

I used this component for my installation: Sound Drawings

http://blog.derhess.de/2011/02/18/interactive-media-installation-sound-drawings/

It worked quite good. But after 30min had to restart the application. It depends what you want to do. In my case it was stable enough…

Greetz
Flo


March 1, 2011 | 12:55 pm

Hello,
I have tried to go out from the window jsui,
but i can’t find the way to keep the quality of the window jsui.

somebody could help me?
Thank’s a lot!

s

Attachments:
  1. harmonyDrawing.js

March 14, 2011 | 10:26 am

Hello,

I try to manage the definition of the image
I try to have :
· a small window of drawing 640/480
· a rendu of 1200/800

I find no runway
Could use me?

thank’s


April 5, 2011 | 2:03 pm

Very interesting but maybe it will be more interesting to superpose drawing to video.


September 6, 2011 | 1:41 pm

Great example!

I am stumbling on transferring this to a jit.pwindow that already exists in the patch. I’m probably making a basic error. What is the correct way of getting a reference to the underlying Jitter object of a jit.pwindow?

I’m trying the following: start the global code with


var pWindow = null,
pListener = null;

I don’t try to get a reference to pWindow until loadbang time, on the basis that the jit.pwindow may not exist earlier than that. So, in my loadbang method I have


pWindow = this.patcher.getnamed(pWindowVarName); // Wrong??
pListener = new JitterListener(pWindow.getregisterdname(), WindowCallback);

with pWindowVarName as the jit.pwindow’s scripting name (attribute varname). WindowCallback is defined elsewhere in the code.

However I’m getting a Javascript TypeError on pWindow.getregisteredname().


September 6, 2011 | 4:56 pm

OK, after more searching I found this thread as an example of Javascript handling all the Jitter stuff except for the jit.pwindow.

It seems what I was doing wrong was assuming that I needed to access the jit.pwindow from inside my Javascript code. I already have the OpenGL context symbol, so I can just

pListener = new JitterListener(pGLContext, WindowCallback);

I had wanted to be able to set some of the attributes of the jit.pwindow inside my Javascript, but aside from getregisteredname() I think I can get at everything from the Max wrapper object that this.patcher.getnamed() returns.

Sorry if this seems terribly confusing. I’m plowing through a lot of JScript/Jitter right now and I’m a bit confused myself.


May 28, 2012 | 5:00 pm

Hi,

I have two questions regarding Joshua’s latest implementation:

1) When using any brush other than "Simple, Squares, and Round_Squares" the colors are really pale as if the alpha was set very low, although alpha is set to 1. How can I deal with this issue? so that colors appear as vivid as selected by the color-picker.

2) When an area of the canvas has been colored, and a new brushstroke is performed over that colored area, the new brushstroke will not overlay the old ones. How can I ensure that new brushstrokes are rendered over older ones.

Any help will be much appreciated.

Thanks


May 29, 2012 | 1:48 pm

Hi,

Regarding my earlier post (please see above) I resolved these issues and I thought of sharing the solutions:

1) For some reason passing the alpha value procedurally would not work for me, so I hard code the alpha value to 1. and it works fine:
function mapColor2RGBA(r,g,b,a)
{
var rgbaArray = new Array();
rgbaArray[0] = r/255.;
rgbaArray[1] = g/255.;
rgbaArray[2] = b/255.;
rgbaArray[3] = 1.;
return rgbaArray;
}

2) In order to overlay new brush strokes over older ones you need to add the following command on the "resetsketct(){}" function:
gldepthmask();

Please see attached file

Thanks


May 22, 2013 | 5:39 am

Hello Forum

looking at this patch has lead me to joy and confusion.
I really like this patch and i would like to do my own sound drawings.
following this thread and trying out things resulted in many different files on my computer and personal confusion cause:
some js scripts change their behavior
for example the js. from joshua and the ones adapted from it put out errors when using the ribbon brush (which i like very much and dont want to miss it) (error=js executing without a valid JS object). but i am not sure if the did this always? sometimes they worked…

I am very new to js. Actually this patch made me start to get into and i went through the basic tutorials in order to modify this; for exmaple i wanted to fuse the gl.script with the capability of multi brushes. To get a good working foundation i wanted to use harmonyDrawingJitter2.js (which seemed to be rid of all "bugs"), but as i mentioned before i didn’t achieve to get it working properly. I tried to copy paste the js to new names to exclude mismatch errors, tested it on win and mac (newest max version 32bit) and didn’t succeed with my simple goal to have a js. which makes use of gl and th e multi brushes!

so my question is if some experienced programmer could help me ?
could i hire someone?
also to the ongoing thread about the new forum software i would appreciate a marking system for open questions and solved and unsolved problems, cause i have the feeling often some threads will be overlooked cause somebody allready replied…and also it would be interesting how old forum topics due to old max version changed or could be made more effectively?
for example i would be interested if something like this could be done more effeciently with the new jit.mgraphics object?

kind regards!


May 29, 2013 | 4:28 am

can somebody help me??


May 30, 2013 | 10:38 am

This rocks. Can’t wait to try it out.


Viewing 19 posts - 1 through 19 (of 19 total)