(Nobel Tech)

1. Before the order

The Bezier curve, also known as the Bezier Curve.

You may not be familiar with this concept, but if you happen to use Windows XP and below, you’ve probably seen it in screensavers at some point.

The Bezier Curve is named after French engineer Pierre Bezier. Working for Renault in the early 1960s, Pierre used it extensively in the design process of vehicle bodies.

At the same time, because Bessel curve is mathematically simple enough to fit the real curve, it has gradually become the basis of computer vector graphics with the development of time.

To this day, you can see the use of these curves in game development, art, typography, animation, robot control, architectural design, path planning, from mathematical logic to visual expression to industrial engineering and even aviation and military.

For example, in mainstream design software, the pen tool is one of the three applications of the Bezier curve, and the roller coaster you ride on at the amusement park is also designed with bezier curve.

(Screenshot from CNKI)

If you search for “Bezier curve” on the Internet, a lot of research will come up.

It can be said that it has become one of the basic theoretical facilities for building modern society.

2. A

Imagine how you would describe a curve.

First of all, there must be two endpoints. Any line segment must have a beginning and an end.

Then, if the line segment is curved, we need to know how to define the direction and degree of bending.

It can be assumed that a line segment bends because it is under the influence of some force. Just like a piece of wool hanging flat in the air, the middle will sag under the influence of gravity.

Thus, in order to fit a real curve, we can also apply a directional force on any straight line segment, thus driving the whole straight line to bend.

The force field exists everywhere, and the operating point of the force can be selected at any point on the line segment, but the length of the line segment is random, and the coordinates are random. Only two endpoints can be determined at the beginning, so naturally, the endpoints become the entry point.

Bessel came up with an ingenious way of pulling a “force” on the end points of the segment, which were fixed, but the point in the middle of the segment would be displaced by the force.

As we all know, “force” is a vector, with any direction and any magnitude.

So the mathematical way to describe the pulling force, it’s just a vector.

After the vector is visualized, if the endpoint is positioned as the starting point of the vector, the endpoint of the vector will appear around the endpoint.

This endpoint, the control point, is also called the anchor point.

Anchors and endpoints make up the physical composition of bezier curves.

And the calculation rules are the other, most interesting part of the Bezier curve. It determines exactly what the “drag” effect will look like, and ultimately what the curve will look like.

In practical application, this kind of rule can be implemented to countless kinds of results according to requirements. Usually, in mathematical expression, because there are n power kinds of specific coefficients of the rule, it is named “order” to describe. From 1 to n, that means from 1 to n.

This article will briefly introduce the three most common Bessel curves, namely first -, second – and third-order Bessel curves, to understand what kind of existence this is.

3. Three classic types

① First-order (linear) Bessel curves


B ( t ) = P 0 + t ( P 1 – P 0 ) = ( 1 – t ) P 0 + t P 1 .   t ∈ [ 0 . 1 ] B (t) = P_0 + t (P_1 – P_0) = (1 – t) P_0 + tP_1, \ \ t in [0, 1]

In this formula, B(t) is the position of any point on the Bezier curve.

T traverses from 0 to 1 to form a complete curve.

P0 and P1 are the two ends of the segment, with P0 as the beginning and P1 as the end.

T is called interpolation, and this algorithm is also called interpolation.

And you can see that the coefficients on both endpoints add up to 1.

And it’s very intuitive if you draw it, in this formula, any point on the Bezier curve is on the segment of the line where the two ends are connected.

(Schematic: Wiki)

Yes, bezier curves can describe not only curved lines, but also straight lines. In other words, a straight line segment is a form of a curve. Just because you can’t bend doesn’t mean you can’t bend.

A first-order Bezier curve is a straight line, so it’s also called a Linear Bezier curve.

Of course, mathematics in junior high school also taught us that the expression method of any straight line in cartesian coordinate system is:


