Forums > Jitter

jit.glue only shows first image in Javascript

June 17, 2008 | 6:42 am

Hi,

I’m trying to write an dynamic image stitcher which can do a flyby over a huge image by only loading small chunks at a time. The problem is, I can’t even get past loading four chunks into the jit.glue object! For some reason it only displays the first top left corner image while the other 3 corners stay blank.

As you can see I’ve littered the patch with debugging windows: you can see that the jit.glue object in the Max patch handles the four input matrices fine, but the Javascript one fails miserably. I’ve tried all sorts of ways of sending an array of input matrices: the current try is rotating the top left corner image through all inputs while the other three stay static.

To test it you’ll need four 800×600 images (or four files of the same image) called:
milkyWay_271-14.jpg
milkyWay_272-14.jpg
milkyWay_273-14.jpg
milkyWay_274-14.jpg

I’ve attached one to play with.

I’m using Max 4.6 with Jitter 1.6.3. Can someone please test my patch and see if you can figure out what’s wrong with it?

Also, as another problem I was having: I can’t get the matrix’s srcdimstart and srcdimend properties to do anything… even though I set usesrcdim = 1. The code is in there but it doesn’t seem to have any effect when I click "move".

Thanks!

Tyler

http://www.odbol.com

—————————-
infinite_image.pat:
—————————-

max v2;
#N vpatcher 37 135 936 882;
#P origin 0 13;
#P user jit.pwindow 653 288 82 62 0 1 0 0 1 0;
#P window setfont "Sans Serif" 9.;
#P user jit.fpsgui 83 616 60 196617 0;
#P user jit.pwindow 708 146 82 62 0 1 0 0 1 0;
#P user jit.pwindow 628 146 82 62 0 1 0 0 1 0;
#P user jit.pwindow 548 146 82 62 0 1 0 0 1 0;
#P user jit.pwindow 468 146 82 62 0 1 0 0 1 0;
#P message 180 39 34 196617 move;
#P number 221 38 35 9 0 0 0 3 0 0 0 221 221 221 222 222 222 0 0 0;
#P newex 191 76 70 196617 pak move 1 0;
#P user jit.pwindow 79 236 492 372 0 1 0 0 1 0;
#P message 237 112 81 196617 load milkyWay_;
#P toggle 90 35 15 0;
#P newex 91 64 57 196617 qmetro 30;
#P newex 619 252 141 196617 jit.glue @rows 2 @columns 2;
#P newex 230 150 154 196617 jit.matrix img1 4 char 320 240;
#P newex 100 174 98 196617 js infinite_image.js;
#P connect 0 0 6 0;
#P connect 6 0 14 0;
#P connect 4 0 3 0;
#P connect 3 0 0 0;
#P connect 5 0 0 0;
#P connect 7 0 0 0;
#P connect 9 0 7 0;
#P connect 8 0 7 1;
#P connect 8 0 7 2;
#P connect 0 1 10 0;
#P connect 0 2 11 0;
#P connect 0 1 2 0;
#P connect 0 3 12 0;
#P connect 2 0 15 0;
#P connect 0 2 2 1;
#P connect 0 3 2 2;
#P connect 0 4 13 0;
#P connect 0 4 2 3;
#P pop;

—————————-
infinite_image.js:
—————————-
autowatch = 1;

outlets = 5;
inlets = 1;

var FULL_WIDTH = 24572;
var FULL_HEIGHT = 13520 * 16;

var IMG_WIDTH = 800;
var IMG_HEIGHT = 600;

var WIN_WIDTH = 320;
var WIN_HEIGHT = 240;

//the coordinates of the viewing window among the FULL_WIDTH and FULL_HEIGHT
var winStart = [0, 0];
var winEnd = [WIN_WIDTH, WIN_HEIGHT];

//the template file to load.
//all files with must end in filePrefix + "XXX-YYY.jpg"
//where XXX and YYY are the coordinates in the image matrix,
//starting at 0,0 top, left
//e.g.: if your files look like "blahBlah_30-12.jpg" then filePrefix="blahBlah_"
var filePrefix = null;

//our sources
var imgs = [new JitterMatrix(4, "char", IMG_WIDTH, IMG_HEIGHT), //the main image
new JitterMatrix(4, "char", IMG_WIDTH, IMG_HEIGHT), //top or bottom
new JitterMatrix(4, "char", IMG_WIDTH, IMG_HEIGHT), //left or right
new JitterMatrix(4, "char", IMG_WIDTH, IMG_HEIGHT) //the extra
];

//the sources pasted together
var full = new JitterMatrix(4, "char", IMG_WIDTH*4, IMG_HEIGHT*4); //WIN_WIDTH, WIN_HEIGHT);

var glue = new JitterObject("jit.glue");
glue.rows = 2;
glue.columns = 2;
//glue.syncinlet = -1;

//loads the image buffers according to the center point
function loadBuffers() {
for (var i = 0; i < 4; i++) {
var filename = filePrefix + (271 + i) + "-" + 14 + ".jpg";
post("nloading " + filename);
imgs[i].importmovie(filename);
}

}

function moveWindow(x, y) {
winStart[0] += x;
winStart[1] += y;

winEnd[0] += x;
winEnd[1] += y;

full.usesrcdim = 1;
full.srcdimstart = winStart;
full.srcdimend = winEnd;

post("nmoving by " + x + "," + y + ": " + full.srcdimstart[0] + ", " + full.srcdimstart[1]);
}

var j = 0;
function draw() {

//post("ndraw!");

//glue.matrixcalc(imgs, full); //this doesn’t work!
j = ++j % 3;
glue.matrixcalc([imgs[j].name, imgs[1].name, imgs[2].name, imgs[3].name], full); //but neither does this!

// output processed matrix into Max
outlet(0, "jit_matrix", full.name);

for (var i = 0; i < 4; i++) {
outlet(i+1, "jit_matrix", imgs[i].name);
}
}

function loadbang() {
post("nreloading");
}

function anything() {
var a = arrayfromargs(messagename, arguments);

if (a[0] == "load") {
filePrefix = a[1];

//load the first four image buffers
loadBuffers();

moveWindow();
}
else if (a[0] == "move") {
moveWindow(a[1], a[2]);
}
else if (a[0] == "bang") {
if (filePrefix != null)
draw();
}

}


Viewing 1 post (of 1 total)