Zero, preface,

This passage is to prepare for the next one, and also to review some basic mathematics

This belongs to leisure entertainment, do not take it too seriously, small science, do not like to spray this knowledge point before 4 points you can casually look, but the fifth point is very important, this source code see Jie text specifications

This article knowledge:

1) The concept of mathematical functions 2) The graph of functions in cartesian coordinates 3) the graph of functions in polar coordinates 4) the graph of functions in parametric equations 5) The detailed analysis of sine functions (for the next article)

1. The concept of mathematical functions:

1. Required High school Math 1:
Let A and B be non-empty sets of numbers. If according to some definite correspondence f, for any number x in set A, there is A unique definite number F (x) corresponding to it in set B, then "f:A→B" is A function from set A to set B, denoted as: Y = f (x), x ∈ a. among them, called the independent variable x, x value range of the called function (domain) and the value of x for y value is called the function value, the set of function values {f (x) | x ∈ a.} [range] called functionCopy the code
2. College advanced mathematics
Let the number set D⊂ R, then the map F :D→R be a function defined on D, often abbreviated y=f(x), and x∈ D, where x is the independent variable, y the dependent variable, and D the domain, expressed as Df, i.e., Df=D. Range: Rf = f (D) = {| y = f (x), y x ∈ D}Copy the code
3. The mapping:
Let X and Y be two non-sets, and if there is a rule F such that for every element X in X, according to the rule F, there is a unique and definite element Y corresponding to it in Y, then f is called the mapping from X to Y, and it is called F :X→Y where Y is called the image of element X (under the mapping F), I'll call it f of x, y is equal to f of x, and the element x is called the preimage of the element y under the map fCopy the code

Two, cartesian coordinate system under the function graph

This is just simulating the function, and then drawing it visually

In mathematics, real numbers are continuous. Here, pixels are taken as the basic unit drawing core on the screen: point integration line, single point radius 1px, independent variable: x domain: Df is represented by Set; function f(x) is represented by Map, x→y

0. Drawing of grid and coordinate system

I have encapsulated the grid and coordinate system. The initial View is as follows:

