adamsynnott

I'm trying quite unsuccesfully to apply a texture to each of the little planes in this script. the texture would be a still picture file.

var mywindow = new JitterObject("jit.window","wallpaper");

var myrender = new JitterObject("jit.gl.render","wallpaper");

// create an array of [jit.gl.gridshape] objects randomly arrayed across the window

    myplane[i] = new JitterObject("jit.gl.gridshape","wallpaper");

    myplane[i].scale = [0.05,0.05,0.05];

    myplane[i].color = [0.5,0.3,0.7,0.5];

    myplane[i].position = [Math.random()*2.-1,Math.random()*2.-1];

    //myplane[i].texture = "flowers";

var person00 = new JitterObject("jit.gl.gridshape","wallpaper");

person00.position = [Math.random()*2.-1,Math.random()*2.-1];

var person01 = new JitterObject("jit.gl.gridshape","wallpaper");

person01.position = [Math.random()*2.-1,Math.random()*2.-1];

var person02 = new JitterObject("jit.gl.gridshape","wallpaper");

person02.position = [Math.random()*2.-1,Math.random()*2.-1];

var person03 = new JitterObject("jit.gl.gridshape","wallpaper");

person03.position = [Math.random()*2.-1,Math.random()*2.-1];

var person04 = new JitterObject("jit.gl.gridshape","wallpaper");

        person00x = arguments[0];

        person00y = arguments[1];

        person01x = arguments[2];

        person01y = arguments[3];

        person02x = arguments[4];

        person02y = arguments[5];

        person03x = arguments[6];

        person03y = arguments[7];

        person04x = arguments[8];

        person04y = arguments[9];

    // collision detection block. we need to iterate through 

    // the little spheres and check their distance from the control 

    // object. if we're touching we move the little sphere away 

    // along the correct angle of contact.

        // cartesian distance along the x and y axis

        var distx = person00.position[0]-myplane[i].position[0]; 

        var disty = person00.position[1]-myplane[i].position[1];

        // polar distance between the two objects

        var r = Math.sqrt(distx*distx+disty*disty); 

        // angle of little sphere around control object

        var theta = Math.atan2(disty,distx);

        // check for collision...

        // control object is size 0.1, little spheres are 0.05, 

        // so less than 0.15 and it's a hit...

            // convert polar->cartesian to figure out x and y displacement

            var movex = (0.15-r)*Math.cos(theta); 

            var movey = (0.15-r)*Math.sin(theta);

            // offset the little sphere to the new position, 

            // which should be just beyond touching at the 

            // angle of contact we had before. the result 

            // should look like we've "pushed" it along...

            myplane[i].position = [myplane[i].position[0]-movex, myplane[i].position[1]-movey];

        var distx = person01.position[0]-myplane[i].position[0]; 

        var disty = person01.position[1]-myplane[i].position[1];

        var distx = person02.position[0]-myplane[i].position[0]; 

        var disty = person02.position[1]-myplane[i].position[1];

        var distx = person03.position[0]-myplane[i].position[0]; 

        var disty = person03.position[1]-myplane[i].position[1];

        var distx = person04.position[0]-myplane[i].position[0]; 

        var disty = person04.position[1]-myplane[i].position[1];

    person00.position = [person00x,person00y];

    person01.position = [person01x,person01y];

    person02.position = [person02x,person02y];

    person03.position = [person03x,person03y];

    person04.position = [person04x,person04y];

    myrender.erase(); // erase the drawing context

    myrender.drawclients(); // draw the client objects

    myrender.swap(); // swap in the new drawing

// function to send the [jit.window] into fullscreen mode

if anyone could help out with this i'd really apreciate it. 

also are there and tutorials out there on this type of scripting?

hi,
I'm trying quite unsuccesfully to apply a texture to each of the little planes in this script. the texture would be a still picture file. 

here's the script so far.
var planes = 30; //number of particles

//yo
// inlets and outlets
inlets = 2;
outlets = 2;

