JavaScript: Use atan2 to draw arrows and curves

recently engaged Canvas drawing, knowing that a trigonometric functions such as atan2 (y,x) are available in JavaScript . At first glance, do not know, after all, in high school, learned trigonometric functions are:sin,cos,arcsin,arccos,tan,arctan , etc., and there is no this. And it needs to be used in the work, so here's a simple understanding.

1. Understanding Tan and Atan in the coordinate system
2. Why are there atan2?
3. ATAN2 applications
   • When to use atan2

Understanding Tan and atan in the coordinate system

Review the trigonometric functions tan:

Tanθ, when represented by a trigonometric function, its value equalsSinθ/cosθ, if it is placed in a coordinate system, its value is equivalent to:DY/DX. In a coordinate system, a straight line consisting of any two points, relative toxthe slope of the shaft isTanθ= Dy/dx, relative toythe slope of the shaft isDx/dy, when we useCotto express;Dyit's two points.ythe difference between the coordinates,DXit's two points.xthe difference between the coordinates.

In the coordinate system , in addition to the Y- axis, any point (x, y), the slope relative to the x - axis is y-0/x-0, which is y/x.

we will tan θ is called a straight line relative to x the slope of the axis, then θ is relative to the x The angle of the shaft (angle of rotation).

Tan, which calculates the slope based on the angle. Then the arctan(anyway tangent) is naturally considered to be based on the slope to calculate the angle.

Why are there atan2?

in the in JavaScript, two arctan functions are provided, one is Atan and The other is atan2. Atan is the familiar arctan. In fact, atan2 is available in many programming languages .

so what happened to atan2 ?

to know this, you need to know the shortcomings of arctan:

Arctanthe range of return values is(-π/2,π/2)not included, ±π./2, namely(a line of two dots andxaxis angle is -°)° is not calculated. Why not??in the calculationarctan (DY/DX)when the two points(X1,y1), (x2,y2)composed of straight lines andxthe angle of the shaft is -°,dx= x2-x1 = 0,0cannot be counted as a divisor, so this situation cannot be calculated.

The range of values is the range of the computed angle (-π/2, π/2), and from the coordinate system, the range of this angle can only be in section 1 , 4 Quadrant, and does not represent the first 2 , 3 the corner of the quadrant.

in order to compensate for the shortcomings of Atan, in the field of computer programming, the atan2 function is introduced, and its results are in (-π, π ]. It can cover the entire coordinate system, including The case of the total °.

What is the process of its calculation?

on this, I have extracted its computational process from Wikipedia:

Application of atan2

The coordinate system in the diagram in the first section is familiar to us. In HTML,Canvas , the coordinate system is not the same as the coordinate system we are familiar with. It is like this:

from the X- axis forward clockwise direction, the angle is 0, π/2, π,3π /2 , 2 π.

from the X- axis forward counterclockwise, the angle is 0,-π/2,-π,-3 π/2,-2π.

the results of the atan2 are between (-π,π] , exactly one week, and all four quadrants are covered. From the coordinate system, the clockwise value is positive and the counter-clockwise value is negative.

from the coordinate system,the atan2 result is (0,-π), the maximum π radian from the x - axis counterclockwise direction ( angle). Similarly,(0,π) indicates the maximum π radian from the x -axis positive clockwise ( angle).

in section 1) , the atan can be used to calculate the angle between the line of any two points in a planar coordinate system and the positive x - axis. and atan2 is a supplement to Atan, so using atan2 can naturally be used to calculate the connection of any two points in the plane coordinate system and x The angle between the shaft forward.

If two points are within the first quadrant:

If two points are within the fourth quadrant:

If the two points are in a different quadrant, we can also pan to see.

When do I need to use atan2?

At present, I have encountered two kinds of situations, which are solved by atan2 :

1) draw a straight line with arrows between any two points in the planar coordinate system (it can be a one-way arrow, which can be a two-way arrow). In this requirement, you also know the angle of an arrow's side and the line and the length of the arrow.

The difficulty with this requirement is to calculate the two additional point coordinates of the arrows.

2) Draw a curve (ARC) of the specified curvature between any two points within a planar coordinate system. In this requirement, to calculate arc, it is natural to know the radius, startangle, Endangle, center coordinates. Radii can be calculated based on curvature, but the difficulty is calculating the center coordinates.

The common characteristics of these two requirements are:

1) Two known points

2) According to these two points and other conditions to calculate some of the necessary (drawing line,arc , etc.) point coordinates.

At present, I meet these two needs, all through the atan2 to solve. Other cases, currently unknown, are to be added on subsequent discoveries.

JavaScript: Use atan2 to draw arrows and curves