Thursday, December 10, 2009

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:

1 comment:

  1. I tried, I really actually put some effort into understanding that.
    No luck.
    But the curves seem curvaceous?

    ReplyDelete