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

SuperSara's icon

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-----------

shapetest.js
js
SuperSara's icon

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.

Rob Ramirez's icon

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.

SuperSara's icon

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.

shapetest1.js
js
SuperSara's icon

The patcher code will paste in max 6 if the begin_max5_patcher and end_max5_patcher lines are excluded.

Rob Ramirez's icon

please create a zip archive of both the patcher and the js file and attach that.

SuperSara's icon

ok, here goes. Thanks for your patience!

shapetest.zip
zip
Rob Ramirez's icon

add the following lines to your js, after creating the sketch object:
sketch.blend_enable=1;
sketch.depth_enable=0;