I’m always interested in computer tools for teaching math.  I recently heard about Algebrator by SoftMath and have been checking out the online animated demos.  Seems like this is a good tool for students needing help with basic concepts (kind of like a fixed-cost home tutor) or for teachers to create lessons and use as an interactive teaching aid.  I suppose it might also be useful for technical professionals wishing to quickly solve complex algebra problems, but most people I know already use Mathematica, Maple, or something similar.  Given a cost of about sixty bucks, it seems that individual students and teachers are the primary market for Algebrator.

There does not seem to be an online demo, so I can’t check it out in more detail.  If anyone is using this tool, I’d be interested in your feedback.  Check out Algebrator here.

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.

Text Along Spline Code Part III

The high-level deconstruction of the basic algorithm is given in this post, with the corresponding code segment posted here. In this post, we look at the following code,

__myText = __input__.text;

// first pass - get total width of displayed text (using
// uniform spacing - punctuation taken into account later)
var totalWidth:Number = 0;
for( var i:uint=0; i<__myText.length; ++i )
  var tf:TextField = __createLetter(__myText.charAt(i));
  totalWidth      += tf.textWidth + __tracking;
  __letters[i]     = tf;

var arcLength:Number = __spline.arcLength();
var aInverse:Number  = 1/arcLength;
var maxS:Number      = totalWidth*aInverse;

Recall that the spline is parameterized on arc length that has been normalized to [0,1].  The first line of code draws the entire spline.  The for loop creates a TextField for each character and computes the total width taken up by the text string, along with one space padding on the end.  This allows a sprite, for example to be placed at the end of the text string, one space from the last character.  This part of the computation is optional.

The lines,

var arcLength:Number = __spline.arcLength();
var aInverse:Number  = 1/arcLength;
var maxS:Number      = totalWidth*aInverse;

compute the total arc length along the Bezier spline.  The inverse of the arc length is used to multiply cumulative text length to convert to an equivalent arc-length parameter along the spline.  The maxS variable is optional.  It stores the arc-length or s-parameter along the spline corresponding to the end of the text string.  It could be greater than 1 if the amount of text exceeds the arc length along the spline.  It may be the case that you want to use a different algorithm in such cases than the one provided in this deconstruction.  The variable also provides a way to quickly place something at the end of the string at a later point, perhaps in response to an event handler.

At this point, references to TextFields containing the individual letters are stored in an array.  The remaining code places text along the spline and will be deconstructed in two subsequent posts; one dealing with text that can be entirely distributed along the spline and the other dealing with the case where text extends beyond the final knot.

Flash and Math

I’m occasionally asked about resources for learning Math that use Flash, especially those oriented towards the upper high school and college level.  One of my favorite resource sites is Flash and Math.  Some sites use Flash for instruction.  Some sites offer tutorials.  Flash and Math has a nice mathlets section as well as a tutorials section that offers source code through MathDL.