Tree Navigation Workin' (mostly)

SoI've spent some time fighting with flash, but I've got this tree/node navigation thing mostly functional. Click a node and it sends out all of that node's children (to eventually be determined by XML), click a sibling of the original node and that siblings children will come out as the others go back in. Click a parent and all of the parent's descendants are removed. It has some serious bugs at this stage, but I'm really happy for the most part. Anyway, updates should be imminent, working demo and source are here

update and SWF that works AND source

for any interested parties, the tree-drawer now works in Camino, firefox and what-have-you on mac, and I've put up the source code as an added bonus.

(of course, it works on windows too (as far as I know) )

here's some pretty pictures:

update + link to a swf!

so after a little struggling and late-night mental gymnastics, I've got my tree drawer working so that you click a node and it generates three children, centers the node you clicked and aligns it to the stage. I'm pretty happy with it for now. Tweening will be the next step now.

click the screens to play with it on my site:

+++EDIT+++ It seems like FireFox on mac doesn't like this thing, but FireFox on windows doesn't mind. let me know in a comment or an email if it works for you or not... ...I'm working on it.

warning! it doesn't work right in camino, but it for sure works in FireFox.

update

so I think I've got the basics of a tree drawing system down now. The node placing function is a wrapped up in a class, so I can call it to place nodes around the parent and then call it for each child, and so on.
and just for fun...

haha, fixed it

so I fixed my problem of like 15 minutes ago, details are at the bottom of the previous post. Here's some screen shots:

and just for fun:

progress update

so: we've got our dataset for this now! Last night and this afternoon I wrote a command-line tool in C++ to take the source files from wordnet.princeton.edu and convert it to XML as well as remove a bunch of duplicate words, and words with "_" and "-" in them.
So with that done, I'm now trying to figure out how I can layout data that has a tree structure visually. I've spent tonight relearning trigonometry in the attempt to position child nodes evenly around their parent. I'm on the right track, but not there yet. here's what I have now:
it looks like a total random mess at first, but if you look closer you can see that nodes 1,2, and 3 are in the right position, 4 and 5 are at the right 'x' but need to trade 'y's and 6, 7, and 8 just need to be pushed up, and then they'll be in the right place aswell. This is encouraging, because (i take it to mean) that everything is working right, and something weird is happening in one small piece of code....
incase yo ucan't picture it, here is how the nodes should (but don't) look:


EDIT: so, I believe I said I thought it must be one weird thing in a small piece of code? well, I had the angles being calculated automatically and dynamically, but the drawing function was just written out line by line, and I had updated where it was drawing x values from but not where it was drawing it's y values from, so it for example node 8 has it's proper x but node 3's y. The universe makes sense again...

DB4 sketch (rough)!

here is just one rough sketch of what we're thinking of for DB4 - a search system for a database of entries arranged in a hierarchical tree structure but also relating to each other by tags. This is a (really quick) sketch of how the GUI might look (but probably won't)

nodes nodes nodes

not so confident I can animate the whole thing moving now. Just crashed flash on my first attempt.

node map, still working on it...

so I'm still trying to figure this thing out. I've made a few changes, It's loading from XML now, it's calculating the strength of attraction between each pair of 'friends' properly, it's finding the node with the most friends and placing it in the center, then it's placing all other nodes based on their attraction to the center node.
I'm beginning to think that this is the wrong way to go about it though. I'm going to try to take a more organic approach, give each node a random position, and have them connected to their friends by spring constraints (stronger and shorter the better friends they are). Then I'll just let them come to a state of equilibrium on their own. It'll also be nice because it will add a little bit of movement to what is currently very static and boring.

we'll see how it goes

DB 4 node map first test

so I just finished my first really really simple crude test of how a map of interconnected tagged data might look as a web of interconnected nodes.

the data it's using is just a bunch of words, and it treats each letter of each word as a tag.

then for each word it creates a list of other words that share at least 1 'tag' (letter) with that word.

then it chooses a location for each word's node, places the nodes and draws a line between every pair of nodes that share tags. the lines are stronger if the nodes share more tags.