//jit.window creation
var mywindow = new JitterObject("jit.window","wallpaper");
mywindow.depthbuffer = 0;
mywindow.idlemouse = 0;

//jit.gl.render creation
var myrender = new JitterObject("jit.gl.render","wallpaper");
//use a 2d projection
myrender.ortho = 2;
myrender.erase_color = [0,0,0,1];

// create an array of [jit.gl.gridshape] objects randomly arrayed across the window
var myplane = new Array(planes);

//for statment to create the planes
for(var i=0;i
	myplane[i] = new JitterObject("jit.gl.gridshape","wallpaper");
	myplane[i].shape = "plane";
	myplane[i].lighting_enable = 1;
	myplane[i].smooth_shading = 1;
	myplane[i].scale = [0.05,0.05,0.05];
	myplane[i].color = [0.5,0.3,0.7,0.5];
	myplane[i].position = [Math.random()*2.-1,Math.random()*2.-1];
	myplane[i].blend_enable = 1;
	//myplane[i].texture = "flowers";
}
//blob1
var person00 = new JitterObject("jit.gl.gridshape","wallpaper");
person00.shape = "sphere";
person00.lighting_enable = 0;
person00.smooth_shading = 0;
person00.scale = [0.05,0.05,0.05];
person00.color = [0.4,0.4,0.4,0.4];
person00.position = [Math.random()*2.-1,Math.random()*2.-1];
person00.blend_enable = 1;
//blob2
var person01 = new JitterObject("jit.gl.gridshape","wallpaper");
person01.shape = "sphere";
person01.lighting_enable = 0;
person01.smooth_shading = 0;
person01.scale = [0.05,0.05,0.05];
person01.color = [0.4,0.4,0.4,0.4];
person01.position = [Math.random()*2.-1,Math.random()*2.-1];
person01.blend_enable = 1;
//blob3
var person02 = new JitterObject("jit.gl.gridshape","wallpaper");
person02.shape = "sphere";
person02.lighting_enable = 0;
person02.smooth_shading = 0;
person02.scale = [0.05,0.05,0.05];
person02.color = [0.4,0.4,0.4,0.40];
person02.position = [Math.random()*2.-1,Math.random()*2.-1];
person02.blend_enable = 1;
//blob4
var person03 = new JitterObject("jit.gl.gridshape","wallpaper");
person03.shape = "sphere";
person03.lighting_enable = 0;
person03.smooth_shading = 0;
person03.scale = [0.05,0.05,0.05];
person03.color = [0.4,0.4,0.4,0.4];
person03.position = [Math.random()*2.-1,Math.random()*2.-1];
person03.blend_enable = 1;
//blob5
var person04 = new JitterObject("jit.gl.gridshape","wallpaper");
person04.shape = "sphere";
person04.lighting_enable = 0;
person04.smooth_shading = 0;
person04.scale = [0.05,0.05,0.05];
person04.color = [0.4,0.4,0.4,0.4];
person04.position = [Math.random()*2.-1,Math.random()*2.-1];
person04.blend_enable = 1;

