Develop Reference

How can I detect that the device was rotated 360deg given (x,y,z) gyroscope?

I am using react-native-sensor to grab the raw data from the sensor.
setUpdateIntervalForType(SensorTypes.gyroscope, 100)
gyroscope.subscribe(({ x, y, z, timestamp }) => {
let pitch = Math.atan2(-x, -z) * 180 / Math.PI;// In degrees
let roll = Math.atan2(-y, -x) * 180 / Math.PI;// In degrees
let yaw = Math.atan2(y, -z) * 180 / Math.PI;// In degrees
this.setState({pitch: pitch, roll: roll, yaw: yaw})
})
How do i know that the device was spined 360

A bit of theory
Generally speaking, gyroscopes measure rotational motion. Most of the sensors that are included in our phones will specifically measure angular velocity. It means that the output in most cases will describe how much the phone has rotated over time and is usually expressed in degrees per second (°/s).
There are 3 axes that you can rotate around: x, y and z. There's a nice picture of it in MATLAB documentation:
There are also 3 important concepts (that you used in your snippet): pitch, roll and yaw (or azimuth). Again, MATLAB documentation comes in handy. They described it very well in the "More about" section, but I recommend reading the whole article.
Get your hands dirty
As far as I'm aware, the react-native-sensors library will return exactly degrees per second. This means, that using the provided timestamp you could try to count how much the phone rotated around any axis within any time delta. You would simply need to save values and timestamps, do a few transformations and you would get the result. This, however, would require additional time and memory.
There's an easier way, which you probably already realize after reading the attached article. Depending on the axis you want to rotate around, use pitch, roll or yaw.
Also, if you use the library just to get the gyroscope data, you might want to consider Detecting device orientation Web API. It is still an experimental feature but will work in most of the modern browsers.

How to note tangent to the power -1 in JS

I want to calculate direction of mousemove in angles. I found formula but i dont know how to note it:
theta = tan^–1(y/x)
Can you help me? I used this page for solution https://www.dummies.com/education/science/physics/how-to-find-a-vectors-magnitude-and-direction/

Do you mean arc tangent? There is a function called atan() for that, which gives you your angle in radians.
vat theta = Math.atan(y/x)

how does atan2 work? which angle is actually calculated?

As you can see in the picture, I have a line and two points(p1 and p4). what I need to do is to get snapped point of p1/p4 on the line and then use atan2 to calculate the angle between (p1 and p2) and (p3 and p4). Now, I have two formulas:
var anglep1p2 = Math.atan2(p2[1] - p1[1], p2[0] - p1[0]) * 180 / Math.PI;
var anglep4p3 = Math.atan2(p4[1] - p3[1], p4[0] - p3[0]) * 180 / Math.PI;
anglep1p2 is calculated 103.66797855556482
anglep4p3 is calculated -76.74971541138642
I wonder how does atan2 calculate those values?
thanks for any help

These answers do make sense. You are sort of calculating a the angle of a single line, starting from the positive x-axis. The way you calculate anglep1p2, it corresponds to the line drawn from p1 to p2.
If you plunk the origin of a coordinate system at the starting point p1 (you put it at p2 in your diagram), then the number you get should be the rotation from the positive x-axis to the line you drew - a bit over 90 degrees makes intuitive sense.
Your second result is flipped from your first (notice you used p4/p3 in the same order as your variable name, whereas you reversed this order in the p1/p2 case). To avoid confusion, I'd use the p1/p2 case to gain understanding, then apply it the same way to the other case once you know what you want.
If you have a specific geometry/relationship problem you need to figure out, you can provide the details and I might be able to help more specifically.

Find Inverse Tangent?

I'm new to Javascript and I'm trying to use inverse tangent to find the angle in degrees between a line and the x axis on an elevated y. I don't see any command for it so I really need some help.

Use Math.atan() function and then Math.toDegrees() multiply it by 180/Math.PI to convert radians to degrees
Found the answer it here
Later edit:
Here is an example of angle calculation between a line defined by 2 points (A and B) and the X axis.
The elevation of the second line (parallel with the X axis) is irrelevant since the angle stays the same.
/*
* Calculates the angle between AB and the X axis
* A and B are points (ax,ay) and (bx,by)
*/
function getAngleDeg(ax,ay,bx,by) {
var angleRad = Math.atan((ay-by)/(ax-bx));
var angleDeg = angleRad * 180 / Math.PI;
return(angleDeg);
}
console.log(getAngleDeg(0,1,0,0));

I found this short and simple:
const calculateAngle = (width, height) => Math.atan(width/height)/(Math.PI / 180) // Angle in degrees

