A new LineUtils class was added to the Beta 0.9 distribution of the Freehand drawing library. This class is a repository for methods involving line simplification and related utilities. Lang Simplification is the baseline algorithm in the class and more sophisticated algorithms will be added in future releases. This supports efforts by beta users to create stroke editors. Adaptive versions of simplification and smoothing are also useful in the constant-width stroke classes coming in the full 1.0 release.
A simple example of Lang is shown below.
The dots represent the raw stroke coordinates. The black lines segments simply connect the dots. The red line shows the simplification with a small look-ahead and pixel tolerance of 10. The current implementation is non-recursive and should be suitably fast for interactive stroke editing (after drawing a raw stroke).
The current beta is closed, however, I may open up a couple more slots when RC1 is released since there is growing interest in constant-width strokes. My current plan is to use an injectable drawing class to do the actual drawing and have one base class manage the interface with the user (implementing IFreehandDrawable). This provides two benefits. It allows users to create factories that return IFreehandDrawable instances based on the desired stroke characteristics. The actual application is authored to an interface, not a specific implementation. The injectable drawing class allows a wide variety of drawing algorithms to be applied (including specialized implementations for one-off applications) without bloating the library with a new class for each variant.
Paul created a cool demo to explore some of the new features in TinyTLF V2.0 (still in beta). The circular region demo (yes, we can do the equivalent of CSS Regions right now in Flash) has been expanded.
Check out the blog post here and enjoy!
Update: For those who have asked, a new version of the demo with text constrained by spline boundaries is in the works, but scheduled for after the V2 formal release.
Interestingly, I’ve received three inquiries on this problem in the last month; how do you draw a quadratic Beizer with arrows at each endpoint (pointing in the direction of the Bezier curve)? Drawing an arrow is pretty simple and everyone interested in this problem posed it as an issue with computing rotation angles.
The problem could be solved with trig, but trigonometry often overcomplicates a problem involving simple vector math. Suppose you wanted to draw an arrow (equilateral triangle) pointing in the direction of the x axis. That’s a pretty easy problem. Suppose you wanted to draw a similar arrow pointing in the direction of the y axis or the negative y axis? Those are also easy problems.
You are actually drawing an arrow in the direction of a unit vector, using a normal to that unit vector to draw the base. The base is drawn half the length of a side in the direction of both the positive and negative normal directions. The tip is drawn at full length in the direction of the primary unit vector. In the first case, the vector (1,0) serves as a unit vector in the direction of the x axis and (0,1) is the normal vector.
This method could be extended to draw arrows in any arbitrary direction provided you have a unit and normal vector as a frame of reference. A unit vector is created by normalizing a direction vector and the direction vectors of a quadratic Bezier are easily obtained from its control points. If the vectors P0, P1, and P2 are the control points of a quadratic Bezier, then one end of the Bezier ‘points’ in the direction of P0-P1 and the other end ‘points’ in the direction of P2-P1. The normal of a unit vector is trivial given the unit vector x- and y-components since the rotation angle is Π/2.
These concepts are embodied in a very simple demo that was hacked together from some old Degrafa code. The original person asking this question was using Flex 3, so the primary components in this demo extend Canvas. It’s a pretty crummy demo as demos go, but I don’t have any more time to put into it. The demo does, however, illustrate this concept of creating unit and normal vectors that can be very useful in a wide variety of applications.
Here are some screen shots.
The red box is not a true bounding box for the quad. Bezier. It’s used to create a middle control point and have some control over the shape of the Bezier without having an interactive ‘handle’ at the endpoints (which would obscure the arrows).
Like I said, it’s a pretty sucky demo, but I hope you find the concept of creating arbitrary frames of reference via direction vectors and normals useful in some future context.
Download a .zip of the FXP file here and have fun!
You may like this one as well.
I’ve given several Freehand drawing demos on my iPad-2 here at MAX, but one of the things I’ve failed to mention is the impending release of TinyTLF V2.0. You can read about the new features and implementation details here.
Paul and I recently collaborated on another organic text layout demo. I really like it when Paul does all the hard work and I come in at the tail end and wrangle some equations (a bit of analytic geometry). Where do I get more gigs like that?
Anyway, here’s a demo of the new layout algorithm for organic text. Given the even lighter weight of the 2.0 code base, I’m envisioning a lot of interesting mobile applications 🙂