Text Along Spline Code Part V

I was going to post this yesterday, but an emergency trip to the dentist (just call me Marathon Man) wiped out that plan.  Continuing from this post, let’s review the unit and normal vectors that arise during the computation. The Δx and Δy values used to approximate the unit vector in the direction of the spline tangent are used to orient the text along the spline.  The next question is where do we place the text?  Another question that usually follows is what is the difference between placing the text ‘below’ and ‘above’ the curve.

The registration point of the TextField is upper, left-hand corner, so an easy approach is to place the text field at the point on the spline correspoding to the computed arc length.  This approach orients the text ‘below’ the curve.  It’s what you may have seen in a few other examples similar to the one being deconstructed here.

Sometimes, you may have need to place the text ‘above’ the curve.  Additionally, you may need to have some control as to how far away from the curve the text is placed.  For example, the demo I would eventually like to put online has a spline curve represeningt slow-moving waves of water with text moving along the top of the wave.

This is where the normal vector is useful.  Using a rotation matrix, we can rotate the unit vector either counter-clockwise or clockwise. Recall that clockwise rotations are positive in Flash.  Study the Wikipedia article and compute the values of the 2D rotation matrix for a counter-clockwise rotation of ∏/2.  The normal vector components are simple multiples of the unit vector.

Once we know the normal vector (counter-clockwise means it’s pointing in the direction ‘upward’ from the curve), we can compute a point any distance along that vector.  As a first approximation, we can query the text height from the TextField and use that to position the text above the curve, ad distance of text height units along the normal.  The current algorithm is an approximation for purposes of introduction and simplicity.

Now, you have an idea of how to both orient the text along the curve and position it either above or below the curve.  The final step in the deconstruction of the basic algorithm is discussing how to handle the condition where the text extends beyond the length of the spline.  That will be discussed next week.

Advertisement