Forums > Javascript

java, jit.gl.gridshape and textures

May 26, 2008 | 10:29 pm

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;

//blob 1
var person00x
var person00y

//blob 2
var person01x
var person01y

//blob 3
var person02x
var person02y

//blob 4
var person03x
var person03y

//blob 5
var person04x
var person04y

//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<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
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<0.15)
{
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];

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

if(r<0.15)
{
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];
}
}
//4
for(var i = 0;i

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

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

if(r<0.15)
{
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];
}
}
//5
for(var i = 0;i

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

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

if(r<0.15)
{
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];
}
}

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

and the patch is..

max v2;
#N vpatcher 361 113 1185 640;
#P origin 94 47;
#P window setfont "Sans Serif" 9.;
#P window linecount 1;
#P newex 0 146 38 9109513 sel 102;
#P newex 0 118 40 9109513 key;
#P window setfont "Fixedwidth Serif" 10.;
#P message 0 229 83 9240586 fullscreen $1;
#P toggle 0 203 15 0;
#P user pictslider 505 42 100 100 4 4 4 4 SliderDefaultKnob.pct 1 SliderDefaultBkgnd.pct 1 2163 0 15728640 320 1. 1.;
#P user pictslider 404 42 100 100 4 4 4 4 SliderDefaultKnob.pct 1 SliderDefaultBkgnd.pct 1 2163 0 15728640 320 1. 1.;
#P user pictslider 303 42 100 100 4 4 4 4 SliderDefaultKnob.pct 1 SliderDefaultBkgnd.pct 1 2163 0 15728640 320 1. 1.;
#P user pictslider 202 42 100 100 4 4 4 4 SliderDefaultKnob.pct 1 SliderDefaultBkgnd.pct 1 2163 0 15728640 320 1. 1.;
#P user pictslider 101 42 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 595 204 91 9109513 expr ($i1/240.)*2.-1.;
#P newex 505 173 91 9109513 expr ($i1/320.)*2.-1.;
#P newex 494 204 91 9109513 expr ($i1/240.)*2.-1.;
#P newex 404 173 91 9109513 expr ($i1/320.)*2.-1.;
#P newex 393 204 91 9109513 expr ($i1/240.)*2.-1.;
#P newex 303 173 91 9109513 expr ($i1/320.)*2.-1.;
#P newex 292 204 91 9109513 expr ($i1/240.)*2.-1.;
#P newex 202 173 91 9109513 expr ($i1/320.)*2.-1.;
#P newex 191 204 91 9109513 expr ($i1/240.)*2.-1.;
#P newex 101 173 91 9109513 expr ($i1/320.)*2.-1.;
#P newex 101 248 402 9109513 pak 0. 0. 0. 0. 0. 0. 0. 0. 0. 0.;
#P toggle 22 175 15 0;
#P newex 20 200 50 9109513 qmetro 20;
#P newex 20 282 51 9109513 js adam.js;
#P comment 6 354 163 9109513 collision + textures == hapiness;
#P window linecount 2;
#P comment 7 373 171 9109513 of course we still have the open cv side to sort out too. yay for java;
#P connect 23 0 24 0;
#P connect 24 0 21 0;
#P connect 21 0 22 0;
#P connect 4 0 3 0;
#P fasten 5 0 2 0 106 274 25 274;
#P connect 3 0 2 0;
#P fasten 22 0 2 0 5 250 25 250;
#P connect 16 0 6 0;
#P connect 6 0 5 0;
#P connect 7 0 5 1;
#P connect 8 0 5 2;
#P connect 16 1 7 0;
#P connect 17 0 8 0;
#P connect 9 0 5 3;
#P connect 10 0 5 4;
#P connect 17 1 9 0;
#P connect 18 0 10 0;
#P connect 11 0 5 5;
#P connect 12 0 5 6;
#P connect 18 1 11 0;
#P connect 13 0 5 7;
#P connect 19 0 12 0;
#P connect 14 0 5 8;
#P connect 15 0 5 9;
#P connect 19 1 13 0;
#P connect 20 0 14 0;
#P connect 20 1 15 0;
#P pop;

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


May 27, 2008 | 8:22 am

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

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


May 27, 2008 | 11:55 am

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


May 29, 2008 | 1:03 pm

Hi,
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?

js

autowatch = 1 // turn off when not coding

//blobs
var persons = 5;
var myperson = new Array(persons);
//particles
var planes = 100;
myplane = new Array(planes);
var op = planes;
myop = new Array(op);

