Shiv ENOW large front end

Company official website: CVTE(Guangzhou Shiyuan Stock)

Team: ENOW team of CVTE software Platform Center for Future Education

The author:

preface

I don’t know if you remember how to draw a function curve, such as quadratic function, trigonometric function, etc., when I go to school, I often take a few points on the exercise book, and then rely on the image characteristics of the function (domain, range, monotonicity, intersection, etc.) for the line, and then have the image of the corresponding function.

So how to draw the corresponding image of the function through the program?

We don’t know what the features of the current function are, so we can’t draw a picture of the function just by taking a few points. However, we all know that a line is composed of many points, so if we want to draw a correspondence line, as long as enough points are provided to achieve the fitting degree on the current picture, the image can be obtained.

The problem then becomes finding enough points for the correspondence line to fit smoothly. The ECharts image library is used to draw the image, considering that the curve smoothness and drawing process are not the scope of this discussion. ECharts can connect multiple points into smooth curves, which involves the knowledge of Bezier curves, interested in Google yourself.

The whole can be divided into two steps:

1. Calculate function coordinate points.

2. Calculate the function singularity.

The following Demo is drawn using ECharts.

Compute the function coordinate points

Take the inverse proportional function as an example:


f ( x ) = k / x ( k As the constant, k indicates 0 . x indicates 0 ) F (x)=k/x(k is constant, k≠0, x≠0)

So k is equal to 1.

Let’s review the function image (taken from Baidu Baike) :

Divide five by two in three, and you write the function to find the point:

function func(x) {
  return 1/x;
}
function generateData() {
  let data = [];
  for (let i = -200; i <= 200; i += 0.1) {
    data.push([i, func(i)]);
  }
  return data;
}
const pointList = geerateData()
Copy the code

The following image is obtained:

We know that the domain of inverse proportion function is x≠0 and the range is y≠0, so there are two bugs in the figure above:

1. The Y value is abnormal

2. The value at x=0

The y value

By observing the cycle, we know that each cycle +0.1, 0.1 is the minimum positive value, and we get y=10. Since x>0, the function decreases monotonically, and y has a maximum value of 10.

X = 0 has value

We don’t know the domain of the function, so we don’t know whether a point exists or not. It’s going to have a value at zero, and it’s going to have a weird line.

Both problems can be solved by finding singularities (points that do not exist).

Compute the function singularity

Here are some wikipedia concepts:

In mathematics, a Singularity, or Singularity (English: Singularity), is an undefined point in a mathematical object. In general, there are two cases: the value of this point is not mathematically defined. For example, a point divided by zero. The point at which the function is located is a singular point; This point has a property — it goes to infinity. In mathematics, however, infinite values are undefined. In physics, points that lead to infinity are also avoided or eliminated, although in cosmology there are gravitational singularities (black hole singularities). Or, in some way, it breaks the whole consistency of the mathematical object. This point is called pathological, which is the opposite of good. 1. A sharp point on a smooth curve or plane (a smooth function) that destroys the differentiability of the function. 2. A broken point in a continuous curve that breaks the continuity of the curve.

To sum up in mathematical functions is the point that causes the function to be discontinuous or non-existent.

So for


f ( x ) = 1 / x f(x)=1/x

So x equals 0 is the singularity. How do we find the singularity?

We know that


f ( x ) = 1 / x f(x)=1/x

Is the singularity of x=0, can we use this exact point to cut? Now that we know the singularities of f(x), can we express any function in terms of f(x)? Here’s a review of the concept of a composite function, from Wikipedia:

Function composition (also known as composition Function) in mathematics is the third Function obtained by applying one Function to another Function point by point.

Any function g(x) can be expressed in the form of inverse proportional function:


g ( x ) = 1 / 1 / g ( x ) ⇒ G (x) = g (x) ⇒ / 1/1

g ( x ) = 1 / h ( x ) . h ( x ) = 1 / g ( x ) g(x)=1/h(x),h(x)=1/g(x)

From the above, it can be concluded that there exists x such that h(x) is equal to 0, which is the singularity of g(x). The problem becomes the solution


1 / g ( x ) = 0 1/g(x)=0

The solution.

To solve the
1 / g ( x ) = 0 1/g(x)=0

The function solution is also unable to solve the usual mathematical problems by sorting out the calculation, here is still used to iteration solution.

Common iteration has dichotomy, Newton iteration method. In this case, Newton iteration method is adopted to solve the problem because of its characteristics and faster convergence. Newton iterative method for reference: ma’s answer. The simple description is:

By finding an initial point (x1,y1) and making a tangent line to the function, the intersection of the tangent line with the X-axis (x2,0) is obtained, and the starting point of the next iteration is x=x2 (x2,y2). The tangent line of the function is made, and so on, until y=0 or less than the defined error value is found. This point can be considered to be the point at which the solution is located or infinitely close to the solution.

After deduction, the formula for solving points can be obtained:


x n + 1 = x n   –   f ( x n ) f ‘ ( x n ) x_{n+1}=x_n\ -\ \frac{f\left(x_n\right)}{f`\left(x_n\right)}

Use the powerful MathJS library to evaluate functions:

Simple coding:

public getSingularity = (fn, range) = > {
    const x0 = range[0];
    const x1 = range[1];
    const reciprocal = 1 / (`${fn}) `;
    const expr = mathCompile(reciprocal);
    const derivative = mathDerivative(reciprocal, 'x');
    const threshold = 0.001;
    const minInterval = 0.001;

    const xArr = this.getXArr(x0, x1, 10);
    let xn = this.getStartX(xArr, expr, derivative);
    let xl = xn - 1;
    let hasSingularity = false;

    for (let i = 0; i < 1000; i++) {
      const y = expr.evaluate({ x: xn });

      if ((Math.abs(y) <= threshold && Math.abs(xn - xl) <= minInterval && i ! = =0) || (i === 0 && y === 0) | |Math.abs(y) === Infinity) {
        hasSingularity = true;
        break;
      } else {
        xl = xn;
        xn = this.loop(xn, expr, derivative); }}return hasSingularity ? xn : undefined;
  };
Copy the code

If judgment within the for loop is to judge whether it conforms to the value of error, which is to find the understanding, that is, the singularity of the original function. Since the initial value may lead to less and less convergence, you need to limit the number of conversions to avoid an infinite loop. Set this value to 1000.

Of course, there’s only one solution here, and we know that there’s an infinite number of singularities like tangent functions, and I’ll leave it to you to think about how to use this idea of finding a single solution to find multiple solutions, which is essentially a process of choosing initial values and controlling errors.

conclusion

So far, the summary is as follows:

1. Iterate to find points on the function.

2. Obtain function singularities by converting functions and solving them to draw the expected image.

3. Similar to the case where tangent function requires multiple solutions, more solutions can be obtained by controlling the selection of initial values and error values.

This article only describes the general idea of drawing, hope to share these methods to see and summarize, thank you for reading.