javascript help - image arrangement

Sorry mate, but I don't exactly understand what you mean!

Do you want the JS to calculate each picture's width/height and place it in the right (x,y) so all the images are placed beside eachother without any gap?

Yeh sorry i'm finding this hard to explain. The javascript at the moment provides me the width and xposition depending on how many tracks are playing (i've hardcoded the example composition to display 4 images). I would like the javascript modified to rescale (the width and xposition) depending what the volume is for each track (0-1 range).

Example if the volume 3 parameter is reduced to 0.5 the 3rd image width would reduce and x position move, while the other 3 images would expand in width and move along the x to fill the gap.

I'm going to try and hardcode this for better example

I made you a comp that I think is at least close to what you want. I couldn't make the number of image inputs a variable so you must adjust the kineme structure maker for images to your desired number (and so the Volumes) but I think the JS+Iterator is what you're looking for.

See if it needs anything modification.

Idelefon, your a gent this pretty much what i was looking for, a great help in my javascript learning quest. One last thing is there any chance to get the inputVol count the amount of arrays rather than using the inputImage to work out how many outputProperties arrays are needed? Its a great bit of code but on the composition i using this js patch i can't feed the image structure into the js at this level.

Thanks again

Don't mention it :D

Credits to Cybero and everyone's dear friend "Google" cause all I've learned in JS was through them.

off course you can change the first loop count from inputImage.length to inputVol.length but there is an important matter here:

The JS patch NEEDS the image structure to calculate the width of each image. If in your composition the JS is in lower levels than the image structure you still can publish the "inputImage" to the level you want. If that's not your problem, you'd have to lem take a look at the whole composition.

:) indeed Cybero online QC javascript guide seems a great place to start.

It seems like i need to tinker and merge your js script with the original one that was made for me in the composition i posted here. Within that js script there were a couple of functions that calculated how many tracks were being playing and then divided this by the destination width that was hardcoded as 2.

I understand that the original js script would have been confusing as it calculates some weird signals that i'm receiving from Ableton but hopefully i can hack away and get things outputting correctly without the need to input an image structure .

it seems idlefons patch is just using width of the image so its sort of just passing the images through. you could however queue up a structure of widths outside the js patch to feed in as widths. you could do this by making an extra iterator without a consumer patch in it so you could publish the outputs and then feedback to your image width structure that way you would always have the current images width as they get resized by vol. I think maybe it would be best to use an image resize patch before you queue up the images that way they are the same size to start. you never know what size image a user is going to add so making them all the same to start might be a good idea plus I think the uniformity may be more pleasing visually. hit me up later tomorrow Jon if you haven't figured this out and I will merge the two scripts for you.

Cheer dust, great talking last night sorry i had to sign off. I have the width already being outputting from the original js patch (tracks output) i'm trying to feed this into idlefon jspatch at the moment, no as of yet help would be appreciated.

Been letdown with my javascript coding here once again. Feel a bit embarrassed about this one as i can imagine its a very easy one for you guys.

Could someone please show me, how to modify my javascript patch to output a height 'H' parameter within the 'outProperties' of the javascript patch.

Keeping the same functionality of the composition just making things more tidy and dynamic within the Javascript patch rather than feeding the 'vol_total' into the iterator.

Much thanks as ever

Two questions:

1- You want the parameter "H" to show the height of each quad or is it for something else?

2- Shouldn't the quads have a static height, or should them change when vol changes?

Quote:
1- You want the parameter "H" to show the height of each quad or is it for something else?

The H would show the height of each quad, along with the currently present x, and w values

Quote:
2- Shouldn't the quads have a static height, or should them change when vol changes??

I'm trying to have the height change dependent on the vol change, so they get stretched. In essences i'm trying to create the exactly same results of the attached composition, just keeping things in the javascript so i can change the amount of iterations.

Thanks Idlefon

(trpl post)

.

It looks like this is where you're going with it.

BTW, try out the Y key I put in, if you feel like it.

Not quite George, i'm not bothered about keeping the correct ratio aspect, if you look at the Images-arrange via JS-skewingpresent.qtz i'm stretching the height so all the quad are all of equal height. Although when the width increases on a quad it effects the height of all the sprites.

• The Y key checkerboard effects is very pretty :)

Thanks

I started looking more, and noticed the structure maker stuff. I've removed that and replaced it with javascript in this one, which probably makes more sense, overall, since you're already doing structure stuff via javascript.

If you want to add more inputs at some point to replicate structure maker function, here's what to do (I've annotated the code, hopefully well enough to break it down):

/*
You'll want to change the main type, where "__number" is, with "__image", "__ structure", "__virtual", or whatever.
Then, you'll change the [4] to [5] to get an additional port, and so on.
*/
 
function (__structure array) main (__number number[4])
{
   var result = new Object();
   result.array = new Array();
 
   /* below, raise the 4 to whatever your number count is. So, if you've       written "__number number [50]"  write "for (i = 0; i < 50; ++i)". */
 
   for (i = 0; i < 4; ++i)
 
   /* shift    "result.array[i] = number[i];" to    "result.array[i] = image[i];" if you're dealing with images, or whatever matches. */
 
   result.array[i] = number[i];
   return result;
}

I'm still in waking up/coffee mode, and I'm not sure if I'm reading the message above right... was the resulting height aspect ratio stuff cool? It looked like it achieved the same effect...Oh, you say it's not. I'll look again.

Yeh i've always been a bit unsure over using kinemes structure maker vs javascript. The only reason i use the kinemes stru maker is to prevent the 'overhead of the javascript patch' *http://kineme.net/release/StructureTools/01

But for a situation like on here where someone may not have structure tools installed you right i should use javascript here. thanks

And yes your composition is not what i'm trying to achieve, but big thanks for always trying to help even in your hassy morning ways :)

My bad. Here you go.

Early morning time or super late is best time to get freebie out of me :)

Here's what you wanted.

All I did was to calculate the "volTotal" in the JS patch and divide our window's width by it.

Tell me if you needed anything else.

EDIT: Oops!! Sorry George! When I was writing my reply, yours wasn't there.

lol, no apology necessary. :)

I appreciate this approach. I put together an audio reactive patch with it using Kineme audio tools. Question about best practices: I'm using queues inside an iterator -- is there a better way?

There's one thing that pops out to me, off the top:

result.outImage=inputImage;

It appears that the inputImage structure goes into the javascript patch, and then goes out, without processing. Everytime there's an extra input/output port in QC, there's extra overhead incurred, and passing a structure through a patch that's evaluating it every loop for no reason isn't great.

You could also be manipulating the color inside of the iterator that's doing the rendering, by not passing image at all, and manipulating the color port. That will be faster. No texture overhead, and you're just manipulating gl color.

For the thing where you're smoothing the audio, you could probably use the audio smooth javascript that's in the music visualizer template...not sure about that one.

very good, thanks for that advice.

Cheers George, idlefon huge thanks and i promise to practice my javascript for the future :)

Screw the javascript, learn obj-c :)