//render
var myrender = new JitterObject("jit.gl.render","test");
myrender.ortho = 2;
myrender.erase_color = [0,0,0,1];

//jit window
var mywindow = new JitterObject("jit.window","test");
mywindow.depthbuffer = 0;
mywindow.idlemouse = 0;
mywindow.mode = "texture"
mywindow.interp = 1;

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

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

for(i=0;i

myplane[i] = new JitterObject("jit.gl.gridshape","test");
myplane[i].shape = "plane";
myplane[i].lighting_enable = 1;
myplane[i].smooth_shading = 1;
myplane[i].scale = [0.05,0.05,0.0];
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 = "flower";
myplane[i].matrix_output = 1;

//jit.op attempt
//myop[i] = new JitterObject("jit.op")
//myop[i].op = ("max",myplane[i]);
}

var planepaper = new JitterObject("jit.gl.gridshape","test");
planepaper.shape = "plane";
planepaper.lighting_enable = 1;
planepaper.smooth_shading = 1;
planepaper.scale = [1,1,0.1];
planepaper.color = [1,1,1,1];
planepaper.position = [0,0];
planepaper.blend_enable = 1;
planepaper.texture = "wallpaper";

for(i=0;i

myperson[i] = new JitterObject("jit.gl.gridshape","test");
myperson[i].shape = "sphere";
myperson[i].lighting_enable = 0;
myperson[i].smooth_shading = 1;
myperson[i].scale = [0.05,0.05,0.0];
myperson[i].color = [0,0,0,1];
myperson[i].position = [Math.random()*2.-1,Math.random()*2.-1];
myperson[i].blend_enable = 1;
}

function list(idx,xx, yy)
{

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

}

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

for(var i = 0;i

// cartesian distance along the x and y axis
var distx = myperson[j].position[0]-myplane[i].position[0];
var disty = myperson[j].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<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
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];
}
}

}
//outlet
//outlet(0,"jit_matrix",test.name);
//rendering block
myrender.erase(); // erase the drawing context
myrender.drawclients(); // draw the client objects
myrender.swap(); //swap in the new drawing

}

function fullscreen(v)
{
mywindow.fullscreen = v;
}

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

patch is

max v2;
#N vpatcher 452 182 1052 582;
#P window setfont "Sans Serif" 9.;
#P window linecount 1;
#P newex 144 165 19 9109513 t b;
#P newex 144 143 40 9109513 key;
#P toggle 144 191 15 0;
#P message 159 247 62 9109513 fullscreen $1;
#P message 31 208 52 9109513 read , bang;
#P newex 31 230 55 9109513 jit.qt.movie;
#P newex 194 206 49 9109513 prepend 0;
#P newex 284 161 81 9109513 scale 0 127 -1. 1.;
#P newex 194 161 81 9109513 scale 0 127 -1. 1.;
#P user pictslider 194 59 100 100 4 4 4 4 SliderDefaultKnob.pct 1 SliderDefaultBkgnd.pct 1 2163 0 8323072 127 1. 1.;
#P newex 194 184 50 9109513 pack 0. 0.;
#P toggle 98 212 15 0;
#P newex 98 232 45 9109513 metro 20;
#P newex 98 263 56 9109513 js person.js;
#P connect 9 0 8 0;
#P connect 2 0 1 0;
#P connect 10 0 0 0;
#P connect 7 0 0 0;
#P connect 1 0 0 0;
#P fasten 8 0 0 0 36 256 103 256;
#P connect 12 0 13 0;
#P connect 13 0 11 0;
#P connect 11 0 10 0;
#P connect 4 0 5 0;
#P connect 5 0 3 0;
#P connect 3 0 7 0;
#P fasten 6 0 3 1 289 182 239 182;
#P connect 4 1 6 0;
#P pop;

am i even close to being on the right track?
best
adam


June 2, 2008 | 1:12 pm

what do you mean by "getting rid of"?

make it transparent?
resize the texture so it doesn’t show the black part?
mask it with a specific shape?

each of these require a different but similar technique.
if you are familiar with it in jitter, then it shouldn’t be a problem
to implement it in javascript.

/*j


June 2, 2008 | 11:02 pm

Hey,
I’d like to remove the black bit around th edge of the texture. i tried "blend_mode" property of jit.glgridshap but that just made the whole thing disapear.
best,
adam


June 3, 2008 | 5:40 am

look up alphablending, alpha channel, masking etc. in the jitter
tutorials

/*j


Viewing 7 posts - 1 through 7 (of 7 total)