# Quadratic Hermite Curves Part 3

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.