Forums > Javascript

Gridshape color attribute doesn't work

April 17, 2013 | 3:11 am

I created several gridshape in a javascript function and everything works perfectly fine but i’m experiencing some troubles with the color attribute. I can’t change it, it always stay gray even when I specify if in my javascript code.

var myCells = new Array(CELLS_COUNT);

for(var i = 0; i < CELLS_COUNT; i++) {
posX = Math.floor(i % divisions);
posY = Math.floor(i / divisions);

posX = (posX/divisions) – 0.5;
posY = (posY/divisions) – 0.5;

myCells[i] = new JitterObject("jit.gl.gridshape", "mosaique");
myCells[i].shape = "plane";
myCells[i].blend_enable = 1;
myCells[i].lighting_enable = 0;
myCells[i].color[1.0, 1.0, 1.0, 1.0]; //Doesn’t work…
myCells[i].position = [posX, posY, 0.0];
myCells[i].scale = [cellSize, cellSize, 1.0];
}

Also, if someone could tell me how to connect a slab object in javascript to each of my gridshapes to give them a texture I would be really happy.


April 17, 2013 | 6:25 pm

you are missing an equals sign.

you can assign gl.slabs to gl shapes in javascript with something like the following:
my_gridshape.texture = my_slab.out_name;


April 17, 2013 | 7:07 pm

Hahahahahaha. Well…

All right, I went this way for the slab :

var aSlab = new JitterObject("jit.gl.slab", "mosaique");
aSlab.texture = "photo01";
aSlab.texrect = [0.0, 0.0, 0.5, 0.5];
aSlab.out_name = "photo01_result";

But that crashes the patch.

Did I get something wrong?


April 17, 2013 | 7:29 pm

can you post your patch and javascript?
i don’t think you can set the slab out_name attribute, it’s read-only, but that shouldn’t cause a crash.


April 17, 2013 | 7:57 pm

