Get to know the Bezier curve

---

data citation

Station B video: wow, magical Bezier curve!

Blog: A Brief Introduction to Bezier Curves

Zhihu: Curves: Bezier Curves

---

Uses of Bezier curves

• Born based on the fluid design of the car's body structure
• Handle image changes between video state points
• Draw curves as you like, such as:

---

First order Bezier curve

As above, $P_0$、$P_1$Two points constitute a line segment, and we can use a function - linear interpolation (lerp) to calculate a $t$ 值（$t\in [0,1]$ )PPon the line segment$P$ (the point that keeps sliding in the graph). whilePPThe trajectory of$P$ (red line) is the first-order Bezier line segment (curve). The mathematical form of linear interpolation (first-order Bezier formula) is:

$$P=lerp(P_0，P_1，t)=(1-t)P_0+t{P}_1$$

A first-order Bezier curve has two endpoints ( $P_0$、$P_1$), 0 control points .

---

Second-order Bezier curve

As above, suppose now point $P_2$, which is related to $P_1$constitutes a new line segment, we get two first- order interpolation points ( $Q_1$、$Q_2$) , they constitute the green line segment, and it is worth noting that the two interpolation points have the same $t$ -value.

At this time, we generate a second-order interpolation point ( $P$ ), and let it have$t$ -value. Then the trajectory of the point is the second-order. Its formula is derived as:

• The trajectory of the left endpoint of the green line segment:

$$Q_1=(1-t)P_0+t{P}_1$$

• The trajectory of the right endpoint of the green line segment:

$$Q_2=(1-t)P_1+t{P}_2$$

• Second-order Bezier curve formula:

$$P=(1-t)Q_1+t{Q}_2$$
$$=(1-t)((1-t)P_0+t{P}_1)+t((1-t)P_1+t{P}_2)$$
$$=(1-t{)}^2{P}_0+2t(t-1)P_1+t^2{P}_2$$

