Degrafa Quadratic Bezier Join

I’m a little hesitant to release incomplete methods, but this one is purely experimental, so I’ve put it out for advanced users.  Suppose you define a quadratic Bezier curve and then ‘join’ another quad. to it by specifying only a single additional point.  The curves should transition smoothly at the join point, i.e. the (x1,y1) point of the first curve.  Both curves are independent quadratic Beziers.  By definition, (x0,y0) of the second curve is just (x1,y1) of the first curve.  The purpose of the join is to compute (cx,cy) for the second curve to provide G-1 continuity.  Think of this as using one curve to constrain the creation of another, like having UI elements that appear to smoothly flow from one to another even though they are dynamically created (the request that spawned this method in the first place).

This ‘join’ operation is temporarily part of the AdvancedQuadraticBezier class.  It is a prelude to a more general quadratic spline that can be purely interpolative or have successive points influence only shape of the spline.  The latter options is useful for fast animation as in simulated hair, for example.

The following screenshot illustrates the join.

Joining two quadratic Beziers with G-1 continuity
Joining two quadratic Beziers with G-1 continuity

After specifying the first quad, only the additional point, P, is supplied in order to create the second (joined) curve.  The algorithm produces G-1 continuity at the join point.  There is a placeholder for adjustable tension.

If you move the P point around, you can see how the curve adjusts, however, the algorithm is not completely implemented.  So, there are some orientations in which the joined curve ‘kinks.’  This will be addressed in a future implementation, most likely in the quadratic spline.  I’m not convinced this method alone is all that useful (although I have received a couple requests) and not convinced that it belongs in AdvancedQuadraticBezier.  If it survives, it may be moved to the (not yet released) BezierUtils class.  I’m still testing that class and have yet another issue to address to help a Degrafa user, so consider the quad. Bezier join as unfinished and purely experimental.  If you do find a good production use for it, please contact me.

View Demo.

View Source.


5 thoughts on “Degrafa Quadratic Bezier Join

  1. This is a really useful concept. In fact SVG (maybe Degrafa as well?) defines a shorthand quadratic curve where the control point is a direct reflection of the previous control point. I’m interested to see how your tension difference will end up comparing.

  2. Thanks, Tyler. I’m a bit embarrassed to admit to little experience with SVG, so you’ve given me added incentive to make up that lack of background.


    – jim armstrong

  3. SVG, though open and decently supported, is a messy standard – one of the reasons Adobe released their own FXG. So it’s not an embarrassment at all and may not be worth investing too much time in.

    Your direction is a little different without the control being an exact reflection. It could prove to become a better solution in the end, so I hope you continue the experimentation.

  4. off-topic a little, but since I don’t have a way to contact you… Have you done much with quadratic curve intersections? I’m interested and I know Degrafa is interested in features such as intersecting shapes, path offsets, etc. I’ve done a lot of experimental work, but I can’t say it’s optimized for such a complex subject. Contact me if you’d like to chat.

Comments are closed.