Heaven has reincarnation, heaven rao who!! In fact, mathematics in our life or work, in fact, use a lot of places, we will talk about trigonometry (anti-trigonometry) function in javascript application today.

Trigonometric functions

So the Pythagorean theorem a squared plus b squared is equal to c squared

It follows from the Pythagorean theorem

Let’s do a couple more apis

Math.pow() squared/cubed

  • Math.pow(2,3) // cube of 2
  • Math.pow(2,2) // 2 squared

Prescribing Math. SQRT ()

Math.sqrt(9) // 3 can only be squared, cannot be squared or raised to the n

√ ~ 3^2+4^2=5

Math.sqrt(Math.pow(3.2) +Math.pow(4.2))  / / 5
Copy the code

So what can the Pythagorean theorem do? The easiest way to implement the Pythagorean theorem is when you know the coordinates of two points and you know the distance

SQRT (math.pow (A, 2) + math.pow (B, 2))

All right, let’s cut to the chase

Trigonometric functions

Problem solved: In a right triangle, given an Angle, and an edge, you can find another side trigonometric function in our mathematics there are many different forms, among which I will introduce you to three of them, in fact, there are many, we mainly usually use the time to use these three is enough

  • sina
  • cosa
  • tana

In JS, they correspond to:

  • Math. Sin (radians)
  • Math. Cos (radians)
  • Math. Tan (radians)

Note that their parameters are not angles, but radians!! Because you can’t write an Angle in your computer, you can only write it in radians so how does that translate from Angle to radian?

How many degrees are there in a circle? One circle is 360 degrees, right? What’s radians? Radians is another unit that has to do with angles, which is another way to write it. Why are there two ways to write it? Because Angle is more in our life, or in our mathematics. And radian is generally used as a computer, more professional, the computer is represented by radians, so as long as you know a relationship between them, in fact, no matter the Angle and radian can be converted.

One radian concept

So let’s first understand what radians really mean. What exactly is one radian? To get the idea of a radian, let’s draw a circle

R is the radius, and a is the corresponding Angle. So radian is the part of the circle that is opposite Angle A, and if we say that this curve is equal to the radius, if we straighten this curve out, when we straighten it out, it’s equal to the radius, then we’ll call this Angle a radian. So the notion of a radian, it’s just the curve that corresponds to this Angle, and if its length is equal to the radius, it’s one radian.

So how many radians are there in this whole circle? So we know that the curve for r is one radian, how many r’s are there in this whole thing? We need to know how to figure out the circumference of a circle. The circumference of a circle involves another concept, PI.

PI = 3.1415926…

How do you calculate that? There are two ways to calculate it: the circumference of a circle divided by its diameter is equal to PI, or the area of a circle divided by its radius squared is also PI

The circumference of a circle over 2 PI is equal to PI

So the bearing of the circle is equal to 2 PI r

It says one radian is equal to the radius of r. How many radians are there in the whole circle?

So the radian of the whole circle is equal to 2 PI, and r over r is equal to 2 PI

Well, if the whole circle has a 2 PI radian, what is the Angle of the whole circle? 360 degrees. So 360 degrees should be the same thing as 2 PI radians, all in one circle, just in two different units, so we get this formula

360 degrees =2 PI (radians)

So we can figure out the angles and radians

One degree is written in radians in javascript

Math.PI/180
Copy the code

So in javascript you can write sine of 30 degrees this way

Math.sin(30*Math.PI/180)   //30 degrees radians ==>0.5
Copy the code

PI is a constant in javascript denoted by math.pi

So let’s look at an example of an object moving in a circle

namely

MathDegree. Sin (*Math.PI/180 ) = y/r
MathDegree. Cos (*Math.PI/180 ) = x/r
Copy the code

Circular motion demo

Github.com/wensiyuanse…

So how do you make a three-dimensional circular motion with a three-dimensional sense of space?

There’s a lot more we need to know about how to do more complex motions like three-dimensional motions, not just trigonometric functions. You need to combine some knowledge of mathematics, physics, and other fields to make a richer effect.

Let’s first think about the first problem, the figure above is a plane, it can’t generate three dimensions, that’s what we have to do, is to use this plane, so that we can visually feel that it’s three dimensions. Ok, how do you feel? If you’ve ever learned to draw, you know that three-dimensional space is the concept of big near and small far away

