Javascript help

itsthejayj's picture

Hi all, im become stuck on something due to my poor knowledge of javascript, and was hoping some one in the community can help me.

I've got a structure of images and i'm tring to split this into other structures within a structure, the amount of structures within the output structure is dependent on a number input set in the javascript.

The image kinemehelp1.png on attachment show the order of the structure index's. I'm hoping to output a structure with the 4 structure within, the desired result if 4 is set as an input.

Image kinemehelp2.png shows the index's format if 3 was set as an input. This would have a 3 structures within outputted structure, index's in the order shown

does any one think they could help me on this it would be much appreciative. Hope i explained things well.

kinemehelp1.png21.71 KB
kinemehelp2.jpg44.32 KB

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.'s picture
Re: Javascript help

Hi I thought I could put a demo together in twenty minutes but it turned into a few of hours of distraction. I wanted to do this b/c I can't do everything I want to with nested structures and generally have to muck around for results. No exception here :/

This comp works and will show you a way to do it. Hopefully cwright, cybero or others can pitch in and explain some more sublte JS magic which I can't get to yet ;)

There is one big issue with the second JS script. Where I attempted to assign values to different items in the structure by index, they got assigned as Keyed items casting the index as a key literal. Due to a reason I cannot explain the key values are not aligned with the index values. I got around it by using the "Structure Key Member" patch outside the JS patch when I call for the items inside the iterators.

So this threw up quite a few unanswered questions that have bugged me for +ages+:
Q1 Why doesn't var n = firstStruct.length; ever work for objects (does for arrays)? How to get the length of an object/structure with JS?

Q2 How to declare a Key value programatically not literally ie. someObject [keyName] [coOrd] = 0.5 // where keyName="Point 4" & coOrd="X" as opposed to someObject ["Point 4"] ["X"]
Would be great to know how to get the "Keyed" Member using a variable!

Q2a Why did I end up with keys not indexed elements? How do I set the hue values to items by index as intended?

Q3 Is there any way to query a structure for the key name(s) if they are unknown (but required) inside JS patch?

Another question:

Q4 If you set the elements to a high number like 200 the text overlaps. Even in "Over" and "Add" modes the whole sprite masks out the underlying text as if "Replace" is used. Billboard seems auto mask black to alpha if that makes sense, why not with sprites? ['b' key toggles b/w billboard & sprites on left numbers]

Most perplexingly: Q5 Why are the iterations throwing the indexes (and keys) out of whack? That's best I can phrase it – if you've examined comp briefly you'll know what I'm talking about.

nested structure.qtz53.66 KB

itsthejayj's picture
Re: Javascript help

Usefuldesign thanks for sharing this its a great example and i'm sure it will be very useful for many. I've been hacking away at the composition's javascript to try and rearrange the index's to look like my grid format 1,2,3,4 across the x, then on 5,6,7,8, on the next row (as shown on the images in my previous post), i'm sure i could re-arranging my iterations but its a big composition and i'll rather sort things in the javascript, could you help me out some more with accomplishing this. thxs again

  • wish i could answer some of your question but i don't have a javascript head. However in my office the index muddling has been mentioned many a times, a bug report was posted over a year ago!

dust's picture
Re: Javascript help

here this is how you do what you are trying to do without java script. basically you use kineme structure maker to make your 4 structures. with values struct Row one [1,2,3,4] struct Row two [5,6,7,8,]struct Row three [9,10,11,12] and struct Row four [13,14,15,16] then you nest them all into one structure indexed by Rows. Then pull out the values by column and queue your new structures as COL.

see example ....

this is 4 picture one supposing you started with row input sequentially.

so this kind of takes care of both pictures in one shot.

structure_loop.qtz31.74 KB

itsthejayj's picture
Re: Javascript help

Dust i'm tring to keep as much dynamics as i can, javascript is the only way to accomplish this, using kineme's structure maker means i have to hard code every port and structure. thxs though

dust's picture
Re: Javascript help

i wasn't sure what you where doing with this but you can certainly do this with images instead of numbers. all the ports are virtual so they take images but javascript would be easier i guess for generating your grid etc... i thought you where more interesting in parsing an existing structure so i had to hard code one in order to make the parse out example but java script would be the same. it would like this i guess.

