Posts Tagged ‘Hermite Curve’

Degrafa Quadratic Hermite Spline

September 17, 2009 Comments off

The quadratic Hermite spline is now available in the Origin branch.  It works pretty much like any of the other splines with the exception of the method to manually assign the start tangent.  The default is automatic selection of start tangent, which uses the reflection discussed in this post.  A screenshot is provided below.

Automatic Selection of Start Tangent

Automatic Selection of Start Tangent

The blue curve results from plotting the low-level utility upon which the Degrafa spline is based.  It is plotted old-school, point-to-point with manual start tangent.  The red curve is the Degrafa spline fitting the same set of points in MXML with automatic selection of start tangent, and approximated by quadratic Beziers in the Degrafa command stack.

The relevant MXML is

<?xml version="1.0" encoding="utf-8"?>
 <mx:Application xmlns:mx=""
 width="600" height="500" >

 <mx:Canvas id="quadSpline" />
 <paint:SolidStroke id="redstroke" weight="2" color="#FF0000"/>
 <splines:QuadraticHermiteSpline id="hermiteSpline" graphicsTarget="{[quadSpline]}"
 stroke="{redstroke}" knots="90,250 250,230 330,320 410,250" />

The next screenshot shows what happens if the start tangent is arbitrarily set to the point (100,100).

Assigning 100,100 as the start tangent

Assigning 100,100 as the start tangent

The only change to the MXML is the line

<splines:QuadraticHermiteSpline id=”hermiteSpline” graphicsTarget=”{[quadSpline]}” stroke=”{redstroke}” knots=”90,250 250,230 330,320 410,250″ startTangent=”100,100″ />

A very wide variety of interesting curves can be created by changing knot coordinates and the start tangent point.  Update your SVN and enjoy 🙂

Quadratic Hermite Curves Part 6

September 11, 2009 Comments off

Part 5 of this series introduced the mathematical foundation for a quadratic Hermite spline with segments comprised of individual quadratic Hermite curves (C-1 continuity at the joins). Since the system of equations for the start tangent of each curve is underdetermined, a start tangent for the first curve is required.

Selection of an initial tangent is entirely arbitrary.  For the Degrafa spline, I intend to have a method that provides an automatic selection.  This allows the spline to fit a set of knots without any further user interaction.  It is important to understand that no matter what algorithm is chosen, there is no theory that makes any one method ‘better’ than any other.  It’s entirely a method of designer preference.

This is a feature that I really like about this type of spline.  Because of the ‘coupling’ in the upper bi-diagonal system shown in part 5, the selection of a start tangent for the first segment ‘ripples’ through the entire curve.  This allows a wide variety of interesting curves to be created under the control of a single parameter.

To see what I mean, two screenshots are provided from the program I’m using to test the base utility on top of which the Degrafa spline will be created.



Two dramatically different curves are obtained  from the same set of knots by adjusting one parameter; the start tangent of the first quad. Hermite segment.

Quadratic Hermite Curves Part 3

August 28, 2009 Comments off

In part 2 of this series, we looked at the geometric interpretation of the end tangent of the quadratic Hermite curve.  There was an issue in terms of relating the vector endpoints in the parent coordinate system to the tangent vector that is computed based on delta-x and delta-y from the point P0.  Compensating for this issue was necessary in order to draw the tangent vector.

I also suggested computing a unit vector in the direction of the tangent as an exercise so that it could be drawn at constant length.  The two questions addressed in this post are

1) Do we constantly have to adjust for the deltas between T and P0 in order to draw a tangent to the curve at any parameter value in [0,1]?

2) How exactly do we compute a unit vector in the tangent direction and draw a constant-length tangent segments?

The answer to question 1 is no.  The compensation, if you want to call it that, is already accounted for in the polynomial coefficients which are computed based on the delta-x and delta-y between T and P0.  So, we can use P'(t) = b + 2ct (review the computation of the ‘b’ coefficient in the code).  In part 2, we substituted for b and c in terms of the endpoints of the original vectors.  Once the polynomial coefficients are computed, we can use them directly for the derivative at any parameter value.

This raises the question of why part 2 in the first place?  The geometric formula for the end tangent in terms of the original points (and T) will be important in part 4 when we discuss joining quadratic  Hermite segments.

For question 2, the unit tangent vector is P(t)/||P(t)||, where ||.|| is the vector 2-norm.  Let dx = x'(t), dy = y'(t), and ux = x-component of unit tangent vector, uy = y-component of unit tangent vector.

Then, we can write

ux = dx/sqrt(dx*dx + dy*dy)

uy = dy/sqrt(dx*dx + dy*dy)

Since this is a unit vector, multiply by any amount to draw a constant-length vector of that amount.  For example, to draw a tangent segment of 40px length,

moveTo( x(t), y(t) ), then lineTo( x(t)+40*ux, y(t) + 40*uy )

This concept is illustrated in a simple demo, a screenshot of which is shown below.

Tangent to a quadratic Hermite curve

Tangent to a quadratic Hermite curve

The slider adjusts the parameter value for the tangent segment between 0 and 1. (As an aside, these demos require the F10 player).

In the next post in this series, we will see how to join two quad. Hermite curves with continuity at the join.  In the mean time, think about what is the maximum continuity that could possibly be enforced at a join point?  Hint:  What degree is the derivative of a quadratic polynomial?

View demo.

View source.

Curve-Constrained Scrolling in Actionscript

February 10, 2009 5 comments

I’ve received a few inquiries in recent weeks regarding parametric curves used as paths for a nonlinear scrolling UI element.  Essentially, a sprite is constrained to be dragged along a curve representing an outline of some part of the UI.  I’ve had to do this for more than one project, so some time ago I authored a TechNote on the process.

The TechNote starts with a simplistic timeline-based approach and then discusses some different approaches for handling the problem entirely in script.  This allows the method to be expanded to UI elements that are dynamically created.

Scrolling constrained to the outline of a UI element

Scrolling constrained to the outline of a UI element

Recently, some of the projection computations were used in the Degrafa quadratic Bezier join method.