I’m going to do one or two posts on quadratic Hermite curves and maybe extend that to splines. One of the items in the upcoming demo is determining the vector that is twice the distance from another vector from P1 to P2. This discussion came up elsewhere in the form of a question; given two points A and B, find the point C that is on the line from A to B at twice the distance from A to B. I actually read the exchange after it was pretty much finished. Lots of formulas involving distance, trig, and one based on the coordinate deltas to extend the line segment from B.

None of these are intrinsically wrong and it is always good to discuss a variety of solutions to a problem. It is also useful to periodically back up and discuss fundamental concepts. We are used to seeing the equation of a line in either two-point or slope-intercept form. Given two points A and B, the parametric equation of the line is (1-t)A + tB . This is a vector equation that yields two scalar equations, one for the x-coordinate and one for the y-coordinate and both int terms of t, i.e. x(t) and y(t). There is another parametric form which is that of a line passing through a point and parallel to another vector, but that is another discussion for another time. If you really want to impress people at the next Flash/Flex conference, you can say that the above equations represent a convex combination of the vectors A and B. However, from that point onward, no one will want to talk with you 🙂

If the parameter, t is in [0,1], the resulting point is on the segment from A to B. It is allowable for t to be outside this interval. Values of t greater than one produce points on the line beyond B (in the direction of the vector AB). Values of t less than zero produce points on the line beyond A in the opposite direction.

What about t = 2? This produces the vector 2B-A. Let dx = B.x – A.x and dy = B.y – A.y. Let dx2 = (2B-A).x – A.x and dy2 = (2B-A).y – A.y. Note that dx2 is 2B.x – 2A.x = 2(B.x – A.x) = 2dx. The (Euclidean) distance from A to B is sqrt(dx*dx + dy*dy). The distance from A to (2B-A) is sqrt(dx2*dx2 + dy2*dy2) = sqrt(4*dx*dx + 4*dy*dy) = sqrt(4(dx*dx + dy*dy)) = 2*sqrt(dx*dx + dy*dy) or twice the distance from A to B. If you want to do even more math, you can extend this to arbitrary t-values.

There is no need to think about distances or angles. It is possible to pre-compute the deltas and derive a formula that extends the line segment outward from B, but this involves unnecessary work and rethinking multiplier values to ‘contract’ the line segment in the other direction. Everything you might need in this regard is already naturally present in the parametric line equation.

I know programmers can understand math, but prefer to deconstruct concepts from code, so there is a vey simple demo that goes along with this discussion. A screenshot is shown below.

The demo starts with two points in a drawing area. They can be dragged inside the white area, but you want to keep them relatively close to the middle of the area. The slider represents the parameter (or t-value). It starts at zero. The red dot is the point on the line. The slider ranges from -2 to 2, so you can see how values between 0 and 1 constrain the point to the line segment from A to B. Notice the dot position when the slider is at its extreme values.

It is good to periodically review basic and fundamental concepts. I know many advanced readers will find this post boring, but if it helps at least a few people, then I think it’s worthwhile. In the near future, we will look at how to construct a quadratic curve with two points and a tangent line.