rendering multiple gridshapes w/ openGL in js

Feb 9, 2006 at 8:39pm

rendering multiple gridshapes w/ openGL in js

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

#24359
Feb 9, 2006 at 8:57pm

here’s a test patch for the script:

// name the js file ‘testsomething.js’

#P button 52 48 15 0;
#P window setfont “Sans Serif” 9.;
#P window linecount 1;
#P message 98 84 34 196617 0.5 0;
#P message 52 84 39 196617 -0.5 0;
#P newex 52 119 92 196617 js testsomething.js;
#P connect 3 0 1 0;
#P connect 3 0 2 0;
#P connect 2 0 0 0;
#P connect 1 0 0 0;
#P window clipboard copycount 4;

————————————————–
This mail sent through Mills College Alumnae Email

http://alumnae.mills.edu

#70330
Feb 9, 2006 at 9:09pm

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
}

#70331
Feb 9, 2006 at 9:35pm

#70332
Feb 10, 2006 at 12:34am

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

#70333
Feb 10, 2006 at 6:30am

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

#70334
Feb 10, 2006 at 6:31am

whoops..that was untested code…I left off my parentheses on the
function draw line.

wes

#70335
Feb 11, 2006 at 1:04am

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

#70336

You must be logged in to reply to this topic.