SuperSara

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.

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

                "maxclass" : "button",

                "patching_rect" : [ 226.0, 101.0, 20.0, 20.0 ],

                "id" : "obj-40"

                "maxclass" : "message",

                "text" : "1",

                "numinlets" : 2,

                "outlettype" : [ "" ],

                "patching_rect" : [ 580.0, 138.0, 32.5, 18.0 ],

                "id" : "obj-38",

                "text" : "0",

                "patching_rect" : [ 522.0, 138.0, 32.5, 18.0 ],

                "id" : "obj-37",

                "text" : "0.5",

                "patching_rect" : [ 462.0, 138.0, 32.5, 18.0 ],

                "id" : "obj-36",

                "patching_rect" : [ 375.0, 138.0, 32.5, 18.0 ],

                "id" : "obj-35",

                "patching_rect" : [ 325.0, 138.0, 32.5, 18.0 ],

                "id" : "obj-34",

                "patching_rect" : [ 275.0, 138.0, 32.5, 18.0 ],

                "id" : "obj-33",

                "patching_rect" : [ 226.0, 138.0, 32.5, 18.0 ],

                "id" : "obj-32",

                "maxclass" : "comment",

                "text" : "shape (circle(0) or square(1))",

                "linecount" : 2,

                "numoutlets" : 0,

                "frgb" : 0.0,

                "patching_rect" : [ 580.0, 176.0, 98.0, 33.0 ],

                "id" : "obj-30",

                "text" : "rotation",

                "patching_rect" : [ 522.0, 176.0, 50.0, 20.0 ],

                "id" : "obj-28",

                "text" : "size ",

                "patching_rect" : [ 462.0, 176.0, 50.0, 20.0 ],

                "id" : "obj-26",

                "patching_rect" : [ 309.0, 282.0, 50.0, 18.0 ],

                "id" : "obj-24",

                "maxclass" : "number",

                "numoutlets" : 2,

                "outlettype" : [ "int", "bang" ],

                "patching_rect" : [ 82.0, 176.0, 50.0, 20.0 ],

                "id" : "obj-8",

                "fontname" : "Arial",

                "parameter_enable" : 0

                "patching_rect" : [ 190.0, 209.0, 20.0, 20.0 ],

                "id" : "obj-20"

                "text" : "jit.window test",

                "outlettype" : [ "bang", "" ],

                "patching_rect" : [ 30.0, 337.0, 85.0, 20.0 ],

                "id" : "obj-19",

                "text" : "jit.gl.render test @blend_enable 1 @depth_enable 0",

                "patching_rect" : [ 30.0, 308.0, 288.0, 20.0 ],

                "id" : "obj-1",

                "text" : "t b erase",

                "outlettype" : [ "bang", "erase" ],

                "patching_rect" : [ 30.0, 252.0, 57.0, 20.0 ],

                "id" : "obj-21",

                "text" : "qmetro 120",

                "patching_rect" : [ 30.0, 209.0, 71.0, 20.0 ],

                "id" : "obj-4",

                "maxclass" : "toggle",

                "outlettype" : [ "int" ],

                "patching_rect" : [ 30.0, 176.0, 20.0, 20.0 ],

                "id" : "obj-22",

                "minimum" : 0,

                "maximum" : 1,

                "patching_rect" : [ 580.0, 209.0, 50.0, 20.0 ],

                "id" : "obj-18",

                "patching_rect" : [ 522.0, 209.0, 50.0, 20.0 ],

                "id" : "obj-17",

                "maxclass" : "flonum",

                "outlettype" : [ "float", "bang" ],

                "patching_rect" : [ 462.0, 209.0, 50.0, 20.0 ],

                "id" : "obj-15",

                "patching_rect" : [ 325.0, 209.0, 50.0, 20.0 ],

                "id" : "obj-13",

                "patching_rect" : [ 375.0, 209.0, 50.0, 20.0 ],

                "id" : "obj-11",

                "patching_rect" : [ 225.0, 209.0, 50.0, 20.0 ],

                "id" : "obj-9",

                "patching_rect" : [ 275.0, 209.0, 50.0, 20.0 ],

                "id" : "obj-7",

                "text" : "red, green, blue, alpha",

                "patching_rect" : [ 225.0, 176.0, 200.0, 20.0 ],

                "id" : "obj-5",

                "text" : "js shapetest.js",

                "numinlets" : 7,

                "patching_rect" : [ 340.0, 252.0, 202.0, 20.0 ],

                "id" : "obj-3",

                "saved_object_attributes" :                 {

                    "filename" : "shapetest.js",

                    "parameter_enable" : 0

                "text" : "js shapes: input for opacity, size, color, rotation, and shape",

                "patching_rect" : [ 30.0, 28.0, 332.0, 20.0 ],

                "id" : "obj-2",

            "patchline" :             {

                "source" : [ "obj-21", 1 ],

                "destination" : [ "obj-1", 0 ],

                "hidden" : 0,

                "disabled" : 0

                "source" : [ "obj-21", 0 ],

                "source" : [ "obj-9", 0 ],

                "destination" : [ "obj-3", 0 ],

                "midpoints" : [ 234.5, 240.0, 349.5, 240.0 ],

                "source" : [ "obj-8", 0 ],

                "destination" : [ "obj-4", 1 ],

                "source" : [ "obj-7", 0 ],

                "destination" : [ "obj-3", 1 ],

                "midpoints" : [ 284.5, 240.0, 380.0, 240.0 ],

                "source" : [ "obj-41", 0 ],

                "destination" : [ "obj-40", 0 ],

                "source" : [ "obj-40", 0 ],

                "destination" : [ "obj-38", 0 ],

                "midpoints" : [ 235.5, 129.0, 589.5, 129.0 ],

                "destination" : [ "obj-37", 0 ],

                "midpoints" : [ 235.5, 129.0, 531.5, 129.0 ],

                "destination" : [ "obj-36", 0 ],

                "midpoints" : [ 235.5, 129.0, 471.5, 129.0 ],

                "destination" : [ "obj-35", 0 ],

                "midpoints" : [ 235.5, 129.0, 384.5, 129.0 ],

                "destination" : [ "obj-34", 0 ],

                "midpoints" : [ 235.5, 129.0, 334.5, 129.0 ],

                "destination" : [ "obj-33", 0 ],

                "midpoints" : [ 235.5, 129.0, 284.5, 129.0 ],

                "destination" : [ "obj-32", 0 ],

                "midpoints" : [ 235.5, 129.0, 235.5, 129.0 ],

                "source" : [ "obj-4", 0 ],

                "destination" : [ "obj-21", 0 ],

                "destination" : [ "obj-20", 0 ],

                "midpoints" : [ 39.5, 238.0, 129.5, 238.0, 129.5, 199.0, 199.5, 199.0 ],

                "source" : [ "obj-38", 0 ],

                "destination" : [ "obj-18", 0 ],

                "source" : [ "obj-37", 0 ],

                "destination" : [ "obj-17", 0 ],

                "source" : [ "obj-36", 0 ],

                "destination" : [ "obj-15", 0 ],

                "source" : [ "obj-35", 0 ],

                "destination" : [ "obj-11", 0 ],

                "source" : [ "obj-34", 0 ],

                "destination" : [ "obj-13", 0 ],

                "source" : [ "obj-33", 0 ],

                "destination" : [ "obj-7", 0 ],

                "source" : [ "obj-32", 0 ],

                "destination" : [ "obj-9", 0 ],

                "source" : [ "obj-3", 0 ],

                "destination" : [ "obj-24", 1 ],

                "source" : [ "obj-22", 0 ],

                "destination" : [ "obj-4", 0 ],

                "source" : [ "obj-20", 0 ],

                "midpoints" : [ 199.5, 246.5, 349.5, 246.5 ],

                "source" : [ "obj-18", 0 ],

                "destination" : [ "obj-3", 6 ],

                "midpoints" : [ 589.5, 240.0, 532.5, 240.0 ],

                "source" : [ "obj-17", 0 ],

                "destination" : [ "obj-3", 5 ],

                "midpoints" : [ 531.5, 240.0, 502.0, 240.0 ],

                "source" : [ "obj-15", 0 ],

                "destination" : [ "obj-3", 4 ],

                "midpoints" : [ 471.5, 240.0, 471.5, 240.0 ],

                "source" : [ "obj-13", 0 ],

                "destination" : [ "obj-3", 2 ],

                "midpoints" : [ 334.5, 240.0, 410.5, 240.0 ],

                "source" : [ "obj-11", 0 ],

                "destination" : [ "obj-3", 3 ],

                "midpoints" : [ 384.5, 240.0, 441.0, 240.0 ],

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

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