getting the jit.gl.sketch alpha channel functioning in javascript


    Feb 25 2014 | 1:03 am
    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-----------

    • Feb 25 2014 | 1:34 pm
      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.
    • Feb 25 2014 | 7:00 pm
      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.
    • Feb 27 2014 | 12:01 pm
      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.
    • Feb 27 2014 | 12:04 pm
      The patcher code will paste in max 6 if the begin_max5_patcher and end_max5_patcher lines are excluded.
    • Feb 27 2014 | 6:16 pm
      please create a zip archive of both the patcher and the js file and attach that.
    • Feb 28 2014 | 11:43 am
      ok, here goes. Thanks for your patience!
    • Feb 28 2014 | 5:45 pm
      add the following lines to your js, after creating the sketch object:
      sketch.blend_enable=1;
      sketch.depth_enable=0;