TinyTLF A Micro-Text Layout Framework

If you haven’t been following Paul Taylor’s work on TinyTLF, then check out the latest example of his work here.  Having wrestled with the Adobe TLF in the past, I’m a big fan of TinyTLF.  You will also find some good introductory tutorials on the FTE at Paul’s blog, so plan on spending some time there.

And, in the event you might be going to 360|Flex, might have a little something-something for you to look at there 🙂  See you in D.C!

Near-term Gig in D/FW Area

If you are a solid Flash developer and looking for a short-term gig in the D/FW area, I’m trying to help a friend at a recruiting firm fill a position.  As I understand it, the gig is with a retailer and involves all the usual suspects ranging from connecting to a back end, integrating with a file uploader, lots of UI interactivity, etc.  If you are immediately available and have a demonstrable portfolio, please contact Ben Hollingsworth at The InSource Group, ben[at]insourcegroup.com .  Ben is an awesome guy and InSource is great to work  with, so jump on this if you have the required background.

FYI – Seems like most of the work can be done at home, but there is a need to meet and interact with the client on site.  Good luck!

Trigonometric Parameter Model

The question that generated this topic was very similar to a problem I worked on recently. It deals with the trend of the last few posts on creating simple models that fit data. Suppose we have a parameter, z. It does not make any difference what z is; it could be depth or some other value. Suppose an object moves along a path parameterized by some angle, Θ, in [0,2∏].  The maximum value of z is given as zmax. An additional parameter, α, is defined with α in [0,1]. This is used as a multiplier onto zmax to describe the fraction of that value that must be obtained at certain angles.

A model, f(Θ), is to be created that fits the following data.

f(0) = αzmax
f(∏/2) = 0
f(∏) = azmax
f(3∏/2) = zmax
f(2∏) = f(0)

The model is symmetric moving from 3∏/2 to ∏. The general tendency among programmers is to immediately jump to a linear model for any parameter. The person submitting this question had normalized the angle to [0,∏/2], then had a series of if-statements to determine the parameter value.  Next, the parameter value was modified again based on the quadrant containing the actual angle. The question was whether or not a more compact approach was possible.

The answer depends on whether we can find a base function that has the necessary values at the prescribed data points and behaves in a ‘reasonable’ manner as the angle varies across its domain.  In this case, I looked as the cosine function as a starting point.  The absolute value of this function is 1 at Θ = 0 and decreases to 0 at Θ = ∏/2 and then increases back to 1 as Θ increases to ∏.  It does so in a manner that was similar to the sequence of linear approximations modeled by the if-then-else blocks from the person submitting the problem.

A base model in [0,∏] might look like αzmax|cos Θ| .  Fortunately, as Θ moves from ∏ to 3∏/2, the increase in f to zmax can be modeled like a reflection about the horizontal axis. So, we can create a relatively compact model by

1 – normalize the input angle into [0,2∏) – note the open interval at the end
2 – compute p = αzmax|cos Θ|
3 – for Θ in [0,∏], f(Θ) = p, otherwise f(Θ) = zmax – p

Of course, like any other model, this one needs to be tested to see if the parameter values are reasonable for values of Θ other than the ones used to fit the model.  Usually, this is based on some aesthetic criteria.  I hope the exercise shows how to think about such problems in a manner other than breaking the input into a small range, using linear interpolation inside that range, then modifying the value based on quadrant.

Parabolic Scaling

This is a variation on a problem submitted to me recently.  I suspect the original question related to scaling an object moving in a circular, elliptical, or some other path parameterized on an angle that varies between zero and pi.  The scaling is applied in Actionscript and must satisfy the following criteria (Let S(θ) = scale factor at the angle, θ).

S(0) = 1/4

S(∏/2) = 3/4

S(∏) = 1

S(3∏/2) = 3/4

S(2∏) = 1/4

The question is how to derive a formula for the scaling that satisfies these conditions.  This is the opposite of a more common situation in which one is given a functional representation and required to derived the necessary function parameters.  In this case, we are given conditions but no direction on an appropriate functional representation.  In such a case, we are free to choose the function.  Actual choice may depend on aesthetic or other considerations.

First, notice the symmetry about pi.  The problem can be reduced to one of finding a functional representation of S(θ) in [0,∏] If the input angle is greater than ∏, we can use reflection to generate the angle that is input to the scale function.

For purposes of illustration, a polynomial representation for S is used.  Three conditions are provided in [0,∏], providing three degrees of freedom in selecting function parameters.  This allows a quadratic polynomial to be used to represent S, i.e.

S = a + bθ + cθ2

The three coefficients a, b, and c are determined from the three conditions

S(0) = 1/4

S(∏/2) = 3/4

S(∏) = 1

The first condition implies a = 1/4, leaving us with two equations in two unknowns,

