Hyper-hyponymizer / wordnet tree PostMortem

So after all that the Hyperhyponymizer is complete. It did go through a few different iterations in the process though. The first change was a major one. When we realized that we might end up dealing with some very large datasets (70 + words at times) we thought it would be best to discard the current gui in exchange for a new one which could present the words in more of a list format. We settled on trying to create animated Bezier curves for this, which I did actually get working:
the animation of these curves was fairly simple. I used the cubic bezier equation like this

for(var i:uint = 1; i <= 70; ++i){

t = i/70;

Y = (ap1.y * ((1-t)*(1-t)*(1-t))) + cp1.y * (3 * ((1-t)*(1-t))) * t + cp2.y * ( 3 * ((1-t) * (t*t)))+ (ap2.y * (t*t*t));
X = (ap1.x * ((1-t)*(1-t)*(1-t))) + cp1.x * (3 * ((1-t)*(1-t))) * t + cp2.x * ( 3 * ((1-t) * (t*t)))+ (ap2.x * (t*t*t));

curve.graphics.beginFill(0xFFFFFF, 0.1 + i/70);
curve.graphics.drawCircle(X, Y, 1 + (2 * ((70 - i)/70)));

}

This is actually a really beautiful and useful mathematical equation. It was a bit tricky to find a version of it I could use in flash. I ended up adapting this one from one I found on a C++ forum. Basically cp1, cp2, ap1, ap2 are Points representing anchor points and control points. Bezier equations are different from other types of functions in that for a single 'y' value there can be multiple 'x's and vice-versa, so a new value 't' is used as the independent variable (t is between 0 and 1 (this is important!)). To draw the curves here I simply used a for loop with 'i' being used as 't'. This worked well, but did not animate the curves (obviously). To animate them I just exchanged the 'for' with an ENTER_FRAME eventListener, so that a new circle was drawn for each new frame, up until a certain number of frames. This worked, but not perfectly, because any change in frame-rate affected the speed of the growth of the curves. The next thing I tried was to exchange the enter_frame with a TweenLite tween, drawing a new circle everytime the tween was updated to a new frame. This fixed the speed problem but created a new one. Because of the (admittedly flawed) drawing method, whenever there was a drop in the framerate there was a gap in the curve:
because we were running out of time, and the Bezier curves were turning out to be a major headache (as well as the fact that I don't think they would have looked as good) we decided to switch back to the original interface. There were a few bumps in the road in adapting it to the backend, but it didn't take too much to get them working together:


and a little tip here: Always check where the borders on your textfields are! (make sure they don't look like they do below!)



and just because they look nice, another (accidental this time) bezier-curve drawing:

increased efficiency

so I've had this nagging feeling that I might have some efficiency problems in this thing, and I suspect that it has to do with the lines that connect nodes. I started suspecting them because every now and then I notice little dots like you see below, and the only place I can see them coming from is connections that are not being deleted properly.

so I added a text field to print out the number of children that the line 'layer' has, and low and behold:

seems like I'm getting 8 for the price of one... I have a good idea where this is coming from though. Oh and I should also mention that when you navigate backwards only one child is removed (not the 8 that are created)

progress update

so the gui is in the final stages of completion (I believe)
I put up a demo of it here





and here's a little tip for everyone: If you are using textFields as buttons, and they're acting weird, make sure they are not overlapping each other like this, or you will have weird problems!

well...

that was easy. Commented two lines of code and it works basically perfectly. sweet!

where it's at

Just a little update before I get started for the day. So last night I fixed a lot of messy little things that were bothering me a lot. I've got the alpha of the textfields tweening up and down when they are created and removed, which stops them overlapping each other weirdly before they are removed. I've also changed the way text fields are dealt with internally, before I was creating, formatting and entering text in them and then adding them to their Nodes, as well as having an event listener that moved them every frame whether their Nodes were moving or not. It was very bad and messy, but now I have them created and formatted within the constructor of each Node, with their positions updated only when Node's are being created or removed, much nicer, much cleaner. I've also fixed a problem where the rotation layer would rotate 350º when it should have rotated 10º, or 358º when it should have been 2º (etc, etc). This problem was occurring because destination angles were being set by the angle property of each node, and because if I tell flash to go from 355º to 5º it won't go over the top of 360º to 0º and then to 5º from there, it goes down through every angle between 355º and 5º making a weird dissorienting spin. I fixed that by changing the way destination angles are being set. I'm know just increasing the rotation by the difference between the angle of the current node clicked and the previous node clicked, which seems to work perfectly. I also moved the 'camera' so that the most recently created layer of children Nodes are more central on the screen.

anyway, jsut a little summary, today I plan on fixing the biggest, worst and last bug I have right now, which is that when you delete children and then try to grow them back from their parent, you get a big runtime error, and everything gets all screwed up. I'm hoping that there will be some quick fix for this, but I guess we'll find out soon...

once that's cleared up I want to make an additional text based navigation system/control panel, so hopefully we'll be seeing that by the end of the day...

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.

reading for oct 27

decided to go analog for this one (at least in part).


I enjoyed this one a lot actually. Text taken from a passage in Peter Cho's essay

"the computer can work its subtle influence in this way,
guiding the creative process by making some actions easy, others
frustratingly difficult."

(very late) DB 3.1

the two interactive type works I chose for this DB were Spell with Flickr and Typorganism (which is really a collection of several interactive type toys)

Spell with Flickr is a cool app I came across a few years ago, but haven't really revisited until now. Basically, it takes a piece of text you input to it (a few words long) and replaces each character with a photo of a real world instance of that letter. It looks something like this:

The element I like most about this app is the fact that it is really just a framework for purely user-generated content, a good example of what the net is all about. As far as it being effective from a design point of view I'm not so sure. The images it creates are often interesting, and if you don't like one of the letters you get, you can click that letter to refresh it, making it possible to arrive at compositions which are somewhat harmonious. Ultimately though, the results of 'Spell with Flickr' are (almost) always very hard (or impossible) to read. As a tool to find one letter to use as an accent I think this could be very useful, but as a standalone interactive piece it is not really anything more than a fun novelty (not that there's anything wrong with that).

The second piece I chose to look at, Typorganism is, as I said above, a collection of small interactive type pieces. The part of this site I thought worked the best was actually its menu and intro, rather than any of the actual 'content' within the site. The menu looks like
this:


Each menu item has circle in the center to which it corresponds, and these circles dart around their larger circle in a way reminiscent of micro-organisms under a microscope. I actually found this menu quite beautiful. It is very simple, very elegant and quite original as well. As a piece of design and as a piece of typography I think it is very effective. I think I would say the same for the menu as well. It looks like this:




at first all you see is a bunch of letters floating around in space, seemingly without meaning. but when you click they quickly assemble into a word, like this:

I found this part of the site to be really effective as well. At first it is difficult to tell what is going on, the site doesn't really make any sense, but the moment you realize how the site works you feel like you've just got the punch-line to a joke. Again like the main menu of the site, the motion of the letters in space is very organic. They appear to be suspended in liquid, slowly drifting, and then when they are clicked they snap together as if under the influence of some sort of magnetic field. Another dimension is added to this effect when the user varys the speed of their mouse-clicks. With slow clicks the effect is lazy and biological, but with fast clicking, the words appear to explode and recombine constantly, producing a very different, but still good, effect.

As I said, the actual content of the site was somewhat less inspiring. The effects were not all that interesting, and in some cases the actual interactive elements of the site were not really as interactive as the menu and the
intro.

I would not wan to say that either of the pieces I talked about is better than the other, because they are so different. As a tool, 'Spell with Flickr is definitely more useful, but as a piece of design 'Typorganism' is far superior. The one thing I might say that 'Flickr' has that 'Typorganism' does not is re-playability. I can see myself visiting it many times in the future, because it is different every time, whereas 'Typorganism' does not change, once you've seen it once, you've seen everything.

DB 2.0

The basic process I used to make this video was the following. I started by harvesting a whole bunch of old movies, shorts and instructional films from a wonderful website called Archive.org. I imported all these movies into Premiere and selected interesting shots from them, which I cut together, trying to fit the music, but also to create some sort of flow. All of the type I used was created in Adobe Illustrator using the fonts Plasticine and Cut it Out. I liked these two fonts because they are somewhat dirty and imperfect, but not overtly dark or threatening. I also felt that they echoed old film and television titles well, which I think adds a certain something to the piece. Text and video was compiled in After Effects. This was a very simple, but very time-consuming process, masking the text layers, with a little bit of feather, to reveal the foreground items I wanted shown, and applying a slight gaussian blur, to unify the appearance of type and image. There were also a few other techniques used, a bulge was put on the text in the shot with the crystal ball, and the position, scale and rotation of the text was tweened in a few shots, notably the basketball shot and the cigarette shot. All the techniques I used were really very simple, but I feel like they created an interesting effect, and I am happy with the result.

DB 2 very rough cut

So after uninstalling and reinstalling various components of CS4 I was able to export this from Premier Pro. Finally.

this is a very rough cut, a lot of scenes still need to be fit to the frame better, and all the clips (or at least the ones after the lyrics start) have to be converted to black and white.

enjoy:

(hopefully)

Reading Oct. 6

For this week's reading I chose a sentence from Ambition/Fear By Zuzana Licko and Rudy VanderLans;

Digital data is easily modifiable and it is difficult to draw the lines of ownership and copyrights.

and here it is:

DB 2.1 V 2.0

So I know I already did this section of this DB, using 'The Lion's Roar' (or whatever it was called) but I just found this video which I like a lot more, and which I plan to emulate stylistically a lot more than the other one.

Flickermood 2.0 from Sebastian Lange on Vimeo.

This video struck me instantly because it does what I would like to do for my motion graphics piece, which is to use text only, but to also be almost entirely un-readable. One criticism I do have of this piece is that the treatment of the text does not really reflect the content that well (although it is hard to tell, as the content is almost completely obscured by the treatment). The text used is the poem Mutability by Percy Bysshe Shelley which seemed to me to be about the temporal, fragile nature of life. Shelley's treatment of his subject matter is quite contemplative, which is not reflected by the fast-paced, chaotic style of the video. However, I think that this piece was made more as an exercise in style than as a kinetic, typographic interpretation of Shelley's poem. The reason I was drawn to the style of this piece is that it fits well with what I want to do in my own work. I am using the song Loser (Beck) as the audio and text for my piece.



What I love about this song is that the words, when listened to literally, are complete gibberish, but they still create a definite mood and suggest a lot of great imagery. I think a style similar to that in flickermood above will be very appropriate for this piece. The style will be a lot more playful, but the effect will be the same (or very similar).


I've found a few print type images in my travels that I like, and may imitate for this:







All these images above were found on typographyserved.com