For example, this smaller circle is the distance. The larger circle is actually closer to you. If we now draw a line between them, will the cylinder come out?

Okay, now that the cylinder is out, doesn’t that give you a three-dimensional feel? Let’s say it’s a log, and there’s a man standing on it

Does that make the log move?

In fact, IT is found that the effect of 3D can be realized simply by using such a concept that we can make circular motion. It is very easy to make three-dimensional circular motion. You only need to imagine that it is big when it is close to you and small when it is far away.

In addition to the near big far small knowledge point, we also need to understand a coordinate system. In a plane when our object is moving, it has X and Y coordinates, that’s enough, it has three dimensions and it has a Z coordinate system.

So if the cube wants to move the Y-axis, the first thing you have to think about is, did the top change? Actually, the top hasn’t changed. When you rotate about the Y axis, the X and Z axes change, but the Y axis stays the same. The Y-axis doesn’t change, so that means the top of the elements doesn’t change, right. What does the X-axis control? On the X-axis we control the let value of the object, and on the Z-axis we control what? Size of object!! The bigger the Z axis the bigger the object, the smaller the Z axis the smaller the object, right? Such a relationship. So it’s easy to do when you have this relationship.

  • The X-axis controls the let value of the object
  • The Y-axis is going to stay the same ===> the top of the elements is going to stay the same
  • The bigger the z-axis, the bigger the object, and the smaller the z-axis, the smaller the object

Now what are the maximum and minimum values of the Z axis? The absolute value of the z-axis is actually the radius. If the radius is 100px, then the z-axis will have a maximum value of 100px and a minimum value of -100px, so what is it? The Y-axis becomes the Z-axis, and the Y-axis is useless. The size of the Z-axis is actually changing all the time

Writing for

var x = 700;
var a = MathDegree. Sin (*Math.PI / 180) * r;
var b = MathDegree. Cos (*Math.PI / 180) * r;
oDiv.style.left = x + b + 'px';
oDiv.style.width = a / 100 * 30 + 50 + 'px'; //100 is the radius, 30 is the ratio, and 50 is the original width and height of the cube
oDiv.style.height = a / 100 * 30 + 50 + 'px';
Copy the code

The demo github.com/wensiyuanse…

If you want to do it a little bit better, you can do it with a three-dimensional rotation matrix, which is a little bit more fancy.

Inverse trigonometric function

Problem solved: In a right triangle, unknown angles or radians can be found with two sides known

In a right triangle if you have two of the sides of a, B, and C how do you figure out Angle A or Angle B then you can use the inverse trigonometric function to figure out the Angle or radians. Inverse trigonometric function in JS writing

  • Math.asin( a/c )
  • Math.acos( b/c )
  • Math.atan( a/b )

The inverse trigonometric functions are all radians

Let’s say a is equal to 1 and c is equal to 2

Math.asin(1/2)  / / 0.5 radians
Copy the code

How do I convert it to an Angle

namely

Math.asin(1/2) *180/Math.PI  / / 30 degrees
Copy the code

Trigonometric graph

If you’re doing something like fluid effects, you have to know the trigonometric image, otherwise you can’t do fluid effects like

Juejin. Cn/post / 684490…

Let’s start with a couple of concepts

Unit circular coordinate system

A circle can be represented in terms of coordinates in a coordinate system the unit circular coordinate system

And you can see that the X-axis corresponds to the cosine and the Y-axis corresponds to the sine

What’s the relationship between radians and sine theta?

So I can draw this image in JS. The sine function, the cosine function can also be expressed in terms of radians left and angles top

Github.com/wensiyuanse…

Sine curve formula: y = A sine (Bx + C) + D

  • A controls the amplitude. The larger A value is, the larger the peaks and troughs are; the smaller A value is, the smaller the peaks and troughs are;

  • The B value will affect the period, the larger the B value, the shorter the period, the smaller the B value, the longer the period.

  • C value will affect the left and right movement of the image. If C value is positive, the image will move right; if C value is negative, the image will move left.

  • D controls up and down movement.

This formula is very useful, and if the following code is confusing to you, be sure to check the comments.

reference

www.w3cplus.com/javascript/…