[javascript-dev] java, jit.gl.gridshape and textures

adam,

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


hth

/*j

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

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

// 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);

//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];

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

init();

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<planes; i++) { //planes 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...
			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
//////////////

#P window setfont "Sans Serif" 9.;
#P window linecount 1;
#P message 338 277 57 196617 read \, bang;
#P newex 339 295 63 196617 jit.qt.movie;
#P number 271 277 35 9 0 0 0 3 0 0 0 221 221 221 222 222 222 0 0 0;
#P message 272 295 62 196617 enable \$1 1;
#P message 192 283 74 196617 read chilis.jpg;
#P message 91 283 101 196617 read fuzz_circle.jpg;
#P newex 559 217 54 196617 prepend 4;
#P newex 456 217 54 196617 prepend 3;
#P newex 353 217 54 196617 prepend 2;
#P newex 250 217 54 196617 prepend 1;
#P newex 147 217 54 196617 prepend 0;
#P newex 147 189 54 196617 pack 0. 0.;
#P user pictslider 147 33 100 100 4 4 4 4 SliderDefaultKnob.pct 1  
SliderDefaultBkgnd.pct 1 2163 0 15728640 320 1. 1.;
#P newex 156 168 92 196617 scale 0 240 -1. 1.;
#P newex 147 148 92 196617 scale 0 240 -1. 1.;
#P newex 250 189 54 196617 pack 0. 0.;
#P user pictslider 250 33 100 100 4 4 4 4 SliderDefaultKnob.pct 1  
SliderDefaultBkgnd.pct 1 2163 0 15728640 320 1. 1.;
#P newex 259 168 92 196617 scale 0 240 -1. 1.;
#P newex 250 148 92 196617 scale 0 240 -1. 1.;
#P newex 353 189 54 196617 pack 0. 0.;
#P user pictslider 353 33 100 100 4 4 4 4 SliderDefaultKnob.pct 1  
SliderDefaultBkgnd.pct 1 2163 0 15728640 320 1. 1.;
#P newex 362 168 92 196617 scale 0 240 -1. 1.;
#P newex 353 148 92 196617 scale 0 240 -1. 1.;
#P newex 456 189 54 196617 pack 0. 0.;
#P user pictslider 456 33 100 100 4 4 4 4 SliderDefaultKnob.pct 1  
SliderDefaultBkgnd.pct 1 2163 0 15728640 320 1. 1.;
#P newex 465 168 92 196617 scale 0 240 -1. 1.;
#P newex 456 148 92 196617 scale 0 240 -1. 1.;
#P newex 559 189 54 196617 pack 0. 0.;
#P newex 38 137 52 196617 sel 102;
#P newex 38 109 40 196617 key;
#P window setfont "Fixedwidth Serif" 10.;
#P message 38 220 83 1441802 fullscreen \$1;
#P toggle 38 194 15 0;
#P user pictslider 559 33 100 100 4 4 4 4 SliderDefaultKnob.pct 1  
SliderDefaultBkgnd.pct 1 2163 0 15728640 320 1. 1.;
#P window setfont "Sans Serif" 9.;
#P newex 568 168 92 196617 scale 0 240 -1. 1.;
#P newex 559 148 92 196617 scale 0 240 -1. 1.;
#P toggle 74 168 15 0;
#P newex 74 191 64 196617 qmetro 20;
#P newex 74 324 57 196617 js adam.js;
#P connect 8 0 9 0;
#P connect 9 0 6 0;
#P connect 6 0 7 0;
#P connect 2 0 1 0;
#P fasten 7 0 0 0 43 241 79 241;
#P connect 1 0 0 0;
#P fasten 27 0 0 0 152 268 79 268;
#P fasten 28 0 0 0 255 268 79 268;
#P fasten 29 0 0 0 358 268 79 268;
#P fasten 30 0 0 0 461 268 79 268;
#P fasten 31 0 0 0 564 268 79 268;
#P fasten 32 0 0 0 96 304 79 304;
#P fasten 33 0 0 0 197 304 79 304;
#P fasten 34 0 0 0 277 317 79 317;
#P fasten 36 0 0 0 344 316 79 316;
#P connect 25 0 23 0;
#P connect 23 0 26 0;
#P connect 26 0 27 0;
#P connect 25 1 24 0;
#P connect 24 0 26 1;
#P connect 21 0 19 0;
#P connect 19 0 22 0;
#P connect 22 0 28 0;
#P connect 21 1 20 0;
#P connect 35 0 34 0;
#P connect 20 0 22 1;
#P connect 37 0 36 0;
#P connect 17 0 15 0;
#P connect 15 0 18 0;
#P connect 18 0 29 0;
#P connect 17 1 16 0;
#P connect 16 0 18 1;
#P connect 13 0 11 0;
#P connect 11 0 14 0;
#P connect 14 0 30 0;
#P connect 13 1 12 0;
#P connect 12 0 14 1;
#P connect 5 0 3 0;
#P connect 3 0 10 0;
#P connect 10 0 31 0;
#P connect 5 1 4 0;
#P connect 4 0 10 1;
#P window clipboard copycount 38;