Gridshape color attribute doesn't work


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

    • Apr 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;
    • Apr 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?
    • Apr 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.
    • Apr 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;
      }
      }
    • Apr 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?
    • Apr 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!
    • Apr 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!