the first, very obvious problem is that, because the node placement is random, there are a lot of crossed connections which make it messy and confusing, also the nodes don't tell you anything without mousing over them, which is annoying.

anyways, it needs a whole lot of work still, and maybe it won't end up being the final direction of the DB, more of a proof-of-concept I guess (not that it is a completely original concept).

to do:
-place nodes strategically. strong connections closer to each other, nodes with lots of connections more central, etc.
-have nodes display their most important tags all the time, and all their tags when moused over
-get more real test data. words with letters as tags I don't think is an accurate simulation of real tagged data

DB four a little bit more

fixed the bug I described (except y and z). thought I'd throw up these pics because they are kind of interesting looking

before. each letter contains segments of the letter preceding it alphabetically, and each letter is mroe distorted than the one before. thought the backwards 'e' was an interesting one.



and after



update: it's all done now, everything's up and working, and the code is a hell of a lot shorter

DB4 first step

just finished the start of a mega rewrite of my (disorganized, inefficient) code from DB3. Data for my font is stored within the xml a little differently, and is now loaded into a series of arrays rather than an XML object. first big advantage is I can use one function to type every letter instead of having a switch statement with 26 cases. All is not working quite properly yet though. the letters are coming out weird and the zed is not coming out at all.
more to come later

reading

so this isn't really from a piece of text in the readings but rather from the ideas that were in them.

interesting in that they mesh well with the direction i'm thinking of taking DB3 in to make it DB4

DB 3.3 rough good cut

so it's all working together now!
check it out, and source code too

elastic text scrambler

another little section of DB 3.3 completed (with bugs!)


check it out and source files too, here

anagrammatic morphemelogical recontextualizer

so after a little bit of work I've got my word maker creating anagrams of input words.

you can see it here, along with source files.

DB 3.2 process

DB 3.2

My starting point for DB 3.2 was physics behaviors in flash.

The first thing I made was a very simple elastic behavior. I then made a small, vaguely interactive, toy which would basically make a particle with a textfield in it for each keystroke, and make the contents of that textfield the character typed. I animated the particles with the Elastic class I had made, and that was it.



this is all I had in class last week. Class as well as discussion with people in the class got me thinking about content as well as ways to make things more interactive as opposed to reactive.

I went through a lot of different ideas about how to integrate these two concerns, and eventually settled on the idea of making new words out of the user's input words. The nonsensical always appeals to me, so I settled on the idea of generating imaginary words. I did this by making a list of greek and latin morphemes used in english; prefixes, suffixes and roots; and put them into an XML file. Flash creates words by picking a prefix, root and suffix at random and then assembling them into a word. This worked better than I thought it would, but it still has some bugs. The biggest problem is that of the occasional unpronouncable double or triple vowel, and the limited amount of prefixes and especially suffixes that have been added.





with the content generation aspect mostly working I started working again on the interactive part. I used the little elasticity thing I made earlier as a jumping - off point. I liked the idea of it, but ultimately I don't think it really looked all that good. I decided to move from treating words as particles, to using individual letters, and finally to animating individual 'pixels' within the letters. I created an XML containing the x and y coords of the pixels within each letter (lowercase only so far). Each keystroke adds all the pixels for its corresponding letter to the stage, at a random position, elastically bound to its position within its parent letter. I also added more friction to the movement of the particles, which now drift into place quickly at first, but settle more slowly. I was quite happy with this effect on completion of inputting the coords for all the letters.



this also offered the opportunity for a little foray into the world of (extremely basic) font design

here is how the whole alphabet look right after being created




and here is the second version after some extensive XML tweeking


at this point I am basically happy with these two textual behaviours. They both need some polishing, but I think they're about 90% done.

from here I would like to start combining these two basic functions I have created in a more interactive way. My first idea was to have the user enter some text, and then when they hit enter for the text to morph into a non-nonsensical anagram of itself.

I like this idea, but I am thinking of expanding upon it. It could be interesting for example, if flash looked for possible anagrams on each keystroke, and morphed the input text at the first one found, without warning, and without the user's control.

Ultimately I would also like to add more complicated, and more interactive physical behaviours to my particles as well, which I think I will do using one of the many opensource AS 3.0 physics engines available online.