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.
Yes, that’s a pretty ugly-looking demo🙂 Your job is to turn it into something visually impressive. Good luck!
The companion demo illustrates how to use two of the Bezier splines to bound the width of an element.