{
"boxes" : [ {
"box" : {
"maxclass" : "button",
"patching_rect" : [ 225.0, 210.0, 20.0, 20.0 ],
"id" : "obj-25",
"outlettype" : [ "bang" ],
"numinlets" : 1,
"numoutlets" : 1
}

}
, {
"box" : {
"maxclass" : "newobj",
"text" : "js multipleSlabs",
"patching_rect" : [ 225.0, 255.0, 94.0, 20.0 ],
"id" : "obj-20",
"outlettype" : [ "" ],
"fontname" : "Arial",
"fontsize" : 12.0,
"numinlets" : 1,
"numoutlets" : 1,
"saved_object_attributes" : {
"parameter_enable" : 0
}

}

}
, {
"box" : {
"maxclass" : "newobj",
"text" : "t 0 l",
"patching_rect" : [ 135.0, 255.0, 32.5, 20.0 ],
"id" : "obj-73",
"outlettype" : [ "int", "" ],
"fontname" : "Arial",
"fontsize" : 12.0,
"numinlets" : 1,
"numoutlets" : 2
}

}
, {
"box" : {
"maxclass" : "message",
"text" : "stop",
"patching_rect" : [ 135.0, 225.0, 33.0, 18.0 ],
"id" : "obj-16",
"outlettype" : [ "" ],
"fontname" : "Arial",
"fontsize" : 12.0,
"numinlets" : 2,
"numoutlets" : 1
}

}
, {
"box" : {
"maxclass" : "newobj",
"text" : "t 1 b l",
"patching_rect" : [ 60.0, 195.0, 90.0, 20.0 ],
"id" : "obj-75",
"outlettype" : [ "int", "bang", "" ],
"fontname" : "Arial",
"fontsize" : 12.0,
"numinlets" : 1,
"numoutlets" : 3
}

}
, {
"box" : {
"maxclass" : "newobj",
"text" : "metro 33",
"patching_rect" : [ 60.0, 255.0, 58.0, 20.0 ],
"id" : "obj-76",
"outlettype" : [ "bang" ],
"fontname" : "Arial",
"fontsize" : 12.0,
"numinlets" : 2,
"numoutlets" : 1
}

}
, {
"box" : {
"maxclass" : "message",
"text" : "loop 1",
"patching_rect" : [ 90.0, 225.0, 43.0, 18.0 ],
"id" : "obj-79",
"outlettype" : [ "" ],
"fontname" : "Arial",
"fontsize" : 12.0,
"numinlets" : 2,
"numoutlets" : 1
}

}
, {
"box" : {
"maxclass" : "toggle",
"patching_rect" : [ 60.0, 225.0, 20.0, 20.0 ],
"id" : "obj-81",
"outlettype" : [ "int" ],
"parameter_enable" : 0,
"numinlets" : 1,
"numoutlets" : 1
}

}
, {
"box" : {
"maxclass" : "message",
"text" : "read",
"patching_rect" : [ 60.0, 165.0, 35.0, 18.0 ],
"id" : "obj-82",
"outlettype" : [ "" ],
"fontname" : "Arial",
"fontsize" : 12.0,
"numinlets" : 2,
"numoutlets" : 1
}

}
, {
"box" : {
"maxclass" : "newobj",
"text" : "jit.qt.movie 720 480",
"patching_rect" : [ 60.0, 285.0, 115.0, 20.0 ],
"id" : "obj-83",
"outlettype" : [ "jit_matrix", "" ],
"fontname" : "Arial",
"fontsize" : 12.0,
"numinlets" : 1,
"numoutlets" : 2
}

}
, {
"box" : {
"maxclass" : "newobj",
"text" : "t b l",
"patching_rect" : [ 60.0, 315.0, 32.5, 20.0 ],
"id" : "obj-19",
"outlettype" : [ "bang", "" ],
"fontname" : "Arial",
"fontsize" : 12.0,
"numinlets" : 1,
"numoutlets" : 2
}

}
, {
"box" : {
"maxclass" : "newobj",
"text" : "jit.gl.texture mosaique @name photo01",
"patching_rect" : [ 60.0, 345.0, 219.0, 20.0 ],
"id" : "obj-14",
"outlettype" : [ "jit_gl_texture", "" ],
"fontname" : "Arial",
"fontsize" : 12.0,
"numinlets" : 1,
"numoutlets" : 2
}

}
, {
"box" : {
"maxclass" : "newobj",
"text" : "jit.window mosaique",
"patching_rect" : [ 210.0, 120.0, 118.0, 20.0 ],
"id" : "obj-13",
"outlettype" : [ "bang", "" ],
"fontname" : "Arial",
"fontsize" : 12.0,
"numinlets" : 1,
"numoutlets" : 2
}

}
, {
"box" : {
"maxclass" : "toggle",
"patching_rect" : [ 45.0, 60.0, 20.0, 20.0 ],
"id" : "obj-10",
"outlettype" : [ "int" ],
"parameter_enable" : 0,
"numinlets" : 1,
"numoutlets" : 1
}

}
, {
"box" : {
"maxclass" : "newobj",
"text" : "qmetro 33",
"patching_rect" : [ 60.0, 60.0, 65.0, 20.0 ],
"id" : "obj-8",
"outlettype" : [ "bang" ],
"fontname" : "Arial",
"fontsize" : 12.0,
"numinlets" : 2,
"numoutlets" : 1
}

}
, {
"box" : {
"maxclass" : "newobj",
"text" : "t b erase",
"patching_rect" : [ 60.0, 90.0, 57.0, 20.0 ],
"id" : "obj-7",
"outlettype" : [ "bang", "erase" ],
"fontname" : "Arial",
"fontsize" : 12.0,
"numinlets" : 1,
"numoutlets" : 2
}

}
, {
"box" : {
"maxclass" : "newobj",
"text" : "jit.gl.render mosaique",
"patching_rect" : [ 60.0, 135.0, 125.0, 20.0 ],
"id" : "obj-3",
"outlettype" : [ "bang", "" ],
"fontname" : "Arial",
"fontsize" : 12.0,
"numinlets" : 1,
"numoutlets" : 2
}

}
, {
"box" : {
"maxclass" : "attrui",
"patching_rect" : [ 135.0, 90.0, 150.0, 20.0 ],
"id" : "obj-15",
"outlettype" : [ "" ],
"fontname" : "Arial",
"fontsize" : 12.0,
"numinlets" : 1,
"attr" : "erase_color",
"numoutlets" : 1
}

}
],
"lines" : [ {
"patchline" : {
"source" : [ "obj-83", 0 ],
"destination" : [ "obj-19", 0 ],
"hidden" : 0,
"disabled" : 0
}

}
, {
"patchline" : {
"source" : [ "obj-82", 0 ],
"destination" : [ "obj-75", 0 ],
"hidden" : 0,
"disabled" : 0
}

}
, {
"patchline" : {
"source" : [ "obj-81", 0 ],
"destination" : [ "obj-76", 0 ],
"hidden" : 0,
"disabled" : 0
}

}
, {
"patchline" : {
"source" : [ "obj-8", 0 ],
"destination" : [ "obj-7", 0 ],
"hidden" : 0,
"disabled" : 0
}

}
, {
"patchline" : {
"source" : [ "obj-79", 0 ],
"destination" : [ "obj-83", 0 ],
"hidden" : 0,
"disabled" : 0
}

}
, {
"patchline" : {
"source" : [ "obj-76", 0 ],
"destination" : [ "obj-83", 0 ],
"hidden" : 0,
"disabled" : 0
}

}
, {
"patchline" : {
"source" : [ "obj-75", 2 ],
"destination" : [ "obj-83", 0 ],
"hidden" : 0,
"disabled" : 0
}

}
, {
"patchline" : {
"source" : [ "obj-75", 0 ],
"destination" : [ "obj-81", 0 ],
"hidden" : 0,
"disabled" : 0
}

}
, {
"patchline" : {
"source" : [ "obj-75", 1 ],
"destination" : [ "obj-79", 0 ],
"hidden" : 0,
"disabled" : 0
}

}
, {
"patchline" : {
"source" : [ "obj-73", 1 ],
"destination" : [ "obj-83", 0 ],
"hidden" : 0,
"disabled" : 0
}

}
, {
"patchline" : {
"source" : [ "obj-73", 0 ],
"destination" : [ "obj-81", 0 ],
"hidden" : 0,
"disabled" : 0
}

}
, {
"patchline" : {
"source" : [ "obj-7", 0 ],
"destination" : [ "obj-3", 0 ],
"hidden" : 0,
"disabled" : 0
}

}
, {
"patchline" : {
"source" : [ "obj-7", 1 ],
"destination" : [ "obj-3", 0 ],
"hidden" : 0,
"disabled" : 0
}

}
, {
"patchline" : {
"source" : [ "obj-25", 0 ],
"destination" : [ "obj-20", 0 ],
"hidden" : 0,
"disabled" : 0
}

}
, {
"patchline" : {
"source" : [ "obj-19", 1 ],
"destination" : [ "obj-14", 0 ],
"hidden" : 0,
"disabled" : 0
}

}
, {
"patchline" : {
"source" : [ "obj-16", 0 ],
"destination" : [ "obj-73", 0 ],
"hidden" : 0,
"disabled" : 0
}

}
, {
"patchline" : {
"source" : [ "obj-15", 0 ],
"destination" : [ "obj-3", 0 ],
"hidden" : 0,
"disabled" : 0
}

}
, {
"patchline" : {
"source" : [ "obj-10", 0 ],
"destination" : [ "obj-8", 0 ],
"hidden" : 0,
"disabled" : 0
}

}
]
}

