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!