A second-order Bezier curve has two endpoints ( $P_0$、$P_2$), a control point ( $P_1$）。

---

Third-order Bezier curve

After studying and studying the first-order and second-order Bezier curves, we can know that the Bezier curve achieves order reduction by taking points between two points, and each point selection is a reduction in order.

• $P_0$、$P_1$、$P_2$、$P_3$Interpolation points $Q_1$、$Q_2$、$Q_3$to form a second-order Bezier (green line segment)
• Generate interpolation point O 1 O_1 on this basis$O_1$、$O_2$to form a first-order Bezier (blue line)
• Then with $O_1$、$O_2$Interpolation point PP on$P$ 's trajectory to generate a third-order Bezier curve.

The derivation process of the formula is the same as that of the second-order Bezier curve, so the formula is posted directly without going into details:

$$P=(1-t{)}^3{P}_0+3t(1-t{)}^2{P}_1+3t^2(1-t)P_2+t^3{P}_3$$

A third-order Bezier curve has two endpoints ( $P_0$、$P_3$), two control points ( $P_1$、$P_2$）。

---

Higher-order Bezier curves

• Schematic diagram of a fourth-order Bezier curve:

• Schematic diagram of the fifth-order Bezier curve:

• Higher-order Bezier curve formula:

$$P(t)=\sum _{i=0}^n{P}_i{B}_{i,n}(t)，t\in [0,1]$$

$$B_{i,n}(t)=C_n^i{t}^i(1-t{)}^{n-i}=\frac{n!}{i!(n-i)!}{t}^i(1-t{)}^{n-i}，【i=0,1,...,n】$$

---

Third-order Bezier curve interpolation (Slerp)

After getting familiar with the related concepts of Bezier curve, let's understand its specific application. Usually its application scenarios are:

When two endpoints and two control points are known, according to the animation progress vector $P_x$seek $t$ , then byttFind the curve confirmed by$t$$P_y$。

Recall the third-order Bezier curve formula:
$$P=(1-t{)}^3{P}_0+3t(1-t{)}^2{P}_1+3t^2(1-t)P_2+t^3{P}_3$$

P 0 P_0 in the formula$P_0$、$P_1$etc. are two-dimensional vectors, composed of two one-dimensional vectors $P_x$和$P_y$constitute. And we according to $t$ for$P$ , essentially according to$t$ to find a coordinate$(x,y)$ . Therefore, the formula can be decomposed on two one-dimensional vectors:
$$y=(1-t{)}^3{P}_y+3t(1-t{)}^2{P}_y+3t^2(1-t)P_y+t^3{P}_y$$

$$x=(1-t{)}^3{P}_x+3t(1-t{)}^2{P}_x+3t^2(1-t)P_x+t^3{P}_x$$

And since we usually start at P 0 P_0 when dealing with animations$P_0$and end point $P_3$All can be determined [ $P_0(0,0)、P_3(1,1)$ ], so the above formula can be simplified as (with$x$ example,$y$ in the same way):

$$x=3t(1-t{)}^2{P}_y+3t^2(1-t)P_y+t^3$$

Fully expanded:
$$=3P_{y}t-6{p.m}_y{t}^2+3P_y{t}^3+3P_y{t}^2-3P_y{t}^3+t^3$$

Extract the cubic coefficient $a$：
$$a=3P_y-3P_y+1$$

Extract the quadratic coefficient $b$：
$$b=3P_y-6{p.m}_y$$

Extract the first power coefficient $c$：
$$c=3P_y$$

Simplifies the formula to:
$$x=a{t}^3+b{t}^2+ct$$

move $x$ , change the formula into a one-dimensional cubic equation:
$$a{t}^3+b{t}^2+ct-x=0$$

At this point, you can use the Cardan formula according to xxFind$x$$t$ . later according to$t$ can get$y$：
$$y=(1-t{)}^3{P}_y+3t(1-t{)}^2{P}_y+3t^2(1-t)P_y+t^3{P}_y$$

Code:

double SlerpWithCubicBazier(double pX1, double pY1, double pX2, double pY2, double x) {
    
    
    // x为动画进度，并不是t，t只是一个参数，先根据x求t，再由t确认的曲线上求y
    // 参考 https://github.com/gre/bezier-easing/blob/master/src/index.js
    double t = 0.0;
    if (x <= 0.0) {
    
    
        t = 0.0;
    }else if (x >= 1.0) {
    
    
        t = 1.0;
    }else {
    
    
        // x = (1-t)^3*P0x + 3*(1-t)^2*t*P1x + 3*(1-t)*t^2*P2x + t^3*P3x
        // 提取系数：
        double a = 0.0 + 3 * pX1 - 3 * pX2 + 1.0;
        double b = 3 * 0.0 - 6 * pX1 + 3 * pX2;
        double c = 0.0 + 3 * pX1;
        // 公式可化简为： x = at^3 + bt^2 + ct
        // 转换为基于 t 的一元三次方程：at^3 + bt^2 + ct - x = 0
        double d = 0 - x;

        // 那么就可以通过 SolveCubic 函数根据a、b、c、d四个系数来求解一元三次方程的一个实根
        // 可能该一元三次方程的根不止一个，但不重要，即使有多个根我们也只需要其中之一，且要求这个根是在 0～1 之间的，符合 t 的取值范围要求，如果没有根/没有符合要求的根我们会返回 -1
        double tTemp = SolveCubic(a, b, c, d);
        if (tTemp == -1) {
    
    
            return -1;
        }
        t = tTemp;
    }
    
    // Gy(t) = P0*(1-t)^3 + 3*P1*t*(1-t)^2 + 3*P2*t^2*(1-t) + P3*t^3  t[0,1]
    // PY0=0.0 PY3=1.0
    double coef1 = 0.0 * (1.0 - t) * (1.0 - t) * (1.0 - t);
    double coef2 = pY1 * 3 * t * (1.0 - t) * (1.0 - t);
    double coef3 = pY2 * 3 * t * t *  (1.0 - t);
    double coef4 = 1.0 * t * t * t;
    
    double gt = coef1 + coef2 + coef3 + coef4;
    return gt;
}

SolveCubicThe specific implementation of the function is as follows. It is worth noting that the function of this function cannot be simply equated with solving a cubic equation in one variable. The essential function of this function is to xfind out t? To give a specific example, line 5 of the following code has this statement:

if (d == 0) return 0;

• In the case of d=0, ordinary unary cubic equations can continue to be solved;
• But when SlerpWithCubicBaziercalling SolveCubic, with $d=0-$The value is passed in the form of$x$$d=0$ means$x=0$ , the curve is at the starting point at this time,tthe value of which can be determined without solving the equation, that is,$t=0$。

double FCPSolveCubic(double a, double b, double c, double d) {
    
    
    /* a=0 视为一元二次方程式 */
    if (a == 0) return FCPSolveQuadratic(b, c, d);
    /* d=0表明x=0，则t=0*/
    if (d == 0) return 0;
    
    /* 将三次方的系数变为1，方便后续判别式中的计算，即不用考虑 a^2 这一项了 */
    b /= a;
    c /= a;
    d /= a;
    /* q和r对应求根公式中的p和q，dis即是求根公式的判别式 △ */
    double q = (3.0 * c - FCPSquared(b)) / 9.0;
    double r = (-27.0 * d + b * (9.0 * c - 2.0 * FCPSquared(b))) / 54.0;
    double disc = FCPCubed(q) + FCPSquared(r);
    double term1 = b / 3.0;
    
    if (disc > 0) {
    
    
        /* 运用卡尔丹公式求得一个实根 */
        double s = r + sqrtf(disc);
        s = (s < 0) ? - FCPCubicRoot(-s) : FCPCubicRoot(s);
        double t = r - sqrtf(disc);
        t = (t < 0) ? - FCPCubicRoot(-t) : FCPCubicRoot(t);
        
        double result = -term1 + s + t;
        if (result >= 0 && result <= 1) return result;
    } else if (disc == 0) {
    
    
        double r13 = (r < 0) ? - FCPCubicRoot(-r) : FCPCubicRoot(r);
        
        double result = -term1 + 2.0 * r13;
        if (result >= 0 && result <= 1) return result;
        
        result = -(r13 + term1);
        if (result >= 0 && result <= 1) return result;
    } else {
    
    
        q = -q;
        double dum1 = q * q * q;
        dum1 = acosf(r / sqrtf(dum1));
        double r13 = 2.0 * sqrtf(q);
        
        double result = -term1 + r13 * cos(dum1 / 3.0);
        if (result >= 0 && result <= 1) return result;
        
        result = -term1 + r13 * cos((dum1 + 2.0 * M_PI) / 3.0);
        if (result >= 0 && result <= 1) return result;
        
        result = -term1 + r13 * cos((dum1 + 4.0 * M_PI) / 3.0);
        if (result >= 0 && result <= 1) return result;
    }
    
    return -1;
}

Knowledge used in the above code:

• Discriminant formula for unary cubic equation:

$$△=\frac{q^2}{4}+\frac{p^2}{27}$$

• A real root of Cartan's formula in standard form equations: