[Degrafa] Text Along a Spline

Just wanted to give a sneak preview of my first project for Degrafa.  One of the things we hope to provide in a future release is the ability to path-deform text, both along Bezier curves and in the more general case, a variety of splines.  The algorithm requires an arc length parameterized curve, which includes the Singularity Beziers (quad and cubic), composite Bezier spline, and Catmull-Rom spline.

The following screen shot shows an example with a Catmull-Rom spline.  The default method for initial and terminal points leads to a bit of ‘pinching’ at each end of the spline, so this is not an ideal spline for such an application.  The algorithm works with any spline extending the Composite base class, so this happens to be one of the first test cases.

Text deformed along a Catmull-Rom spline

I’m temporarily drawing tangent and normal in order to verify the orientation.  There are still a lot of details to be worked out, but I wanted to give everyone a preview of just some of the things I’ll be doing for Degrafa.

46th Mersenne Prime

UCLA team discovers 46th Mersenne prime on a network of 75 XP Computers – 13 million digits (I’m a PC).  Amazing how high-performance computing has changed over the years

Read more here.

Papervision Daily

So, are you looking for a regular fix of Papervision coolness (lucky you – no 3D in my immediate future)?  Then, look no further than the Daily Papervision 3D blog.  Adding this one to the blogroll and I do check it daily

enjoy!

Good Programmers Into Great Programmers

Interesting article here by Jeff Cogswell, author of ‘Designing Highly Usable Software.’  I particularly liked the point about programmers understanding where things can go wrong.  In my current gig, I receive specs all the time that indicate how something should work and be displayed under average use conditions.  It’s the extreme cases where the UI breaks down or the specification does not work that can kill the product.  Understanding and identifying these cases up front leads to spec modification that saves a lot of downstream headaches and refactoring.

Although the article does not deal with Flash, the principles are still valid.  From your own experience managing or working with great programmers, what do you think makes a really great Flash/Flex programmer?

PureMVC Fabrication

Loosely stated, Fabrication is an abstract layer for PureMVC and Multicore Pipes, which facilitates faster development of Multicore PureMVC applications.  You can read about it here and there is a great blog post here as well with some additional links.

Good luck!

Prince Speedport Black Team and Flash

I’m really enjoying my new racquet – a Prince 03 Speedport Black Team.  The racket is light and very maneuverable.  Still deciding on the right strings and tension.  I like playing Babolat VS Team 17, but you can only play with gut a limited time in the Texas weather (and I like the 17-gauge strings which wear quicker anyway).

I was initially unaware that you could customize the color of the Speedport string inserts, as shown here,

http://www.princetennis.com/tennis/customyzeit/o3speedportblack.aspx

As I’m still experimenting with strings, different color combinations makes the racquets easy to distinguish (I currently have two), especially if I have both temporarily strung with the same brand but at different tensions. And, it gives the racquet a more personalized touch (other than colored overgrip).

At least I can order the customized inserts (they’re pretty cheap) and have them replaced at the next restringing.

Pretty cool use of Flash on the Prince site

Joining Degrafa

I started the parameteric curve library back in 2004, with the first TechNote appearing in 2005.  My original goal for this library was to have a code repository to illustrate mathematical concepts discussed in TechNotes.  My strong belief is that fundamental principles of computational geometry should be freely available (with mathematical and code details) to everyone in the Flash/Flex community.  You should never have to buy a book, CD or any other resource to learn how to create and use Bezier curves, splines, etc.  In fact, I maintain that the level of detail in the Singularity parametric curve library and the online TechNotes surpasses that of any Flash book purporting to discuss similar topics, and it’s absolutely free

In 2007, Singularity was expanded to include another of my favorite topics – kinematics.  A preliminary version of 2D rigging classes was added to the library.  Along the way, Singularity took on a new role as people began using the library in production applications.  Although I don’t mind such use, I never originally intended the library for that purpose and do not want to be in the business of maintaining and supporting a production application library.

There are over a dozen commercial users of Singularity to date and I’ve recently been thinking about the future of the parametric curve library.  Many have suggested the creation of yet another open-source project.  Not a bad idea at all, but there is something lacking.

If I do anything different with this library, it would be expanding its usefulness to people that do not have the mathematical and programming skills to use a low-level computational geometry library. I can create all the Flex demos in the word, but that does not help someone who understands Flex but lacks the mathematical and programming background to use Singularity.