And the JS :

inlets = 1;
outlets = 1;

var cellSize = (1.0 / 24);
var divisions = 12;
var CELLS_COUNT = divisions * divisions;
var posX, posY;

function bang() {

var aSlab = new JitterObject("jit.gl.slab", "mosaique");
aSlab.texture = "photo01";
aSlab.texrect = [0.0, 0.0, 0.5, 0.5];

var myCells = new Array(CELLS_COUNT);

for(var i = 0; i < CELLS_COUNT; i++) {
posX = Math.floor(i % divisions);
posY = Math.floor(i / divisions);

posX = (posX/divisions) – 0.5;
posY = (posY/divisions) – 0.5;

myCells[i] = new JitterObject("jit.gl.gridshape", "mosaique");
myCells[i].shape = "plane";
myCells[i].blend_enable = 1;
myCells[i].lighting_enable = 0;
myCells[i].color = [1.0, 1.0, 1.0,1.0];
myCells[i].position = [posX, posY, 0.0];
myCells[i].scale = [cellSize/1.2, cellSize/1.2, 1.0];
myCells[i].texture = aSlab.out_name;

}
}


April 18, 2013 | 12:03 am

I finally got my texture to be transferred to the gridshape by adding the slab.draw(); function.
There is an other problem sadly, the texrect message only work when the values are [0.0, 0.0, 1.0, 1.0].
Everything else fails.
Is it a bug?


April 18, 2013 | 12:20 am

All right, got it.

There is a priority of operations in this case. You have to put the texrect statement before you assign a texture.
Thanks Rob for your time!


April 18, 2013 | 7:18 pm

yeah, there’s definitely something going on with setting the texrect attribute from javascript.
glad you figured out a workaround!


Viewing 8 posts - 1 through 8 (of 8 total)