function list()
{
	//blob1
	if (arguments.length>0)
		person00x = arguments[0];
	if (arguments.length>1)
		person00y = arguments[1];
	//blob2
	if (arguments.length>2)
		person01x = arguments[2];
	if (arguments.length>3)
		person01y = arguments[3];
	//blob3
	if (arguments.length>4)
		person02x = arguments[4];
	if (arguments.length>5)
		person02y = arguments[5];
	//blob4
	if (arguments.length>6)
		person03x = arguments[6];
	if (arguments.length>7)
		person03y = arguments[7];
	//blob5
	if (arguments.length>8)
		person04x = arguments[8];
	if (arguments.length>9)
		person04y = arguments[9];

// drive the renderer
function bang() 
{
	//1
	// collision detection block. we need to iterate through 
	// the little spheres and check their distance from the control 
	// object. if we're touching we move the little sphere away 
	// along the correct angle of contact.
	for(var i = 0;i
		// cartesian distance along the x and y axis
		var distx = person00.position[0]-myplane[i].position[0]; 
		var disty = person00.position[1]-myplane[i].position[1]; 

		// polar distance between the two objects
		var r = Math.sqrt(distx*distx+disty*disty); 
		// angle of little sphere around control object
		var theta = Math.atan2(disty,distx); 

		// check for collision...
		if(r
		// control object is size 0.1, little spheres are 0.05, 
		// so less than 0.15 and it's a hit...
		{
			// convert polar->cartesian to figure out x and y displacement
			var movex = (0.15-r)*Math.cos(theta); 
			var movey = (0.15-r)*Math.sin(theta); 

			// offset the little sphere to the new position, 
			// which should be just beyond touching at the 
			// angle of contact we had before. the result 
			// should look like we've "pushed" it along...
			myplane[i].position = [myplane[i].position[0]-movex, myplane[i].position[1]-movey];
		}
	}

		//2
		for(var i = 0;i
		var distx = person01.position[0]-myplane[i].position[0]; 
		var disty = person01.position[1]-myplane[i].position[1]; 

		var r = Math.sqrt(distx*distx+disty*disty); 
		var theta = Math.atan2(disty,distx); 

				if(r
		{
			var movex = (0.15-r)*Math.cos(theta); 
			var movey = (0.15-r)*Math.sin(theta); 

			myplane[i].position = [myplane[i].position[0]-movex, myplane[i].position[1]-movey];
		}
	}
		//3
		for(var i = 0;i
		var distx = person02.position[0]-myplane[i].position[0]; 
		var disty = person02.position[1]-myplane[i].position[1]; 

			myplane[i].position = [myplane[i].position[0]-movex, myplane[i].position[1]-movey];
		}
	}
		//4
		for(var i = 0;i
		var distx = person03.position[0]-myplane[i].position[0]; 
		var disty = person03.position[1]-myplane[i].position[1]; 

			myplane[i].position = [myplane[i].position[0]-movex, myplane[i].position[1]-movey];
		}
	}
		//5
		for(var i = 0;i
		var distx = person04.position[0]-myplane[i].position[0]; 
		var disty = person04.position[1]-myplane[i].position[1]; 

			myplane[i].position = [myplane[i].position[0]-movex, myplane[i].position[1]-movey];
		}
	}

	//positional data
	person00.position = [person00x,person00y];
	person01.position = [person01x,person01y];
	person02.position = [person02x,person02y];
	person03.position = [person03x,person03y];
	person04.position = [person04x,person04y];

	// rendering block...
	myrender.erase(); // erase the drawing context
	myrender.drawclients(); // draw the client objects
	myrender.swap(); // swap in the new drawing
}

function fullscreen(v) 
// function to send the [jit.window] into fullscreen mode
{
	mywindow.fullscreen = v;
}

if anyone could help out with this i'd really apreciate it. 
also are there and tutorials out there on this type of scripting?
best
adam


java-jit-gl-gridshape-and-textures

but mainly, instanciate a texture, load a file into it, apply it to 

then: in javascript, you don't have to hardcode copies of the same 

structure. just use arrays for everything, like you already do for the 

in the patch: inputting the control-points separately saves 

calculation cycles. using pak is poor style, every mouse action will 

result in TWO inputs since both values form a pictslider trigger the 

when coming from cv.jit motion tracking, you will get blob-coordinates 

continously but the coordinates are always transmitted in groups of 2.

if the number of blobs should vary, i'd instanciate plenty of blobs (>

for tutorials: check out if you haven't already /examples/jitter- 

and some of the jitter-recipes by andrew benson

autowatch = 1; // turn on during coding , off when finished to save CPU

// create an array of [jit.gl.gridshape] objects randomly arrayed 