y = a x + b { a = P 1 – P 0 b = P 0 x = t y = B ( t ) \begin{aligned} & y = ax+b & \begin{cases} a = P_1-P_0 \\ b = P_0 \\ x = t \\ y = B(t) \\ \end{cases} \end{aligned}

Therefore, the first order Bezier curve conforms to the linear rule.

② Second order (square) Bessel curve


B ( t ) = ( 1 – t ) 2 P 0 + 2 t ( 1 – t ) P 1 + t 2 P 2 .   t ∈ [ 0 . 1 ] B (t) = (1 – t) + 2 t ^ 2 p_0 (1 – t) P_1 + t ^ 2 p_2, \ \ t in [0, 1]

The linear Bezier curve makes it difficult to see the effect of the anchor point, and from the second order, the point that marks the control effect appears.

Bessel curve is described as follows: in the set of all function points of scale (n), the first point P0 represents the starting endpoint, the last point P(n-1) represents the end point, and the intermediate points are all control points (anchor points) in turn. At the same time, order n minus 1.

The second-order Bezier curve has three functional points, P1 as the anchor, and P0 and P2 at the beginning and end as the endpoints.

And the coefficients, you can see intuitively that this is a first order square.


( ( 1 – t ) + t ) 2 = ( 1 – t ) 2 + 2 t ( 1 – t ) + t 2 ((1-t)+t)^2 = (1-t)^2+2t(1-t)+t^2

The Quadratic Bezier curves are called Quadratic Bezier curves

From the time the square was introduced, the dimension of the curve point went from a linear one to a two-dimensional plane.

This is where the bending occurs.

(Schematic: Wiki)

From the linear curve, it can be found that the motion path of the point of bezier curve is on the line. Then, when the line itself moves, the resulting line segment is curved.

In order to control the motion of the straight line, additional anchor points are needed to specify a new path, so that the two endpoints of the straight line move to build the overall change path of the new line. That’s what you see above.

In the square curve, this single anchor point forms two straight lines with the two points before and after, respectively restricting the trajectories of the two endpoints of the green line. And you get the final curve.

If you happen to play Cities: Skylines, you’ll see that the curved road plan in Cities: Skylines is a square Bezier curve.

(Screenshot from T4rget)

③ Third-order (cubic) Bessel curves

The second-order anchor controls both endpoints, so if you control both endpoints for more freedom, then you have a third-order Bessel curve.

The cubic Bezier curve is the cubic variation of the interpolation coefficient.


( ( 1 – t ) + t ) 3 = ( 1 – t ) 3 + 3 t ( 1 – t ) 2 + 3 t 2 ( 1 – t ) + t 3 B ( t ) = ( 1 – t ) 3 P 0 + 3 t ( 1 – t ) 2 P 1 + 3 t 2 ( 1 – t ) P 2 + t 3 P 3 .   t ∈ [ 0 . 1 ] \begin{aligned} & ((1-t)+t)^3 = (1-t)^3+3t(1-t)^2+3t^2(1-t)+t^3 \\ & B(t)=(1-t)^3P_0+3t(1-t)^2P_1+3t^2(1-t)P_2+t^3P_3,\ T \ \ \ \ [0, 1] in the end} {aligned

There are four function points: two endpoints and two anchors.

The two anchors are acting on the two endpoints, and they also represent a trend of motion, where the curve starts at P0, moves toward P1, then moves toward P2 and finally comes to P3.

(Schematic: Wiki)

Cubic Bezier curves are also called Cubic Bezier curves because the Cubic Bezier is Cubic again.

Third-order Bezier curves are also commonly used in current mainstream design software, among which “pen” tool is the most famous.

You see it in Planet Coaster, too.

(Screenshot from Freya Holmer)

4. The extension

To sum up, it is not difficult to deduce the n-order Bessel curve extended to general expression:


B ( t ) = ∑ i = 0 n ( n i ) P i ( 1 – t ) ( n – i ) t i = ( n 0 ) P 0 ( 1 – t ) ( n ) t 0 + ( n 1 ) P 1 ( 1 – t ) ( n – 1 ) t 1 +   . . . + ( n n – 1 ) P n – 1 ( 1 – t ) 1 t n – 1 + ( n n ) P n ( 1 – t ) 0 t n .   t ∈ [ 0 . 1 ] \begin{aligned} B(t) &=\sum_{i=0}^{n}{\binom{n}{i}P_i(1-t)^{(n-i)}t^i} \\ &= \binom{n}{0}P_0(1-t)^{(n)}t^0+\binom{n}{1}P_1(1-t)^{(n-1)}t^1 \\ & +\ … + \ \ \ & binom {n} {n – 1} P_ {}, n – 1) (1 – t ^ t ^ {1} {}, n – 1 + \ binom {n} {n} P_n (1 – t) ^ t ^ n {0}, \ t \ \ [0, 1] in the end} {aligned

Bessel curves of the fourth order, via: wiki

Bessel curves of the fifth order, via: wiki

Isn’t that interesting?

Basically, existing tools can directly plot bezier curves by themselves.

However, in artistic creation, we can also use linear interpolation function Lerp () to present the process of drawing and generating Bezier curves.

For example, the following is the generation process of quadratic and cubic Bezier curves, which can be seen in various new media art exhibitions.

And the amazing thing is, there’s not a single curve in this picture, it’s all straight lines, but you can see the border curve, and when the lines are infinitely dense, and the edges are infinitely smooth, it’s a standard Bezier curve.

This graph is conveniently generated by Processing.

Of course, in practice, not all curves can be described by Bezier curves.

Although it is possible to fit indefinitely, there are some curves that are better drawn in other ways from a cost standpoint, such as arcs.

Bessel curves are common, but not unique. Specific use or should consider according to the actual situation, can not be unique theory.

In addition, there is an introduction video about Bezier curve produced by some foreign executives, which is also very easy for you to see.

Is carrying, B station link here: www.bilibili.com/video/BV1hL…

Have fun.