Ah!  Understands Flex … hold that thought for a second.  What if the algorithm technology in the Singularity parametric curve library could be used in a declarative markup environment?  Wouldn’t that be cool?  Hmmm … what existing open-source projects offer such a facility?

Well, I’m happy to announce that I’ll be joining the Degrafa team as a contributor/consultant/general math guy with the goal of helping transition the algorithm technology in Singularity to Degrafa.  This satisfies both my goals of making fundamental algorithm technology freely available to the community and increasing its applicability beyond a relatively small group of programmers.

What this means is that I will no longer be developing application code for the Singularity parametric curve library.  I will be using my spare time to help the Degrafa core team migrate existing code and tecnology to their code base.  I will also devote research time to issues of primary intererest to the Degrafa team and community.  In fact, my current background project that spawned the Spline Tangent series is based on a stated desire from the Degrafa team.

I will continue creating and posting online demos, however, over time you will see most of the computational geometry demos migrate to Degrafa examples.  I will continue to work on the rigging classes and expand the scope of kinematics coverage in Singularity over time.

I think this is an exciting develoment and I look forward to working with the awesome developers on the Degrafa team as well as helping support the incredible community of Degrafa users.

Spline Tangents Part III

Once again, there were a few questions regarding this post; namely, how to draw the normal vector to the spline.  One person suggested using the fact that slopes of perpendicular lines are negative reciprocals.  Since we already know the slope of the tangent line, we know the slope of the normal line (although there are numerical issues with near or exactly vertical tangents).

That’s a good suggestion for a starting point.  An alternative is to use the fact that we have unit vectors in the tangent direction both ‘away’ and ‘toward’ the direction the curve moves with increasing parameter value.  The 2D rotation matrix corresponding to rotations of +/- PI/2 is particularly simple. We can rotate the already computed unit vectors and then determine a point along the normal the same distance as along the tangent line.  This is illustrated below,

Normal to a spline

The issue here is that the normal will flip when passing through a parameter value corresponding to a vertical tangent.  The reason is a subject for another post at another time. You are welcome to download the updated code from the Downloads section and experiment with both approaches. In the mean time, I’m hoping that the demo that created this series in the first place will be completed by the weekend or early next week.

Spline Tangents Part II

I received a couple questions regarding this post relative to computing the angle of the tangent line relative to the horizontal. It’s a matter of a little trig once you recall the geometric interpretation of a curve’s derivative at a point.  Our old friend, Math.atan2() is just what the doctor ordered.  To illustrate, I modified the demo code to use the Singularity Wedge class to show the angle relative to the horizontal as shown below.

Angle tangent segment makes with the horizontal axis

The wedge is redrawn dynamically as the slider moves.  Once you know the tangent orientation, you also know the normal orientation.  Along with arc-length parameterization, this means that sprites can be precisely distributed along and aligned to the spline.  Stay tuned for more …

Spline Tangents

In calculus, we are taught that the slope of the tangent to a curve, y = f(x) at some point x=c is f’(c). What about a parameteric curve?  The curve is parameterized on t, not on x.  We do have derivative information, but the derivatives are with respect to the curve’s parameter.

Fortunately, the chain rule provides the necessary result; dy/dx = [dy/dt]/[dx/dt].  All Singularity parametric curves (including composite curves) return position and derivative at a parameter value. This information can be used to compute the slope of a tangent to a spline such as Catmull-Rom, as shown below.

Tangent to a Catmull-Rom Spline

If dx/dt is sufficiently small, the tangent slope approaches infinity and this should be tested and compensated for in application code.  The demo from which the above screenshot was taken allows an arbitrary number of points to be defined in the drawing area.  A Catmull-Rom spline is fit to those points. Move the slider to watch a 40px segment drawn tangent to the curve as the parameter varies from 0 to 1.

To compute the tangent segment, the slope of the spline at the specified parameter along with a small positive and negative perturbation in x is used to generate two points on the tangent in opposite directions.  Unit vectors in each direction are created.  Two points, each 20px along each unit vector, are generated to create the line segment.

The demo is contained in a single MXML file and may be obtained from the Downloads section in this blog. Or, you can download the .zip file here along with Singularity here.  You need to have Singularity on your computer in order to build a Flex project from the supplied MXML file.

If we have a well-defined tangent to a curve at a point, not only can we orient sprites along the curve, we know the angle the tangent makes with horizontal.  That information, combined with arc-length parameterization allows sprites to be distributed uniformly along the curve with orientation control.  Stay tuned for a new demo in a few days illustrating these observations.