Online Example::Closest Point on a Quadratic Bezier to an Arbitrary Point

This demo illustrates the classic Graphic Gems algorithm for computing the closest point on a quadratic Bezier curve to an arbitrary point. The original Gem code was hardcoded for cubic curves. The Actionscript 3 implemenation in Singularity works for either quadratic or cubic Bezier's.

At the heart of the method is a root finder that uses geometric properties of Beziers to find roots of a polynomial in Bezier form. The algorithm computes the innter product of B(t)-P and B'(t) and then converts this to third-order Bezier form. The Bezier root finder returns roots (crossings of the horizontal axis with uniform parameterization). The distance to each candidate solution is compared to the distance from the specified point to the endpoints of the curve to compute the t-parameter at minimum distance from the point.

The port of the original C code is not exact; the signature of several methods was changed and the code will eventually be moved away from reliance on two-dimensional arrays. It will be optimized for 1D array access. The closest point code resides in the new BezierUtils class.

There are some issues with this algorithm, including cusps and alternate optimia. These and alternate approaches to the problem will be discussed in the future.

This example requires the Flash™ 9 player.

You need to upgrade your Flash Player

This example requires the Flash™ 9 player.

After selecting three control points, click on an arbitrary point inside the drawing area. A red knot is placed at that point and a green knot is placed at the closest point on the quadratic Bezier.

The t-parameter corresponding to the closest point on the quadratic is displayed in the status area. The BezierUtils class contains an accessor function to return the minimum distance.

Source Code. Download the Singularity package (this example is in Singularity/demos/ClosestToQuad.mxml).