public class MathView extends View { private Point mCoo = new Point(500, 700); // Private Picture mCooPicture; // Canvas element private grid Picture; // Canvas element private Paint mHelpPint; // Private Paint mPaint; // Private Path mPath; Public MathView(Context Context) {this(Context, null); } public MathView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); init(); Private void init() {// initialize the main paintbrush mPaint = new Paint(paint.anti_alias_flag); mPaint.setColor(Color.BLUE); mPaint.setStrokeWidth(2); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeCap(Paint.Cap.ROUND); // Initialize the main Path mPath = new Path(); // Initialize helper mHelpPint = helpdraw.gethelppint (color.red); mCooPicture = HelpDraw.getCoo(getContext(), mCoo); mGridPicture = HelpDraw.getGrid(getContext()); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); HelpDraw.draw(canvas, mGridPicture, mCooPicture); canvas.save(); canvas.translate(mCoo.x, mCoo.y); canvas.scale(1, -1); // canvas. Restore (); }Copy the code

For details, see Everything You know and Don’t know about Canvas on Android, or the source code

1. Linear function: y=x, domain [-200,300]

1.1: Several member variables
private TreeSet<Float> Df = new TreeSet<>(); Private Map<Float, Float> funMap = new HashMap<>(); // Map table private Paint mTextPaint; // The text brushCopy the code
1.2: Initializes the domain
Private void initDf() {for (float I = -200; float I = -200; i <= 300; i++) { Df.add(i); // Initialize the domain}}Copy the code
1.3: Correspondence law FX
Private float f(float x) {float y = x; private float f(float x) {float y = x; return y; }Copy the code
1.4: Traversing the domain, adding preimage X and image F (x) to the mapping table
*/ private void map() {df.foreach (x -> {funmap.put (x, f(x)); }); // Add all points}Copy the code
1.5: Draws the mapping table
Private void drawMap(canvas canvas, map <Float, Float, Float, Float, Float) Float> map) { map.forEach((k, v) -> { canvas.drawPoint(k, v, mPaint); }); }Copy the code
2. The absolute value function: y = | | x, domain [200300]

Just change it a little bit

Private float f(float x) {float y= math.abs (x); float y= math.abs (x); return y; }Copy the code
3. Quadratic function, domain [-200,300]

Private float f(float x) {float y=(x - 100) * (x - 100) / 200 + 100; private float f(float x) {float y=(x - 100) / 200 + 100; return y; }Copy the code
4. Logarithm function: log10(x) as an example, definition domain [1,1000]

Private void initDf() {for (float I = 1; float I = 1; i <= 1000; i++) { Df.add(i); Private float f(float x) {float y = (float y) (100.f *); private float y = (float y) (100.f *) Math.log10(x)); return y; }Copy the code
5. Exponential function: definition domain [-400,500]

Private void initDf() {for (float I = -400; float I = -400; i <= 500; i++) { Df.add(i); Private float f(float x) {float y= 100*(float x) {float y= 100*(float x) Math.pow(Math.E,x/300f); return y; }Copy the code
6. Sine function: definition domain [-360°,450°]

/** * Initialize the domain */ private void initDf() {for (float I =-360; i <= 450; i++) { Df.add(i); Private float f(float x) {float y= (float x) {float y= (float x) {float y= (float x) {float y= (float x) {float y= (float x) (100*Math.sin(Math.PI/180*x)); return y; }Copy the code

After drawing the above functions, it is not difficult to find that the only way to do this is to change the corresponding rule, namely the function relationship

Three, the function image in polar coordinates

1). Find the function relationship between Angle THta and length P

2). Use the transformation relationship between polar coordinates and cartesian coordinates to draw the point set

1. Cartesian heart:Rho = 100 * (1 - cos theta)

Private void initDf() {for (float I = 1; float I = 1; i <= 360; i++) { Df.add(i); Private void drawMap(canvas canvas, map <Float, Float, Float, Float, Float, Float) Float> map) { map.forEach((thta, p) -> { Log.e(TAG, "drawMap: "+p+thta); canvas.drawPoint((float) (p * Math.cos(thta)), (float) (p * Math.sin(thta)), mPaint); }); } private float f(float thta) {float p = (float thta) (100 * (1 -) {float p = (float thta) (100 * (1 -)) Math.cos(thta))); return p; */ private void map() {df.foreach (x -> {float thta = (float) (math.pi / 180 * x); funMap.put(thta, f(thta)); }); // Add all points}Copy the code
2. Four-leaf clover:Rho = 100 * (1-4 * sine theta)

Private float f(float thta) {float p = (float thta) (100 * (1 -) Math.sin(4 * thta))); return p; }Copy the code
3. For fun:Rho = (e ^ (cosine theta) - two cosine theta (4) + [sin (theta / 12)] ^ 5) * 100

Private float f(float thta) {float p = (float thta) {float p = (float thta) (100f*(Math.pow(Math.E,Math.cos(thta)) - 2 * Math.cos(4 * thta) + Math.pow(Math.sin(thta / 12), 5)));; return p; }Copy the code
4. Vortex line:Rho = a * theta

Private float f(float thta) {float p = 30*thta; float p = 30*thta; float p = 30*thta; return p; }Copy the code
5. Circle in polar coordinates

Private float f(float thta) {float p = 200; /** ** @param thta {float p = 200; return p; }Copy the code

The graph of the function under parametric equation

1. Hyperbola:X = a/cosine alpha.Y = btan alpha

Private void initDf() {for (float I = 0; float I = 0; i <= 360 ; i++) { Df.add(i); Private void drawMap(canvas canvas, map <Float, Float, Float, Float, Float, Float) Float> map) { map.forEach((k, v) -> { canvas.drawPoint(k, v, mPaint); }); } private float y(float thta) {float y = (float thta) (100 *) Math.tan(thta)); return y; } private float x(float thta) {float x = (float thta) (200 /) {float x = (float thta) (200 /) Math.cos(thta)); return x; */ private void map() {df.foreach (x -> {float thta = (float) (math.pi / 180 * x); funMap.put(x(thta), y(thta)); }); // Add all points}Copy the code
2. The ellipse:X = a * cosine alpha.Y = bsin alpha

Private float y(float thta) {float y = (float thta) (300 *) {float y = (float thta) (300 *) Math.sin(thta)); return y; } private float x(float thta) {float x = (float thta) (400 *) {float x = (float thta) (400 *) Math.cos(thta)); return x; }Copy the code
3. Parametric equation: double button line(x = a) cos2 theta) cosine theta.Y = a tick (cos2 theta) sine theta

Private float y(float thta) {float y= (float thta) {float y= (float thta) (200 * Math.sqrt(Math.cos(2*thta))*Math.sin(thta)); return y; } private float x(float thta) {float x= 0; private float x(float thta) {float x= 0; private float x(float thta) {float x= 0 (float) (200 * Math.sqrt(Math.cos(2*thta))*Math.cos(thta)); return x; }Copy the code

5. Analysis and optimization

1. The analysis

You’re probably already teasing yourself: What the hell, is it all broken dots at the end

And so on… Now, wait, let’s see what this picture shows. Let’s look at the domain: [-360,450], 810 points in total, the radius of each point is 1px, and the transverse distance of each point is 1px. Dense points indicate that the dy between adjacent two points is small. On the contrary, sparse points indicate that the dy between adjacent two points is large. When the distance between two adjacent points is greater than the diameter of the circle (2px), two points can be seen visually, that is, discontinuity.

2. Analysis and summary

For the sake of description, several concepts are defined here

If a perfect functional curve is considered as P, then all real (paper, screen) functional images P' are simulation of taking points from P, the behavior of taking points from P is called [sampling], and the number of samples is called [total sampling]. The distance between adjacent sampling points xn,xn+1 is called [sample distance DXN]. When each DXN value is equal, it is called [equidistant sampling]. The distance between two sample points PN,pn+1 is called [sample distance DPN].Copy the code
3. Look at the points in a row

When adding a point set, points whose distance between adjacent points is greater than the diameter are filtered out

/** * @return */ private float dis(float x0, float y0, float x1, float x0, float y0, float x1, float x0) float y1) { return (float) Math.sqrt((x0 - x1) * (x0 - x1) + (y0 - y1) * (y0 - y1)); }Copy the code
*/ private void map() {df.foreach (x -> {float dis = dis(x, f(x), x + 1, f(x + 1)); If (dis < mLineWidth && dis > mLineWidth / 2) {funmap. put(x, f(x)); }});Copy the code

4. Not continuous point processing ideas:

And the idea is to sample again at the spacing

*/ private void map() {df.foreach (x -> {float dis = dis(x, f(x), x + 1, f(x + 1)); If (dis < mLineWidth && dis > mLineWidth / 2) {funmap. put(x, f(x)); } else if (dis > mLineWidth) { float num = dis / mLineWidth; For (float di = 0; float di = 0; di <= num; di += (1.f / num)) { x += di; funMap.put(x, f(x)); }}}); // Add all points}Copy the code

The detailed analysis of sine function

1. Introduction to the sine function

Among them A, omega, phi, k is constant, and indicates zero amplitude omega: A angular frequency: omega cycle: T = 2 PI/frequency omega: f = 1 / T = omega / 2 PI phase: x + phi omega initial phase: phi balance line: y = k wave: the maximum | | A trough: the minimum - | | ACopy the code
2. The amplitude of A:The maximum distance from equilibrium

Each of the horizontal axis below represents 90 degrees, expressed in radians: π/2, every four is 360 degrees, that is, 2 PI

2.1:A=300

2.2:A=100

2.3: the role of amplitude
The peaks and troughs of the sinusoidal curve, the image is "height", the larger the amplitude, the higher the crest, the lower the trough, and the image of each period is "high".Copy the code
3. Angular frequency ω:The radian value of the phase Angle changing per unit time
3.1:Omega = 2

3.2:Omega = 5

3.3: The role of angular frequency
Determine the period of the sine curve, the image is "fat" angular frequency, the smaller the period, the image of each cycle appears "thin" 2 period: T =2 π/ω = π from the figure, every two lattice a period, that is, the frequency of π : F = 1/T = 1/πCopy the code
4. Initial phase φ :The phase at x equals 0
4.1:Phi PI / 6

4.2:Phi PI / 2

4.3: The role of amplitude
The phase determines the left and right offsets of the standard sine function: positive left offsets, negative right offsets, and the offsets are φ/ωCopy the code
5. Equilibrium value K:Determine the position of the equilibrium line
5.1:k=100

5.2:k=200

5.3: The role of equilibrium value
The equilibrium value determines the upper and lower offset of the standard sine function: positive upper offset, negative lower offset, and the offset is KCopy the code

Now that you know a little bit about some of the parameters of the sine function, this article is over

Appendix: Some common symbols:
please write – left
∪ studying ⊂ ⊃
∈ ∝ ⊆ ⊇
up Theta. rho phi
PI. Alpha. Beta. gamma
eta mu zeta Ω

Postscript: Jie wen standard

1. Growth record and Errata of this paper
Program source code The date of note
V0.1 – making The 2018-1-2 Android drawing function image and sine function introduction
2. More about me
Pen name QQ WeChat hobby
Zhang Feng Jie te Li 1981462002 zdl1994328 language
My lot My Jane books I’m the nuggets Personal website
3. The statement

1—- This article is originally written by Zhang Fengjie, please note if reproduced

2—- welcome the majority of programming enthusiasts to communicate with each other 3—- personal ability is limited, if there is something wrong welcome to criticize and testify, must be humble to correct 4—- see here, I thank you here for your love and support