# JS Acquisition Points of Bessel Curve Algorithms

Keywords: Front-end github Javascript

# 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

Posted by dale282 on Thu, 21 Mar 2019 14:21:53 -0700