Try using Math.atan (outputs angle in radians) and some trigonometry.

Questions like these are best answered by the reference. I see a bunch of trigonometric functions there, including:
acos()
asin()
atan()
atan2()
cos()
degrees()
radians()
sin()
tan()
Note: As of Dec 5, 2018, the repository has been archived and processingjs.org redirects there.
With the development of p5js and the API advances in Processing itself, as well as Processing.js itself having been in maintenance mode for quite a few years now, this project has been archived as of December 2018.
Processing.js would like to thank everyone who contributed over the years: it's been an amazing project! The code will still be available in read-only mode, no releases will be pulled from any of the places it was distributed through, but the last version is, and will forever be, v1.6.6.
Thank you for your support, and happy coding (with newer solutions)!

Understanding Animation/Physics/Math Implemention with EaselJS

This is in part an EaselJS problem and in part a Physics/animation programming question.
I'm trying to learn EaselJS by studying the examples included in the EaselJS zip file. Right now, I'm looking at the SimpleTransform example,(http://bit.ly/LebvtV) where the robot rotates and fades into the background and expands towards the foreground. I find this effect really cool, and would like to learn how to achieve it. However, when I came to this set of code, I'm lost:
function tick() {
angle += 0.025;
var value = (Math.sin(angle) * 360);
bmp.setTransform (bmp.x , bmp.y , bmp.scaleX , bmp.scaleY , value/2 , bmp.skewX, bmp.skewY , bmp.regX , bmp.regY );
bmp.scaleX = bmp.scaleY = ((value)/360) + 0.25;
stage.update();
}
(For those unfamiliar with EaselJS, tick() is a function that dictates the actions on each tick, whose interval is set with setFPS. So if I've set FPS to be 20, then tick() will execute its statements 20 times in a second. I believe. And bmp here is a Bitmap object that points to the robot image.)
I've never been a wizard in Math, but I do understand the basics. I can see that angle += 0.025; is used to increased the angle variable so that the value passed into setTransform can change with time. However, I can't understand why a) 0.025 is used. b) what (Math.sin(angle) * 360) and ((value)/360) + 0.25 means, and c) why value is not just passed into setTransform, but divided by 2 (value/2).
I know it might be a challenge to explain this here, but any help is appreciated. In fact, if anyone thinks I'm a noob and needs to go study some Physics first, I'll most appreciate if someone can point me to a resource (book/url) for me to turn to.
Thanks in advance.

I can understand why you are confused. The code isn't efficient and that makes it harder to figure out what is going on. But here is the gist of it:
a) 0.025 is used because it is approximately π/125. With a Ticker speed of 25FPS, this means that the angle value will start at 0 and get to π at just about 5 seconds. π is used because Math.sin uses radians, not degrees (π radians == 180 degrees)
b) Math.sin(angle) will essentially start at 0, increase until it hits 1, decrease until it hits -1, then increase back to 0 -- all over a period of 10 seconds with sinusoidal rhythm.
(Math.sin(angle) * 360) has the same behavior as Math.sin(angle), just with a range of -360 to 360.
((value)/360) + 0.25) has the same behavior as Math.sin(angle), just with a range of -0.75 to 1.25.
c) value/2 is there so the robot only rotates 180 degrees instead of 360 degrees. I know what you are thinking -- why multiply by 360 only to divide by 2 one line later? Well, there is no reason for it really.
Here's a slightly clearer version of tick:
function tick() {
angle += Math.PI/125;
var sineValue = Math.sin(angle);
bmp.rotation = sineValue * 180;
bmp.scaleX = bmp.scaleY = sineValue + 0.25;
stage.update();
}

b) The Math.sin(angle)*360 seems like a conversion between degrees and radians.
Math.sin( x ) always evaluates to -1>=x>=1,
and therefore
Math.sin( angle ) is also always -1>=angle>=1
(we just substituted x), and
var value = Math.sin( angle ) * 360 is always -360>=value>=360.
(In the context of degrees rotated that is thus 1 whole rotation left or one whole rotation right).
We can see that the setTransform function exists as follows:
p.setTransform = function(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY) {}
Obviously, we can see that there is a direct connection between value & angle. What we further see is that both the transform & scaleX are again depending on value. We can pull the conclusion that each tick there will be -after some calculations- a changing transform and scaleX.
So as the variable 'value' is passed as a parameter, this means that we wish to rotate 'this' much, as much as value tells us (-360>=x>=360). That means, /2 and 0.025 is just configured like this.
Hope this is helpful :-)