Forums > Javascript
getting the jit.gl.sketch alpha channel functioning in javascript
February 24, 2014 | 5:03 pm
Hello,
I’m looking to do some procedural drawing in Max/MSP using simple shapes. As it’s a lot easier to make particle systems using line code (for me at least), I’d like to keep the drawing commands within the js object, with some commands to be changeable according to the rest of the patch in real-time.
I really want to use transparencies, but I can’t seem to get the alpha channel working. I have stripped the patch down to the basics here. Can anyone see where I might be missing something?
The patch should be below, with js file added as attachment.
Thanks!
Sara
– Pasted Max Patch, click to expand. –
Copy all of the following text. Then, in Max, select New From Clipboard.
----------begin_max5_patcher----------
{
"boxes" : [ {
"box" : {
"maxclass" : "newobj",
"text" : "loadbang",
"numinlets" : 1,
"fontsize" : 12.0,
"numoutlets" : 1,
"outlettype" : [ "bang" ],
"patching_rect" : [ 226.0, 68.0, 60.0, 20.0 ],
"id" : "obj-41",
"fontname" : "Arial"
}
}
, {
"box" : {
"maxclass" : "button",
"numinlets" : 1,
"numoutlets" : 1,
"outlettype" : [ "bang" ],
"patching_rect" : [ 226.0, 101.0, 20.0, 20.0 ],
"id" : "obj-40"
}
}
, {
"box" : {
"maxclass" : "message",
"text" : "1",
"numinlets" : 2,
"fontsize" : 12.0,
"numoutlets" : 1,
"outlettype" : [ "" ],
"patching_rect" : [ 580.0, 138.0, 32.5, 18.0 ],
"id" : "obj-38",
"fontname" : "Arial"
}
}
, {
"box" : {
"maxclass" : "message",
"text" : "0",
"numinlets" : 2,
"fontsize" : 12.0,
"numoutlets" : 1,
"outlettype" : [ "" ],
"patching_rect" : [ 522.0, 138.0, 32.5, 18.0 ],
"id" : "obj-37",
"fontname" : "Arial"
}
}
, {
"box" : {
"maxclass" : "message",
"text" : "0.5",
"numinlets" : 2,
"fontsize" : 12.0,
"numoutlets" : 1,
"outlettype" : [ "" ],
"patching_rect" : [ 462.0, 138.0, 32.5, 18.0 ],
"id" : "obj-36",
"fontname" : "Arial"
}
}
, {
"box" : {
"maxclass" : "message",
"text" : "0.5",
"numinlets" : 2,
"fontsize" : 12.0,
"numoutlets" : 1,
"outlettype" : [ "" ],
"patching_rect" : [ 375.0, 138.0, 32.5, 18.0 ],
"id" : "obj-35",
"fontname" : "Arial"
}
}
, {
"box" : {
"maxclass" : "message",
"text" : "1",
"numinlets" : 2,
"fontsize" : 12.0,
"numoutlets" : 1,
"outlettype" : [ "" ],
"patching_rect" : [ 325.0, 138.0, 32.5, 18.0 ],
"id" : "obj-34",
"fontname" : "Arial"
}
}
, {
"box" : {
"maxclass" : "message",
"text" : "0",
"numinlets" : 2,
"fontsize" : 12.0,
"numoutlets" : 1,
"outlettype" : [ "" ],
"patching_rect" : [ 275.0, 138.0, 32.5, 18.0 ],
"id" : "obj-33",
"fontname" : "Arial"
}
}
, {
"box" : {
"maxclass" : "message",
"text" : "0",
"numinlets" : 2,
"fontsize" : 12.0,
"numoutlets" : 1,
"outlettype" : [ "" ],
"patching_rect" : [ 226.0, 138.0, 32.5, 18.0 ],
"id" : "obj-32",
"fontname" : "Arial"
}
}
, {
"box" : {
"maxclass" : "comment",
"text" : "shape (circle(0) or square(1))",
"linecount" : 2,
"numinlets" : 1,
"fontsize" : 12.0,
"numoutlets" : 0,
"frgb" : 0.0,
"patching_rect" : [ 580.0, 176.0, 98.0, 33.0 ],
"id" : "obj-30",
"fontname" : "Arial"
}
}
, {
"box" : {
"maxclass" : "comment",
"text" : "rotation",
"numinlets" : 1,
"fontsize" : 12.0,
"numoutlets" : 0,
"frgb" : 0.0,
"patching_rect" : [ 522.0, 176.0, 50.0, 20.0 ],
"id" : "obj-28",
"fontname" : "Arial"
}
}
, {
"box" : {
"maxclass" : "comment",
"text" : "size ",
"numinlets" : 1,
"fontsize" : 12.0,
"numoutlets" : 0,
"frgb" : 0.0,
"patching_rect" : [ 462.0, 176.0, 50.0, 20.0 ],
"id" : "obj-26",
"fontname" : "Arial"
}
}
, {
"box" : {
"maxclass" : "message",
"text" : "1",
"numinlets" : 2,
"fontsize" : 12.0,
"numoutlets" : 1,
"outlettype" : [ "" ],
"patching_rect" : [ 309.0, 282.0, 50.0, 18.0 ],
"id" : "obj-24",
"fontname" : "Arial"
}
}
, {
"box" : {
"maxclass" : "number",
"numinlets" : 1,
"fontsize" : 12.0,
"numoutlets" : 2,
"outlettype" : [ "int", "bang" ],
"patching_rect" : [ 82.0, 176.0, 50.0, 20.0 ],
"id" : "obj-8",
"fontname" : "Arial",
"parameter_enable" : 0
}
}
, {
"box" : {
"maxclass" : "button",
"numinlets" : 1,
"numoutlets" : 1,
"outlettype" : [ "bang" ],
"patching_rect" : [ 190.0, 209.0, 20.0, 20.0 ],
"id" : "obj-20"
}
}
, {
"box" : {
"maxclass" : "newobj",
"text" : "jit.window test",
"numinlets" : 1,
"fontsize" : 12.0,
"numoutlets" : 2,
"outlettype" : [ "bang", "" ],
"patching_rect" : [ 30.0, 337.0, 85.0, 20.0 ],
"id" : "obj-19",
"fontname" : "Arial"
}
}
, {
"box" : {
"maxclass" : "newobj",
"text" : "jit.gl.render test @blend_enable 1 @depth_enable 0",
"numinlets" : 1,
"fontsize" : 12.0,
"numoutlets" : 2,
"outlettype" : [ "bang", "" ],
"patching_rect" : [ 30.0, 308.0, 288.0, 20.0 ],
"id" : "obj-1",
"fontname" : "Arial"
}
}
, {
"box" : {
"maxclass" : "newobj",
"text" : "t b erase",
"numinlets" : 1,
"fontsize" : 12.0,
"numoutlets" : 2,
"outlettype" : [ "bang", "erase" ],
"patching_rect" : [ 30.0, 252.0, 57.0, 20.0 ],
"id" : "obj-21",
"fontname" : "Arial"
}
}
, {
"box" : {
"maxclass" : "newobj",
"text" : "qmetro 120",
"numinlets" : 2,
"fontsize" : 12.0,
"numoutlets" : 1,
"outlettype" : [ "bang" ],
"patching_rect" : [ 30.0, 209.0, 71.0, 20.0 ],
"id" : "obj-4",
"fontname" : "Arial"
}
}
, {
"box" : {
"maxclass" : "toggle",
"numinlets" : 1,
"numoutlets" : 1,
"outlettype" : [ "int" ],
"patching_rect" : [ 30.0, 176.0, 20.0, 20.0 ],
"id" : "obj-22",
"parameter_enable" : 0
}
}
, {
"box" : {
"maxclass" : "number",
"numinlets" : 1,
"fontsize" : 12.0,
"numoutlets" : 2,
"outlettype" : [ "int", "bang" ],
"minimum" : 0,
"maximum" : 1,
"patching_rect" : [ 580.0, 209.0, 50.0, 20.0 ],
"id" : "obj-18",
"fontname" : "Arial",
"parameter_enable" : 0
}
}
, {
"box" : {
"maxclass" : "number",
"numinlets" : 1,
"fontsize" : 12.0,
"numoutlets" : 2,
"outlettype" : [ "int", "bang" ],
"patching_rect" : [ 522.0, 209.0, 50.0, 20.0 ],
"id" : "obj-17",
"fontname" : "Arial",
"parameter_enable" : 0
}
}
, {
"box" : {
"maxclass" : "flonum",
"numinlets" : 1,
"fontsize" : 12.0,
"numoutlets" : 2,
"outlettype" : [ "float", "bang" ],
"patching_rect" : [ 462.0, 209.0, 50.0, 20.0 ],
"id" : "obj-15",
"fontname" : "Arial",
"parameter_enable" : 0
}
}
, {
"box" : {
"maxclass" : "flonum",
"numinlets" : 1,
"fontsize" : 12.0,
"numoutlets" : 2,
"outlettype" : [ "float", "bang" ],
"patching_rect" : [ 325.0, 209.0, 50.0, 20.0 ],
"id" : "obj-13",
"fontname" : "Arial",
"parameter_enable" : 0
}
}
, {
"box" : {
"maxclass" : "flonum",
"numinlets" : 1,
"fontsize" : 12.0,
"numoutlets" : 2,
"outlettype" : [ "float", "bang" ],
"patching_rect" : [ 375.0, 209.0, 50.0, 20.0 ],
"id" : "obj-11",
"fontname" : "Arial",
"parameter_enable" : 0
}
}
, {
"box" : {
"maxclass" : "flonum",
"numinlets" : 1,
"fontsize" : 12.0,
"numoutlets" : 2,
"outlettype" : [ "float", "bang" ],
"patching_rect" : [ 225.0, 209.0, 50.0, 20.0 ],
"id" : "obj-9",
"fontname" : "Arial",
"parameter_enable" : 0
}
}
, {
"box" : {
"maxclass" : "flonum",
"numinlets" : 1,
"fontsize" : 12.0,
"numoutlets" : 2,
"outlettype" : [ "float", "bang" ],
"patching_rect" : [ 275.0, 209.0, 50.0, 20.0 ],
"id" : "obj-7",
"fontname" : "Arial",
"parameter_enable" : 0
}
}
, {
"box" : {
"maxclass" : "comment",
"text" : "red, green, blue, alpha",
"numinlets" : 1,
"fontsize" : 12.0,
"numoutlets" : 0,
"frgb" : 0.0,
"patching_rect" : [ 225.0, 176.0, 200.0, 20.0 ],
"id" : "obj-5",
"fontname" : "Arial"
}
}
, {
"box" : {
"maxclass" : "newobj",
"text" : "js shapetest.js",
"numinlets" : 7,
"fontsize" : 12.0,
"numoutlets" : 1,
"outlettype" : [ "" ],
"patching_rect" : [ 340.0, 252.0, 202.0, 20.0 ],
"id" : "obj-3",
"fontname" : "Arial",
"saved_object_attributes" : {
"filename" : "shapetest.js",
"parameter_enable" : 0
}
}
}
, {
"box" : {
"maxclass" : "comment",
"text" : "js shapes: input for opacity, size, color, rotation, and shape",
"numinlets" : 1,
"fontsize" : 12.0,
"numoutlets" : 0,
"frgb" : 0.0,
"patching_rect" : [ 30.0, 28.0, 332.0, 20.0 ],
"id" : "obj-2",
"fontname" : "Arial"
}
}
],
"lines" : [ {
"patchline" : {
"source" : [ "obj-21", 1 ],
"destination" : [ "obj-1", 0 ],
"hidden" : 0,
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-21", 0 ],
"destination" : [ "obj-1", 0 ],
"hidden" : 0,
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-9", 0 ],
"destination" : [ "obj-3", 0 ],
"hidden" : 0,
"midpoints" : [ 234.5, 240.0, 349.5, 240.0 ],
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-8", 0 ],
"destination" : [ "obj-4", 1 ],
"hidden" : 0,
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-7", 0 ],
"destination" : [ "obj-3", 1 ],
"hidden" : 0,
"midpoints" : [ 284.5, 240.0, 380.0, 240.0 ],
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-41", 0 ],
"destination" : [ "obj-40", 0 ],
"hidden" : 0,
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-40", 0 ],
"destination" : [ "obj-38", 0 ],
"hidden" : 0,
"midpoints" : [ 235.5, 129.0, 589.5, 129.0 ],
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-40", 0 ],
"destination" : [ "obj-37", 0 ],
"hidden" : 0,
"midpoints" : [ 235.5, 129.0, 531.5, 129.0 ],
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-40", 0 ],
"destination" : [ "obj-36", 0 ],
"hidden" : 0,
"midpoints" : [ 235.5, 129.0, 471.5, 129.0 ],
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-40", 0 ],
"destination" : [ "obj-35", 0 ],
"hidden" : 0,
"midpoints" : [ 235.5, 129.0, 384.5, 129.0 ],
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-40", 0 ],
"destination" : [ "obj-34", 0 ],
"hidden" : 0,
"midpoints" : [ 235.5, 129.0, 334.5, 129.0 ],
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-40", 0 ],
"destination" : [ "obj-33", 0 ],
"hidden" : 0,
"midpoints" : [ 235.5, 129.0, 284.5, 129.0 ],
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-40", 0 ],
"destination" : [ "obj-32", 0 ],
"hidden" : 0,
"midpoints" : [ 235.5, 129.0, 235.5, 129.0 ],
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-4", 0 ],
"destination" : [ "obj-21", 0 ],
"hidden" : 0,
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-4", 0 ],
"destination" : [ "obj-20", 0 ],
"hidden" : 0,
"midpoints" : [ 39.5, 238.0, 129.5, 238.0, 129.5, 199.0, 199.5, 199.0 ],
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-38", 0 ],
"destination" : [ "obj-18", 0 ],
"hidden" : 0,
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-37", 0 ],
"destination" : [ "obj-17", 0 ],
"hidden" : 0,
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-36", 0 ],
"destination" : [ "obj-15", 0 ],
"hidden" : 0,
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-35", 0 ],
"destination" : [ "obj-11", 0 ],
"hidden" : 0,
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-34", 0 ],
"destination" : [ "obj-13", 0 ],
"hidden" : 0,
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-33", 0 ],
"destination" : [ "obj-7", 0 ],
"hidden" : 0,
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-32", 0 ],
"destination" : [ "obj-9", 0 ],
"hidden" : 0,
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-3", 0 ],
"destination" : [ "obj-24", 1 ],
"hidden" : 0,
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-22", 0 ],
"destination" : [ "obj-4", 0 ],
"hidden" : 0,
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-20", 0 ],
"destination" : [ "obj-3", 0 ],
"hidden" : 0,
"midpoints" : [ 199.5, 246.5, 349.5, 246.5 ],
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-18", 0 ],
"destination" : [ "obj-3", 6 ],
"hidden" : 0,
"midpoints" : [ 589.5, 240.0, 532.5, 240.0 ],
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-17", 0 ],
"destination" : [ "obj-3", 5 ],
"hidden" : 0,
"midpoints" : [ 531.5, 240.0, 502.0, 240.0 ],
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-15", 0 ],
"destination" : [ "obj-3", 4 ],
"hidden" : 0,
"midpoints" : [ 471.5, 240.0, 471.5, 240.0 ],
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-13", 0 ],
"destination" : [ "obj-3", 2 ],
"hidden" : 0,
"midpoints" : [ 334.5, 240.0, 410.5, 240.0 ],
"disabled" : 0
}
}
, {
"patchline" : {
"source" : [ "obj-11", 0 ],
"destination" : [ "obj-3", 3 ],
"hidden" : 0,
"midpoints" : [ 384.5, 240.0, 441.0, 240.0 ],
"disabled" : 0
}
}
],
"appversion" : {
"major" : 6,
"minor" : 1,
"revision" : 6,
"architecture" : "x86"
}
}
-----------end_max5_patcher-----------Attachments:
February 25, 2014 | 5:34 am
I have a feeling that if I could figure out how to delineate layers within a sketch object, all of my problems would be solved. something like sketch.layer(0), etc, if some sort of similar functional command might exist.
February 25, 2014 | 11:00 am
i am unable to open your patch. try using copy-compressed.
make sure you have depth disabled (@depth_enable 0) and blending enabled (@blend_enable 1) on your gl.sketch.
February 27, 2014 | 4:01 am
I think I fixed the patcher code :/
blend is enabled and depth is disabled. I’ve been playing with a few glblendfunc options as well. Nothing seems to be working.
Attachments:
February 27, 2014 | 4:04 am
The patcher code will paste in max 6 if the begin_max5_patcher and end_max5_patcher lines are excluded.
February 27, 2014 | 10:16 am
please create a zip archive of both the patcher and the js file and attach that.
February 28, 2014 | 9:45 am
add the following lines to your js, after creating the sketch object:
sketch.blend_enable=1;
sketch.depth_enable=0;
Viewing 8 posts - 1 through 8 (of 8 total)