Welcome toTencent Cloud + community, get more Tencent mass technology practice dry goods oh ~

This article was published by Shiya Guo in Cloud + Community

In mathematics, a Polar coordinate system is a two-dimensional coordinate system. Any position in the coordinate system can be represented by an Angle and a distance from the origin to the pole. Polar coordinates are particularly useful when the relation between two points is easily expressed in terms of Angle and distance; In a plane cartesian coordinate system, such relations can only be expressed by using trigonometric functions. For many types of curves, the polar equation is the simplest form of expression, and even for some curves, only the polar equation can be expressed. (From Wikipedia)

By transformation, the (φ, r) of polar coordinates can be transformed into the (x,y) coordinates of the rectangular coordinate system. The transformation formula is as follows

In this way, many curves expressed by polar coordinate functions can be converted into rectangular coordinates and drawn in JS. Here are some curves that are animated on canvas:

1. The cardioid

Function:

Parameter meaning: A represents half of the distance from the origin to the farthest point on the X-axis.

Js animation: when implemented in JS, just substitute the polar Angle from 0 to 360 into the equation to find (x,y) coordinates

2. Bernoulli double wire

Function:

Parameter meaning: A indicates the distance from the center point to the farthest end.

Js animation: When drawing, the interval of Angle substituted is [-45, 45], and the coordinates of (-x,-y) and (x,y) parts need to be drawn.

3. The astroid

Function:

Parameter meaning: A represents the distance from the center point to the farthest point.

Js animation: When implemented in JS, it only needs to substitute the Angle from 0 to 360 into the equation. In the process of solving, it does not need to convert polar coordinates, but directly substitute x and y to work out (x,y) coordinates

4. The rose line

Function:

Parameter meaning: K means “several petals”. If k is odd, the number of petals is K, and if k is even, the number of petals is 2K. A as above represents the distance from the center to the farthest point.

Js animation: when k is odd, the Angle interval can be closed at [0,180]; When k is even, the interval is [0,360].

Archimedes spiral

Function:

Parameter Meaning: The distance between adjacent arms is 2180A

Js animation: The Angle should be greater than 360 to have spiral effect. In this example, the Angle is radian, so the distance between adjacent “arms” is 2PIa.

In addition, there are spirals like this, which increase geometrically, and spirals drawn from the outside in:

6. Logarithmic spiral

Function:

Js animation:

7. Hyperbolic spiral

Function:

Js animation:

Demo of the above seven curves: show address

conclusion

In simple graphics and animation tracks, we can change the way of thinking, for example, through functions. Finally, define (x,y) coordinates using the rose line k=6, and set z coordinates as the 3rd root of (x,y) to z axis distance, set the number of vertices of the picture by threejs, draw a small demo with curve connections.

Demo address: code address display address

Question and answer

Game Architecture

reading

Play with flex layout

Dynamic light wave emission! Unity AR development of 3D object recognition notes

Three. Js particle system learning notes: fireworks effect implementation

Machine learning in action! Quick introduction to online advertising business and CTR knowledge

This article has been authorized by the author to Tencent Cloud + community, more original text pleaseClick on the

Search concern public number “cloud plus community”, the first time to obtain technical dry goods, after concern reply 1024 send you a technical course gift package!

Massive technical practice experience, all in the cloud plus community!