# 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.