Actionscript Organic Scroller Preview

Just a quick note to say hello from Adobe MAX in LA.  This is a short preview of a project I’ve been working on with Paul Taylor.  At 360|Flex, we showed a demo where TinyTLF was used to layout text respecting a spline boundary.  Paul showed scrolling with TinyTLF here at the 360|Flex Unconference.  The next natural progression is to have both the text boundary and the scroller be organic; that is, both are based on the same Bezier spline.  The scroller itself and the thumb are dynamically rendered in Actionscript.  The small image below shows a preview of one test case.

Organic Scroller Based on Quadratic Bezier Spline

Needless to say, there is a *lot* of math involved ranging from arc-length parameterization to interpolation models to a nonlinear model for scroller thumb interaction.  The alpha component is being turned over to Paul for integration into a TinyTLF demo and further testing.  Once it’s solid, we will work on a vehicle for distributing the code, which will include at least a white paper on all the math used in the scroller construction.

More to come later!

Going to Adobe MAX next week

Well, I’m leaving Saturday for my very first Adobe MAX.  While I’m not too excited about going to LA, it’s going to give me a chance to visit family in Phoenix.  If you’re attending, look for the guy in the tennis gear and say hello 🙂

Paul Taylor and I are working on another demo.  This one will be even more intense than the organic text we showed at 360|Flex .   If you’re interested in finding out more about TinyTLF and want to see what you can do with all that stuff you saw in math class, then look for either the guy in the chair (twitter @guyinthechair) or the guy in tennis gear.  See you at MAX!

Organic Text Part I

For those who did not attend 360|Flex, Paul Taylor and I collaborated on an organic text TinyTLF demo.  We are used to thinking about organic text in terms of path deforming, that is, arranging the letters in the text along a general curve or path.  While I’ve illustrated that process for a single spline, the next step is to extend the method to a general path, which may be discontinuous both spatially and in first derivative.  That work is in progress.

Another way to think about organic text is for one of the bounds (top, bottom, left, right) to be nonlinear.  Instead of having text flow inside strict rectangular bounds, consider text flowing around a left or right spline boundary.  Our 360|Flex demo used TinyTLF to render text inside a container whose left boundary was a quadratic Bezier spline.  The right boundary could be a spline as well, but the demo was simplified to have only one nonlinear boundary.  Paul also got a version of the demo running after his presentation where the spline was animated.

This particular quadratic spline is G-1 continuous and non-interpolative.  The spline is only guaranteed to pass through the first and last knots in the sequence.  The first and last quad. Beziers are degenerate; they are actually lines, so the quadratic coefficient is zero.  This causes the spline to be closer to the beginning and ending boundaries than a typical quad.  There is also a tension parameter, which works best for values in the 0.2 – 0.6 range.  I personally like about 0.3.  I don’t know the original attribution for this spline, so the best I can do is credit my computational geometry professor, Dr. R. Tennyson.  The algorithm goes back to at least the late 1970s so the only possible contribution I might be able to claim is addition of tension 🙂

The spline uses instances of a custom quadratic Bezier class for its constituent segments under the assumption that the y coordinates are non-decreasing from segment to segment.  This allows a single value to returned from the x-at-y method.  A horizontal sweep-line is moved from the top to the bottom of a container.  If the sweep line is outside the range of one spline, the x-value at either the minimum or maximum y is used to bound the container, allowing virtual bounds to extend infinitely in either direction.  This is illustrated in the screen shot below.

Horizontal Sweep Line with virtual boundaries

If the sweep line falls within either spline boundary, then the y-coordinate is already known.  The Quadratic Bezier x-at-y algorithm returns a single x-coordinate that completes identification of the boundary.  You can imagine the red line as a proxy for text lines that are laid out by TinyTLF.

I’ll post again whenever Paul gets the presentation and demos online so you can see it in practice.  In the mean time, you can view the current demo from which Paul developed the spline layout.  It’s only been moderately tested, but should be far enough along to deconstruct how the algorithm works.

View demo.

View source.