What is the Bessel curve?

Bezier curve, also known as Bezier curve or Bezier curve, is a mathematical curve applied to two-dimensional graphics applications.

In this first-order Bessel curve drawing process, the black dot moves from P 0 - > P 1 as a percentage t, so you can't see anything. ~Let's move on to the following figure.

This is a second-order Bessel curve. There is a small green point moving in percentage t from P -> P 1, and a small green point moving in percentage t from P -> P 2. There is also a small black point moving in percentage t between the two green points. The trajectory generated by this black point is a second-order Bessel curve.

This is a third-order Bessel curve. Similarly, there are three green dots. The dots move in percentage t, and eventually a small black dot is obtained. The trajectory of this small black spot is the third order Bessel.

Likewise, there is a fourth-order Bessel.

Similarly, Bessel of order 6 and Bessel of order N.

In fact, in our application, the third-order Bessel is enough to meet our business needs. In our life, many third-order Bessel curves can be combined into any curve. The pen tool in our photoshop is realized by the third-order Bessel curve.

Analysis of Bessel Curve Equation

Mathematicians have given us formulas:

Sorry, the high number is returned to the teacher. This Nima formula can not be understood. It doesn't matter. We can understand it in a simplified way.

// t is a percentage and a is a parameter

// Bessel Curve Formula of Order 1
function onebsr(t, a1, a2) {
    return a1 + (a2 - a1) * t;
}

// Bessel Curve Formula of Order 2
function twobsr(t, a1, a2, a3) {
    return ((1 - t) * (1 - t)) * a1 + 2 * t * (1 - t) * a2 + t * t * a3;
}

// 3-order Bessel Curve Formula
function threebsr(t, a1, a2, a3, a4) {
    return a1 * (1 - t) * (1 - t) * (1 - t) + 3 * a2 * t * (1 - t) * (1 - t) + 3 * a3 * t * t * (1 - t) + a4 * t * t * t;
}

According to the formula, we can bring in coordinates for calculation.

/**
     * @desc First-order Bessel
     * @param {number} t Current percentage
     * @param {Array} p1 Starting coordinates
     * @param {Array} p2 Terminal coordinates
     */
    oneBezier(t, p1, p2) {
        const [x1, y1] = p1;
        const [x2, y2] = p2;
        let x = x1 + (x2 - x1) * t;
        let y = y1 + (y2 - y1) * t;
        return [x, y];
    }

    /**
     * @desc Second-order Bessel
     * @param {number} t Current percentage
     * @param {Array} p1 Starting coordinates
     * @param {Array} p2 Terminal coordinates
     * @param {Array} cp control point
     */
    twoBezier(t, p1, cp, p2) {
        const [x1, y1] = p1;
        const [cx, cy] = cp;
        const [x2, y2] = p2;
        let x = (1 - t) * (1 - t) * x1 + 2 * t * (1 - t) * cx + t * t * x2;
        let y = (1 - t) * (1 - t) * y1 + 2 * t * (1 - t) * cy + t * t * y2;
        return [x, y];
    }

    /**
     * @desc Third-order Bessel
     * @param {number} t Current percentage
     * @param {Array} p1 Starting coordinates
     * @param {Array} p2 Terminal coordinates
     * @param {Array} cp1 Control point 1
     * @param {Array} cp2 Control point 2
     */
    threeBezier(t, p1, cp1, cp2, p2) {
        const [x1, y1] = p1;
        const [x2, y2] = p2;
        const [cx1, cy1] = cp1;
        const [cx2, cy2] = cp2;
        let x =
            x1 * (1 - t) * (1 - t) * (1 - t) +
            3 * cx1 * t * (1 - t) * (1 - t) +
            3 * cx2 * t * t * (1 - t) +
            x2 * t * t * t;
        let y =
            y1 * (1 - t) * (1 - t) * (1 - t) +
            3 * cy1 * t * (1 - t) * (1 - t) +
            3 * cy2 * t * t * (1 - t) +
            y2 * t * t * t;
        return [x, y];
    }

Algorithm encapsulation

I encapsulated the Bessel curve, added a method to get the path points, and then used the span tag to draw the effect on the page.

Let's look at the effect of getting points on the 1-3 order Bessel curve in DEMO.

The github address of demo: https://github.com/mtsee/Bezier