Bezier curves

A Bezier curve \( \underline{P(t)} \) that's controlled by the set of points \( \underline{p_n} \) is defined as follows: $$ \underline{P(t)} = \sum_{n=0}^{k} \binom{k}{n} t^n (1-t)^{k-n} \underline{p_n} $$ There's plenty of info you can find about these online and they're typically chosen because of their smoothness properties, including at the boundaries.

Maths $$ \underline{P'(t)} = \sum_{n=0}^{k} \binom{k}{n} \frac{d}{dt} \left ( t^{n} (1-t)^{k-n} \right ) \underline{p_n} $$ $$ = \sum_{n=1}^{k} \binom{k}{n} n t^{n-1} (1-t)^{k-n} \underline{p_n} - \sum_{n=0}^{k-1} \binom{k}{n} (k-n) t^{n} (1-t)^{k-n-1} \underline{p_n} $$ $$ = \sum_{n=0}^{k-1} \binom{k}{n+1} (n+1) t^{n} (1-t)^{k-n-1} \underline{p_{n+1}} - \sum_{n=0}^{k-1} \binom{k}{n} (k-n) t^{n} (1-t)^{k-n-1} \underline{p_n} $$ $$ = \sum_{n=0}^{k-1} t^{n} (1-t)^{k-n-1} \left ( \binom{k}{n+1} (n+1) \underline{p_{n+1}} - \binom{k}{n} (k-n) \underline{p_n} \right ) $$ $$ = \sum_{n=0}^{k-1} t^{n} (1-t)^{k-n-1} k \binom{k-1}{n} \left ( \underline{p_{n+1}} - \underline{p_n} \right ) $$ $$ \implies \underline{P'(0)} = k \left ( \underline{p_1} - \underline{p_0} \right ), \underline{P'(1)} = k \left ( \underline{p_k} - \underline{p_{k-1}} \right ) $$ In English, this means that the tangents at the start and end of the curve pass through the first 2 or last 2 points respectively.


The most commonly used form is a cubic ( \(k = 3 \) ) since it has a point for the start ( \( \underline{p_0} \) ), at the end ( \( \underline{p_3} \) ), and two more for controlling the tangents ( \( \underline{p_1}, \underline{p_2} \) ). When plugged into the formula above this becomes the commonly seen: $$ \underline{P(t)} = (1-t)^{3} \underline{p_0} + 3 t (1-t)^{2} \underline{p_1} + 3 t^2 (1-t) \underline{p_2} + t^3 \underline{p_3} $$
Cubic Bezier demo

Click and drag to move the points, or use the sliders below

Sorry, your browser does not support canvas.

\( \underline{p_0} = \)

\( \underline{p_1} = \)

\( \underline{p_2} = \)

\( \underline{p_3} = \)

Shapes

We can approximate a circle with a few Bezier curves stitched together. Since we know how to describe a circle exactly, we can use that to deduce how the Bezier curves must look.

Maths Given \( N \) Bezier curves, \( \underline{C_i(t)} \), each governed by a set of points, \( \underline{p_{i,n}} \), the start and end of each curve must lie at equal distances around the unit circle: $$ \underline{C_{i}(0)} = \begin{pmatrix} \sin ( 2 \pi i / N ) \\ \cos ( 2 \pi i / N ) \end{pmatrix}, \underline{C_{i}(1)} = \underline{C_{i+1}(0)} $$ $$ \implies \underline{p_{i,0}} = \begin{pmatrix} \sin ( 2 \pi i / N ) \\ \cos ( 2 \pi i / N ) \end{pmatrix}, \underline{p_{i,3}} = \underline{p_{i+1,0}} $$ For the other two points ( \( \underline{p_{i,1}}, \underline{p_{i,2}} \) ), we can make the assumption that we want the midpoint to lie on the curve too: $$ \underline{C_{i}(1/2)} = \begin{pmatrix} \sin ( \pi (2 i + 1) / N ) \\ \cos ( \pi (2 i + 1) / N ) \end{pmatrix} $$ Substituting \( t = 1/2 \) into the formula for the cubic Bezier curve we also get that: $$ \underline{C_i(1/2)} = (1-1/2)^{3} \underline{p_{i,0}} + 3 (1/2) (1-1/2)^{2} \underline{p_{i,1}} + 3 (1/2)^2 (1-1/2) \underline{p_{i,2}} + (1/2)^3 \underline{p_{i,3}} $$ $$ = \frac{1}{8} \left ( \underline{p_{i,0}} + 3 \underline{p_{i,1}} + 3 \underline{p_{i,2}} + \underline{p_{i,3}} \right ) $$ We can't equate these yet since we still have 2 unknowns, but we can make a second assumption that the tangents at the start of one Bezier curve matches the tangent of the next, and that they're symmetric about the midpoint (which from the \( i = 0 \) case implies that the tangent must be a scaled copy of the circle's tangent): $$ \underline{C_{i}'(1)} = \underline{C_{i+1}'(0)}, \underline{C_{i}'(0)} = a \begin{pmatrix} \cos ( 2 \pi i / N ) \\ - \sin ( 2 \pi i / N ) \end{pmatrix} $$ $$ \implies \underline{p_{i,1}} = \underline{p_{i,0}} + \underline{C_{i}'(0)}, \underline{p_{i,2}} = \underline{p_{i,3}} - \underline{C_{i+1}'(0)} $$ Now we can equate these together and solve for \( a \) (really we only need to solve x or y, but best to check that both give the same results): $$ \underline{C_i(1/2)} = \begin{pmatrix} \sin ( \pi (2 i + 1) / N ) \\ \cos ( \pi (2 i + 1) / N ) \end{pmatrix} $$ $$ = \frac{1}{8} \left (\underline{p_{i,0}} + 3 \underline{p_{i,1}} + 3 \underline{p_{i,2}} + \underline{p_{i,3}} \right) $$ $$ = \frac{1}{8} \left (\underline{p_{i,0}} + 3 \left ( \underline{p_{i,0}} + \underline{C_{i}'(0)} \right ) + 3 \left ( \underline{p_{i,3}} - \underline{C_{i+1}'(0)} \right ) + \underline{p_{i,3}} \right ) $$ $$ = \frac{1}{8} \left (4 \underline{p_{i,0}} + 4 \underline{p_{i,3}} + 3 \underline{C_{i}'(0)} - 3 \underline{C_{i+1}'(0)} \right ) $$ $$ = \frac{1}{8} \left ( 4 \begin{pmatrix} \sin ( 2 \pi i / N ) \\ \cos ( 2 \pi i / N ) \end{pmatrix} + 4 \begin{pmatrix} \sin ( 2 \pi (i + 1) / N ) \\ \cos ( 2 \pi (i + 1) / N ) \end{pmatrix} + 3 a \begin{pmatrix} \cos ( 2 \pi i / N ) \\ - \sin ( 2 \pi i / N ) \end{pmatrix} - 3 a \begin{pmatrix} \cos ( 2 \pi (i + 1) / N ) \\ - \sin ( 2 \pi (i + 1) / N ) \end{pmatrix} \right ) $$ $$ = \frac{1}{8} \begin{pmatrix} 4 \left ( \sin ( 2 \pi i / N ) + \sin ( 2 \pi (i + 1) / N ) \right ) + 3 a \left ( \cos ( 2 \pi i / N ) - \cos ( 2 \pi (i + 1) / N ) \right ) \\ 4 \left ( \cos ( 2 \pi i / N ) + \cos ( 2 \pi (i + 1) / N ) \right ) + 3 a \left ( - \sin ( 2 \pi i / N ) + \sin ( 2 \pi (i + 1) / N ) \right ) \end{pmatrix} $$ $$ = \frac{1}{8} \begin{pmatrix} 8 \sin ( \pi (2 i + 1) / N ) \cos (\pi / N) + 6 a \sin ( \pi (2 i + 1) / N ) \sin (\pi / N) \\ 8 \cos ( \pi (2 i + 1) / N ) \cos ( \pi / N ) + 6 a \cos ( \pi (2 i + 1) / N) \sin( \pi / N ) \end{pmatrix} $$ $$ \implies \begin{pmatrix} \sin ( \pi (2 i + 1) / N ) \\ \cos ( \pi (2 i + 1) / N) \end{pmatrix} = \frac{4 \cos (\pi / N) + 3 a \sin (\pi / N)}{4} \begin{pmatrix} \sin ( \pi (2 i + 1) / N ) \\ \cos ( \pi (2 i + 1) / N) \end{pmatrix} $$ $$ \implies a = \frac{4 - 4 \cos (\pi / N)}{3 \sin (\pi / N)} = \frac{4}{3} \tan \left ( \frac{\pi}{2N} \right ) $$ Now we can compute all positions, \( \underline{p_{i,n}} \), given the number of curves, \( N \), that we'll use to approximate a circle.

By a similar derivation (extending \( \underline{C_{i}(1/2)} \) further) we can also approximate an \( N \)-gon using stitched Bezier curves. Simply joining the start and end sections together would work too, but that produces a shape that isn't as smooth as using stitched curves. $$ a_{\beta} = \frac{4}{3} \tan \left ( \frac{\pi \beta}{2 N} \right ) $$


Bezier circles demo

Pick the number of points and see what that approximation looks like

Sorry, your browser does not support canvas.

Number of curves ( \( N \) )

\( \beta \)


Scale