JavaScript: Use atan2 to draw arrows and curves, and use javascriptatan2

JavaScript: Use atan2 to draw arrows and curves, and use javascriptatan2

Recently, I am engaged in Canvas plotting and know that JavaScript provides a trigonometric function such as atan2 (y, x. At first glance, I don't know. After all, the trigonometric functions I learned in high school include sin, cos, arcsin, arccos, tan, and arctan. I need to use it again in my work, so I have a simple understanding here.

 

 

 

 

Understanding tan and atan in the coordinate system

Review the trigonometric function tan:

Tan θ, represented by trigonometric functions, has a value equal to sin θ/cos θ. If you place it in the coordinate system, its value is equivalent to dy/dx. In the coordinate system, the slope of any two points relative to the X axis is tan θ = dy/dx, and the slope relative to the Y axis is dx/dy. In this case, we use cot to represent it; among them, dy is the difference between the y coordinate of the two points, dx is the difference between the x coordinate of the two points.

Then in the coordinate system except the y axis, any point (x, y), relative to the slope of the x axis is the y-0/x-0, that is, y/x.

 

We call tan θ the slope of a straight line relative to the X axis, so θ is the angle (rotation angle) relative to the X axis.

Tan, which calculates the slope based on the angle. In turn, arctan (arc tangent) naturally considers the angle to be calculated based on the slope.

 

Why does atan2 exist?

In JavaScript, two arctan functions are provided, one is atan and the other is atan2. Atan is a well-known arctan. In fact, atan2 is provided in many programming languages.

So what is atan2?

 

To know this, you need to know the limitations of arctan:

The return value range of arctan is (-π/2, π/2) not included, ± π/2, that is, (the angle between a straight line composed of two points and the X axis is 90 °) 90 ° is not calculated. Why? When arctan (dy/dx) is calculated, if the angle between a straight line composed of two points (x1, y1) and (x2, y2) is 90 ° from the X axis, dx = x2-x1 = 0, 0 cannot be used as the divisor, so it cannot be calculated.

The value range is (-π/2, π/2). From the coordinate system, the angle range can only be in quadrant 1st and 4, it cannot represent the angle of quadrant 2nd or three.

 

In order to make up for the shortcomings of atan, The atan2 function is introduced in the computer programming field, and its calculation result is (-π, π]. It can cover the entire coordinate system, including 90 ° cases.

 

What is its computing process?

I have extracted the computing process from wikipedia:

 

 

 

 

Application of atan2

The coordinate system in the figure in the first section is well known. In HTML and Canvas, the coordinate system is not as well-known as the coordinate system. It is like this:

 

From the clockwise direction along the X axis, the angle is 0, π/2, π, 3 π/2 π.

From the clockwise direction of the X axis, the angle is 0,-π/2,-π,-3 π/2,-2 π.

 

 

 

The results of atan2 are between (-π, π], exactly one week, and the four quadrants are fully covered. From the coordinate system, the value in the clockwise direction is positive, and the value in the counterclockwise direction is negative.

From the coordinate system, if the result of atan2 is (0,-π), it indicates that the maximum π radian (180 angle) is converted from the clockwise direction of the X axis ). Similarly, (0, π) indicates clockwise rotation from the X axis to the maximum π radian (180 angle ).

 

In section 1st, atan can be used to calculate the angle between the line between any two points in the plane coordinate system and the forward direction of the X axis. While atan2 is a supplement to atan, the use of atan2 can naturally calculate the angle between any two points in the plane coordinate system and the positive direction of the X axis.

If the two points are in the first quadrant:

 

 

If the two points are in the Fourth quadrant:

If the two points are in different quadrants, we can also translate them.

 

 

When do I need to use atan2?

 

Currently, I have encountered two solutions through atan2:

1) draw a straight line with an arrow between any two points in the plane coordinate system (which can be a unidirectional arrow or a bidirectional arrow ). In this requirement, we also know the angle between an edge of the arrow and a straight line and the length of the arrow.

The difficulty of this requirement is to calculate the coordinates of the other two points of the arrow.

2) Draw a curve (arc) with the specified curvature between any two points in the plane coordinate system ). In this requirement, to calculate the arc, you must know the radius, startAngle, endAngle, and center coordinate. Radius can be calculated based on the curvature, but it is difficult to calculate the coordinates of the center.

 

The two requirements share the following features:

1) two known points

2) Calculate the coordinates of required (line, arc, and other) points based on these two points and other conditions.

 

Currently, I have met both of these needs through atan2. Other cases are still unknown, and will be added later.