M

Quadratic Bezier curves are defined by second order polynominal, and can be written as

$$ \overline{B}(t) = \left( 1 - t \right) \overline{P}_0 + 2 \left( 1 - t\right)t\overline{P}_1 + t^2\overline{P}_2 $$

where t is real parameter with values in range [0,1]. P’s are respectively curve starting point, anchor point and the end point. Derivative of the quadratic Bezier curve can be written as

Quadratic Bezier Curve derivative

$$ \frac{\partial{\overline{B}(t)}}{\partial{t}} = 2t\left( \overline{P}_0 - 2 \overline{P}_1 + \overline{P}_2 \right) + 2 \overline{P}_1 - 2 \overline{P}_0 $$

Length of any parametric (in general length of any well defined curve) curve can be computated using curve length integral. In case of 2nd order Bezier curve, using its derivatives, this integral can be written as

Quadratic Bezier Curve integral

$$ L_B=\int^t_0 \sqrt{B^\prime_x(t)^2 + B^\prime_y(t)^2} \,dt $$

To simplify this integral we can make some substitutions. In this case it we will look like this

$$ \overline{a} = \overline{P}_0 - 2 \overline{P}_1 + \overline{P}_2 $$

$$ \overline{b} = 2\overline{P}_1 - 2 \overline{P}_0 $$

$$ \frac{\partial{\overline{B}(t)}}{\partial{t}} = 2t\overline{a} + \overline{b} $$

Next after doing some algebra and grouping elements in order to parameter t we will do another substitutions (to make this integral easier)

A = 4(ax2+ay2)

B = 4(axbx+ayby)

C = bx2 + by2

Finally we get simplified inegral, that can be written in form

$$ L_B = \int^1_0 \sqrt{At^2 + B t + C} \,dt $$

Integral to calculate

This integral can be ‘easily’ simplified and calculated using relation (see WolframAlpha )

$$ \int \sqrt{x^2+k} \,dx = \frac{1}{2}\left( x\sqrt{x^2+k} + k \log \left| x + \sqrt{x^2+k} \right| \right) + C $$

but we need to do some more substitutions

$$ u = \frac{B^2}{4A} $$

$$ k = \frac{4AC-B^2}{4A} $$

$$ x = t\sqrt{A}+\sqrt{u} $$

After doing elementary algebra we finaly get our final expression. To calculate length of quadratic Bezier curve with this expression all we need are coordinates of end points and control point. We dont need to use iterative methods anymore.

quadratic bezier curve

$$ L_B = \frac{1}{3 A^\prime }\left[ 2 * A^\prime S_{ABC} + 2B\sqrt{A} \left( S_{ABC} - \sqrt{C} \right) + \left( 4AC - B^2 \right)\log \left| \frac{ 2\sqrt{A} + F_{BA} + 2 S_{ABC} }{ F_{BA} + 2\sqrt{C} } \right| \right] $$

where

$$ A_{32} = 2 A ^ \frac{3}{2} $$

$$ S_{ABC} = \sqrt{A+B+C} $$

$$ F_{BA} = \frac{B}{\sqrt{A}} $$

Accuracy & known issues

  • numerical instability when bezier curve is close to straight line - consider reading this awesome studyby Raph Levien

Used in pixie.js engine