for(i=0;i<=4;i++) { result.structParse1[i]=struct[0][i]; result.structParse2[i]=struct[1][i]; result.structParse3[i]=struct[2][i]; result.structParse4[i]=struct[3][i]; }

this is predicated on the fact that you had a structure of structures that you want to split into separate structures by columns not rows.'s picture
Re: Javascript help

YEah, okay I thought I gave your what you wanted but I realise I sorted into sequential structures not leafed structures – if I can put it that way. It all happens in a single line in the JS patch though, the rest is just setting up the loops:

Line 50 item = i *setElements + j;


Line 50 item = j *setElements + i; voilà!

Line 51 secStruct [i] [j] = firstStruct [item];

So you're using the inside loop [j] to skip chunks of data length of setElements and outside loop [i] to increment single elements. Counter intuitive at first, in-fact I got a sore head every time I looked at your image! Hope you have a good reason for doing it that way.

This comp works with the change but if using some odd input values for sets and elements (published inputs at top level) it has a bug... will need to investigate that. Where elements is divisible by sets with zero remainder should work.

Who is your office btw? Do they do QC work or are they referring to a JS bug in another scripting environment. You can email me privately if you don't want to say on board: alastair leith {at} yahoo {dot} co {dot} uk's picture
Re: Javascript help

Oops that fix is incorrect. Still working on the right way to do it but that only works by chance and not so often ;)'s picture
Re: Javascript help

Got it

           item = j *sets + i;

It +bugs+ me that a tiny oversight can take so long to debug. Maths conceptualisation is a young mans game a I couldn't see this for ages. Once you stop using maths (for 20 years) ya sure do lose it. I was actually a top math student at school, wouldn't know it now...'s picture
Re: Javascript help

Okay this comp has it all.

's' key toggles leafed sub-structures (what you ask for) and sequentially derived sub-structures.

Hope we can persuade the wizards to come down from there GLSL, Mesh and SL towers to give a clue to the index/key bug/mis-match (and other questions). I'm talking about you george, cybero and cwright!!

nested structure (leafed:seq).qtz76.97 KB

dust's picture
Re: Javascript help

my bad i read this wrong you want to take an existing 1 dimensional structure parse that into a re-ordered multi-dimensional structure ? sorry bud i did it backwards i hastily read your words and looked at the pics to quickly. you'll have to do what usefuldesigns is doing, by iterating every ith member by j offset or the other way around jth element by ith offset. actually if im reading correctly you want to turn a single structure into a structure of 4 ? last i knew a 4 dimensional structs ripp holes in the space time continuum. the fourth dimension is usually your time element you might want to just split your structure into 4 smaller arrays, going vec4 is a bit hard to grasp. once you got them split into four its a bit easier to just to make a single array of arrays. its much easier to manage that way.

Hoild's picture
Re: Javascript help

Dustin, sorry for the offtopic "reply", just telling you one of the compositions on your site has broken download links. None of the following two links are working:

I would like to use that composition if it is available to the public, I am using the original 'Dragon' visualizer by wowlabs as well.

Sorry again for being offtopic, could not find a way to send PMs here.

dust's picture
Re: Javascript help

thanks for bringing this to my attention. i have gone live with a website and im getting actual press and being showcased by people like tuio and i have broken links etc... the correct link is i believe i posted a few different iteration on kineme. this file is not an explicit copy of the wow labs but a more indirect implicit experiment in making my own iteration of the wow labs. the actual wow labs does some real fancy java script smoothing and stuff and well is a little mathematically more perfect than mine but i think it is fitting for my stochastic music. here is a link to the original post on kineme. there are a few different iterations of this. its a really slimed down version of the dragon, but i found just a good transparent 3d render of a sea flower can be turned into a snake as a mear sprite.

gtoledo3's picture
Re: Javascript help

Interesting. Weird... but I know this has been noted before. I can't remember what the solution on that is, if there is one.

itsthejayj's picture
Re: Javascript help

in-fact I got a sore head every time I looked at your image! Hope you have a good reason for doing it that way.

Ha not the best photoshop work i've done ;) and not the best way to feed a structure into a iterator i know but i've receiving the structure from Ableton Live so i have no choice in the matter.

the office is at tower bridge, uk, the company called Bestbefore, we used to do loads of QC work but now iphone development has taken over and i'm on my tod working with QC.

Thxs for the explanation it really helped with a much need crash course in javascript