1/4 + b(∏/2) + c(∏2/4) = 3/4

1/4 + b∏ + c∏2 = 1

I won’t crank through all the math here (if too many people have problems, I’ll post the complete derivation later).

The solution is b = 5/4∏ and c = -1/2∏2

In the code, the angle should be reduced to [0,2∏]. If the reduced angle is greater than ∏, reflect about ∏ to create the actual θ value to input to the formula

s = a + b*(θ + c*(θ))

which evaluates the polynomial in nested form. The parabolic representation of scale is only one possible solution to this problem. If the input scale factors vary, it is possible to use Cramer’s rule, for example, to dynamically solve for the necessary coefficients.

Drawing Circular Segments in Actionscript

This problem, in a couple different variations, has been presented to me a few times over the past two months so I thought it might be worth a blog post.  The problem ranges from drawing an aribtrary circular segment to the more general fractional circular area problem.  Since the former is covered in the latter, the problem discussed here is how to dynamically draw a portion of a circle that represents some fraction of the circle’s area.  Refer to the following diagram.

Segment of a Circle

The green shaded area represents a segment of the circle with radius r.  The general problem is given some multiplier, α in [0,1] how do we draw the green region so that its area is αAc, where Ac is the area of the circle. If α is less than or equal to 1/2, the problem reduces to drawing a circular segment at or below the horizontal axis passing through the center. For larger multipliers, we can locate the A and B points corresponding to a segment from the ‘top’ of the circle at a multiplier 1- α , drawing the complement of that segment.

Once the points A and B are identified, the outline of the circle is drawn with a sequence of quadratic Beziers just as in a wedge-drawing program with a line from A to B to complete the drawing. The quad. Bezier code for this example was extracted from my Singularity Wedge class.

To start the Bezier drawing, we need a start and end angle. Given the central angle of the sector, Θ, the start and end angles follow immediately.  You can look up the area of the segment on the web and equate it to a multiplier of the circle’s area.  This yields the equation

Θ – sin Θ = 2∏a .

This is not directly solvable for the central angle.  If the constant term on the right is moved to the left side of the equation, then the problem reduces to finding a zero of a function.  Ah, a numerical analysis problem … just what I like 🙂  I like it even more that I’m about to move and was organizing some folders containing old NA notes and had some scribbling on a good starting value for Θ – sin Θ, namely the cubed root of the constant term with a small multiplier.  So, Newton’s method should converge pretty quickly.

A standard Netwon iteration is used with f(Θ) = Θ – sin Θ – 2∏a and f'(Θ) = 1 – cos Θ .  The computation of start and end angles corresponding to the A and B points as well as the quad. Bezier code to trace the relevant circle outline can be deconstructed from the example code.

The following diagram shows an example of a multiplier greater than 1/2.  In the demo code, the slider is moved to vary the multiplier from 0 to 1.

The code is all AS in Flash CS4.  No classes, just straight code on the timeline.  You can modify the code, repackage it into classes, do whatever you like.  Deconstruct and enjoy 🙂

Download .zip file of .FLA here.

As an aside, there is another approach to this problem that I like even better, but does not have the simple intro. to Newton’s method.  If time allows, I’ll blog about that one later.

good luck!

Elliptical Arcs for Aribtrarily Rotated Ellipse

I’ve received a few requests over the last several weeks for methods to approximate elliptical arcs with quad. Beziers for an ellipse that is rotated at an arbitrary angle.  Further, the requests were for straight actionscript; no Flex and no Degrafa.  Oh well, not as fun, but your wish is my command 🙂

I originally worked with this algorithm for a cubic Bezier approximation in a computational geometry class in 1981.  I don’t have an original attribution for the algorithm, but suspect it goes back to the 1970’s.  Fortunately, the quad. case is easier, although strict error analysis is still tricky.  For ellipses with major/minor axes of a few hundred px, it seems that approximating the arc in segments spanning no more than PI/8 is an acceptable starting heuristic.  You may need something more sophisticated for much larger cases.

A screenshot of the demo (Flash CS3) is shown below.  The code is straight AS on the timeline; no frills, no classes, just a straightforward implementation of the algorithm.

Approximating an arc of a rotated ellipse
Approximating an arc of a rotated ellipse

The code draws a simple wedge.  You can download it here.  If there is sufficient interest, I might incorporate this into Degrafa (whose elliptical arc class does not take rotation into account if memory serves).


Efficient Programming Practices

Shane McCartney has created a high-level presentation (about 136 slides total) on efficient programming practices.  Experienced Flash developers may already know most or all of these, but you never know when a good tip might pop up in one of these slides, so check it out and see what you think.

View presentation here.  Actual performance tests are available here, although I have not had time to independently review them all in detail.