var mytexture = new JitterObject("jit.gl.texture", "wallpaper");

    //for statment to create the planes

        myplane[i] = new JitterObject("jit.gl.gridshape","wallpaper");

        myplane[i].shape = "plane";

        myplane[i].lighting_enable = 1;

        myplane[i].smooth_shading = 1;

        myplane[i].scale = [0.05,0.05,0.05];

        myplane[i].color = [1.0, 1.0, 1.0, 1.0];

        myplane[i].position = [Math.random()*2.-1,Math.random()*2.-1];

        myplane[i].blend_enable = 1;

        myplane[i].texture = "tex";

    //for statment to create the blobs

        person[i] = new JitterObject("jit.gl.gridshape","wallpaper");

        person[i].shape = "sphere";

        person[i].lighting_enable = 0;

        person[i].smooth_shading = 0;

        person[i].scale = [0.05,0.05,0.05];

        person[i].color = [1.0 - (i * 0.1), 0.0, 0.0, 0.3];

        person[i].position = [Math.random()*2.-1,Math.random()*2.-1];

        person[i].blend_enable = 1;

    for(i = 0; i < 5; i++) { // turn on a few blobs

    person[idx].position = [xx, yy, 0.0];    

    // collision detection block. we need to iterate through

    // the little spheres and check their distance from the control

    // object. if we're touching we move the little sphere away

    var i, j, distx, disty, r, theta, movex, movey;

    for(j = 0; j < num_blobs; j++) { //blobs loop

            // cartesian distance along the x and y axis

            distx = person[j].position[0] - myplane[i].position[0];

            disty = person[j].position[1] - myplane[i].position[1];

            // polar distance between the two objects

            r = Math.sqrt(distx*distx + disty*disty);

            // angle of little sphere around control object

            theta = Math.atan2(disty, distx);

            // check for collision...

            // control object is size 0.1, little spheres are 0.05,

            // so less than 0.15 and it's a hit...

                // convert polar->cartesian to figure out x and y displacement

                movex = (0.15 - r) * Math.cos(theta);

                movey = (0.15 - r) * Math.sin(theta);

                // offset the little sphere to the new position,

                // which should be just beyond touching at the

                // angle of contact we had before. the result

                // should look like we've "pushed" it along...

                myplane[i].position = [myplane[i].position[0] - movex, 

    mytexture.file = filename;    

    person[id].enable = status;    

lots of things:
but mainly, instanciate a texture, load a file into it, apply it to  
your planes.

then: in javascript, you don't have to hardcode copies of the same  
structure. just use arrays for everything, like you already do for the  
planes.

in the patch: inputting the control-points separately saves  
calculation cycles. using pak is poor style, every mouse action will  
result in TWO inputs since both values form a pictslider trigger the  
pak.

when coming from cv.jit motion tracking, you will get blob-coordinates  
continously but the coordinates are always transmitted in groups of 2.

if the number of blobs should vary, i'd instanciate plenty of blobs (>
20) and deactivate the unused ones.

for tutorials: check out if you haven't already /examples/jitter- 
examples/javascript/render/
and some of the jitter-recipes by andrew benson

///////////////////
// save as adam.js
///////////////////

// inlets and outlets
inlets = 2;
outlets = 2;

//number of particles
// create an array of [jit.gl.gridshape] objects randomly arrayed  
across the window
var planes = 30;
var myplane = new Array(planes);

//number of blobs
var num_blobs = 10;
var person = new Array(num_blobs);

var mytexture = new JitterObject("jit.gl.texture", "wallpaper");
mytexture.name = "tex";

function init()
{
	var i;
	read("fuzz_circle.jpg");

	//for statment to create the planes
	for(i = 0; i < planes; i++){
		myplane[i] = new JitterObject("jit.gl.gridshape","wallpaper");
		myplane[i].shape = "plane";
		myplane[i].lighting_enable = 1;
		myplane[i].smooth_shading = 1;
		myplane[i].scale = [0.05,0.05,0.05];
		myplane[i].color = [1.0, 1.0, 1.0, 1.0];
		myplane[i].position = [Math.random()*2.-1,Math.random()*2.-1];
		myplane[i].blend_enable = 1;
		myplane[i].texture = "tex";
	}

	//for statment to create the blobs
	for(i = 0; i < num_blobs; i++) {
		person[i] = new JitterObject("jit.gl.gridshape","wallpaper");
		person[i].shape = "sphere";
		person[i].lighting_enable = 0;
		person[i].smooth_shading = 0;
		person[i].scale = [0.05,0.05,0.05];
		person[i].color = [1.0 - (i * 0.1), 0.0, 0.0, 0.3];
		person[i].position = [Math.random()*2.-1,Math.random()*2.-1];
		person[i].blend_enable = 1;
		person[i].enable = 0;
	}

	for(i = 0; i < 5; i++) { // turn on a few blobs
		enable(i, 1);
	}
}

function list(idx, xx, yy)
{	
	person[idx].position = [xx, yy, 0.0];	
}

// drive the renderer
function bang()
{
	//1
	// collision detection block. we need to iterate through
	// the little spheres and check their distance from the control
	// object. if we're touching we move the little sphere away
	// along the correct angle of contact.

	var i, j, distx, disty, r, theta, movex, movey;

	for(j = 0; j < num_blobs; j++) { //blobs loop

		for(i = 0; i
			// cartesian distance along the x and y axis
			distx = person[j].position[0] - myplane[i].position[0];
			disty = person[j].position[1] - myplane[i].position[1];

			// polar distance between the two objects
			r = Math.sqrt(distx*distx + disty*disty);
			// angle of little sphere around control object
			theta = Math.atan2(disty, distx);

			// check for collision...
			if(r < 0.15)
			// control object is size 0.1, little spheres are 0.05,
			// so less than 0.15 and it's a hit...
			{
				// convert polar->cartesian to figure out x and y displacement
				movex = (0.15 - r) * Math.cos(theta);
				movey = (0.15 - r) * Math.sin(theta);

				// offset the little sphere to the new position,
				// which should be just beyond touching at the
				// angle of contact we had before. the result
				// should look like we've "pushed" it along...
				myplane[i].position = [myplane[i].position[0] - movex,  
myplane[i].position[1] - movey];
			}
		}
	}

	// rendering block...
	myrender.erase(); // erase the drawing context
	myrender.drawclients(); // draw the client objects
	myrender.swap(); // swap in the new drawing
}
bang.immediate = 1;

function fullscreen(v)
// function to send the [jit.window] into fullscreen mode
{
	mywindow.fullscreen = v;
}

function jit_matrix(inname)
{
	mytexture.jit_matrix(inname);
}

function read(filename)
{		
	mytexture.file = filename;	
}

function enable(id, status)
{		
	person[id].enable = status;	
}

//////////////
// the patch
//////////////

Thnanks for all of the helpful advice. I had no idea about the pak object. I'll get into the code and let you know how it goes.

Hi,
Thnanks for all of the helpful advice. I had no idea about the pak object. I'll get into the code and let you know how it goes.
Again, Thanks for the advice.
adamx


I took all your advice and rewrote the script... 

a new problem occured when i started to experimetn with textures.

My texture has black in the corners which i'd like to get rid of. In jitter i'd usually get rid of it with a jit.op @op max object. I attempted to do this in js. any suggestions?

autowatch = 1 // turn off when not coding

var myrender = new JitterObject("jit.gl.render","test");

var mywindow = new JitterObject("jit.window","test");

var mytexture = new JitterObject("jit.gl.texture","test");

var mywallpaper = new JitterObject("jit.gl.texture","test");

myplane[i] = new JitterObject("jit.gl.gridshape","test");

myplane[i].position = [Math.random()*2.-1,Math.random()*2.-1];

var planepaper = new JitterObject("jit.gl.gridshape","test");

myperson[i] = new JitterObject("jit.gl.gridshape","test");

myperson[i].position = [Math.random()*2.-1,Math.random()*2.-1];

        var distx = myperson[j].position[0]-myplane[i].position[0]; 

        var disty = myperson[j].position[1]-myplane[i].position[1];

myrender.erase(); // erase the drawing context

java, jit.gl.gridshape and textures