getting the jit.gl.sketch alpha channel functioning in javascript
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
----------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-----------
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.
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.
The patcher code will paste in max 6 if the begin_max5_patcher and end_max5_patcher lines are excluded.
please create a zip archive of both the patcher and the js file and attach that.
add the following lines to your js, after creating the sketch object:
sketch.blend_enable=1;
sketch.depth_enable=0;