Mr. Doobs Harmony Drawing Application ported to Max MSP

Sep 14, 2010 at 1:02pm

Mr. Doobs Harmony Drawing Application ported to Max MSP

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

#52309
Sep 14, 2010 at 6:39pm

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

#187995
Sep 14, 2010 at 7:52pm

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.

#187996
Sep 14, 2010 at 8:28pm

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.

#187997
Sep 18, 2010 at 8:26pm

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

#187998
Sep 20, 2010 at 5:50pm

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

#187999
Oct 5, 2010 at 12:56pm

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.

#188001
Oct 5, 2010 at 5:11pm

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

#188002
Feb 23, 2011 at 4:33pm

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

#188003
Mar 1, 2011 at 12:55pm

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
#188004
Mar 14, 2011 at 10:26am

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

#188005
Apr 5, 2011 at 2:03pm

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

#188006
Sep 6, 2011 at 1:41pm

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().

#188007
Sep 6, 2011 at 4:56pm

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.

#188008
May 28, 2012 at 5:00pm

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

#188009
May 29, 2012 at 1:48pm

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

#188010
May 22, 2013 at 5:39am

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!

#250237
May 29, 2013 at 4:28am

can somebody help me??

#251075
May 30, 2013 at 10:38am

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

#251245

You must be logged in to reply to this topic.