Forums > Javascript
Forums > Javascript
getting the jit.gl.sketch alpha channel functioning in javascript
Feb 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:
Feb 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.
Feb 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.
Feb 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:
Feb 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.
Feb 27 2014 | 10:16 am
please create a zip archive of both the patcher and the js file and attach that.
Feb 28 2014 | 3:43 am
ok, here goes. Thanks for your patience!
Attachments:
Feb 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)
Forums > Javascript