rendering multiple gridshapes w/ openGL in js


    Feb 09 2006 | 8:39 pm
    Hi list...
    I have a basic question about rendering multiple gridshapes. I would like to call a function to scale a gridshape while another one is already being drawn. The positions i'm using are based on (-1 to 1) xy locations. The scale function is a For loop.
    The part that I'm having trouble with is whether or not I need to be assigning ID's to my gridshapes, or if there's a better way to define my function. It seems that gridshape objs will automatically be assigned uniqueID names upon instantiation, but if my function for them to be scaled over time simply refers to the var name that I have created them with, then I'm going to need a more detailed reference, or a new function instance. I have a feeling that this has everything to do with ADDING more items to a cue instead of OVERWRITING the 'singular item'. I might need to refer to them based on some combonation of var name/ID, but I would like to simply use the .drawclients method, if possible...
    I know in jit.max-land, you can simply create two gridshapes, without naming them, and as long as they share the same context, they'll be drawn together. I noticed that the main difference between max and js is the way that I'm asking the GL objs to be rendered. In max, I am drawing gl.render separately. In js, I am drawing gl.render within the For loop.
    What am I doing wrong? Forgive me if this is obvious; I'm still a newbie to js...
    Here's what I've got so far:
    //////////////////////////////////////////////////////////// ////////// var coords = new Array(2); autowatch = 1;
    // create window var window = new JitterObject("jit.window","renderContext"); window.depthbuffer = 1; window.size = [300, 300]; window.pos = [0,50];
    // create render obj for the window var jrender = new JitterObject("jit.gl.render","renderContext"); jrender.erase_color = [0,0,0,1];
    // get coords and create gridshape, then call event function list(){ coords[0] = arguments[0]; coords[1] = arguments[1]; event(); // call the event desribed below }
    // make the event --here's where i'm going wrong; 'gshape' should be more specific function event(){ // create a gridshape obj var gshape = new JitterObject("jit.gl.gridshape", "renderContext"); gshape.shape = "circle"; gshape.dim = [20,20]; gshape.poly_mode = [1,1]; gshape.position = [coords[0], coords[1],0]; gshape.enable = 1; for(i = 1; i < 41; i++){ size = ((i/40)*0.2); gshape.scale = [size,size,size]; jrender.erase(); jrender.drawclients(); jrender.swap(); } }
    //////////////////////////////////////////////////////////// //////////
    -------------------------------------------------- This mail sent through Mills College Alumnae Email http://alumnae.mills.edu

    • Feb 09 2006 | 8:57 pm
      here's a test patch for the script:
      // name the js file 'testsomething.js'
      -------------------------------------------------- This mail sent through Mills College Alumnae Email http://alumnae.mills.edu
    • Feb 09 2006 | 9:09 pm
      Hi Jeff,
      Here's what I would do. Make a class for your gridshape to make things easy for yourself. Then, interface it with the jit.gl.gridshape object.
      wes
      // gridshapeConstructor function GShape(id) { //set vals }
      // GShape Variables: GShape.prototype.id = 0; GShape.prototype.speed = 3.27; GShape.prototype.orientation = [0, 0, 1]; GShape.prototype.angle = [0.0, 0, 0]; GShape.prototype.position = [0, 0, 0]; GShape.prototype.scale0, 0, 0];
      GShape.prototype.draw = function(n) { //do something to draw }
    • Feb 09 2006 | 9:35 pm
    • Feb 10 2006 | 12:34 am
      Hi Jeff, I am interested in your patch here.I was wondering if you have put something together with this using Wes' suggestion(as I am not sure how to).If so do you think I could have a peek at it.Total newb trying out javascript.
      Thanks Tom
    • Feb 10 2006 | 6:30 am
      Hi Tom,
      You would use it the following way:
      // gridshapeConstructor function GShape(id) { //set vals }
      // GShape Variables: GShape.prototype.id = 0; GShape.prototype.speed = 3.27; GShape.prototype.orientation = [0, 0, 1]; GShape.prototype.angle = [0.0, 0, 0]; GShape.prototype.position = [0, 0, 0]; GShape.prototype.scale0, 0, 0];
      GShape.prototype.draw = function(n) { //do something to draw }
      var myShape = new Array(); var numShapes = 10;
      for(var i=0; i < numShapes; i++) { myShape[i] = new GShape(i); myShape[i].position = [Math.random(), Math.random(), Math.random()]; }
      function draw { for(var i=0; i < myShape.length; i++) myShape[i].draw(); }
      Make Sense? If not, check out the Javascript Core Guide and especially the code in the jsextensions folder.
      wes
      wes
    • Feb 10 2006 | 6:31 am
      whoops..that was untested code...I left off my parentheses on the function draw line.
      wes
    • Feb 11 2006 | 1:04 am
      Hi Wes, Thanks for the reply.After spending a couple hours with your script I am still pretty lost.Do you have a patch implementing this that you could share.It would be greatly appreciated.
      Tom