Dynamic Bezier Spline Scroller With Source

Paul Taylor and I collaborated on a TinyTLF demo for 360|Flex last fall that used a quadratic Beizer spline to form left and right vertical constraints for dynamic text layout. After the demo, a few people said it would be really cool to see the text scroll. The idea scroller, however, should be organic to match the text boundaries, just as a vertical scroller matches a straight-line text boundary. Since the spline boundary is dynamic, this means the scroller track and thumb should be dynamically drawn.

Since I had some time, I took on the task to create another demo for Adobe MAX 2010 and it was completed during the conference. I envisioned a possible TechNote on the scroller’s construction, but time constraints have since rendered that idea impractical. Since a TechNote implies open-sourcing the code, the next best solution is to just open-source the code. If there is sufficient interest, I might do a deconstruction over the course of several blog posts.

Now, the track is the easy part since we already have the constraint and the quad. Bezier spline is one that I released in Degrafa. It’s a simple construction with G-1 continuity and a tension parameter. Additional artificial tangent control is provided by augmenting the spline with degenerate quad. segments at the beginning and end. The spline is non-interpolative.

Most of the details are in the thumb construction and update. This demo uses a relatively simple arc-length parameterization based on adaptive interpolation, and the interpolator may be injected. Two interpolators are provided with the demo, but I’ve only tested one.

The scroller uses a linear model to map thumb position to [0,1] for the thumb value. I don’t like the linear model since it has some issues, so I sketched out a quadratic model, but did not have bandwidth to test the implementation. I also did not have time to test every conceivable path through the code, so there may be a bug or two yet to be uncovered. So, check it out and see if you can come up with some interesting ideas for using this in an application.