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
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
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
}
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
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
whoops..that was untested code...I left off my parentheses on the
function draw line.
wes
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