Using atan2 with offset circle - javascript

I am trying to calculate the Arc Length, so that I can color my circle border given the Arc Length.
Users can click on the circle edge and the code should automatically calculate the Arc Length from position y=radius x=cx. Given the function atan2(), I cannot achieve this successfully, because if I understand correctly, atan2 return the angle between positive X-axis and the ray from my center of circle towards the point clicked. But I need the angle between the point clicked and the y-axis.
I am attaching the picture, in case it will make more sense:
What I have currently is:
// Calcualte the deltas for point X and Y which are required for atan2 function
let deltaX = event.pageX - this.centerX
let deltaY = event.pageY - this.centerY
// The Math.atan2() function returns the angle in the plane (in radians) between the positive x-axis and the ray from (0,0) to the point (x,y), for Math.atan2(y,x)
let angleRadian = Math.atan2(deltaY, deltaX)
// Apply formula to calculate Arc length
let arcLength = radius * angleRadian
I am aware that atan2 calculates the angle as I described above, but I do not know how to modify my code to achieve what I need it to do - that is, get the angle between the Point Clicked and the y-axis.

Just swap atan2 arguments to get angle from OY axis.
For counterclockwise (CCW) system:
let angleRadian = Math.atan2(deltaX, deltaY)
(based on formulas cos(a)=sin(Pi/2-a), sin(a)=cos(Pi/2-a))
For clockwise (CW) system, where OY axis direction is down:
let angleRadian = Math.atan2(deltaX, -deltaY)

Related

Trigonometry calculate tilt angle from accelerometer data

I have the following Figure and the equations:
Three Axis for measuring tilt
Equations for measuring tilt
The body on the Figures is a tri-axial accelerometer sensor, which measures accelaration in meters/seconds².
The goal is to calculate the tilt of the following angles using acceleration values:
ρ: angle of the X-axis relative to the ground (orange line);
Φ: angle of the Y-axis relative to the ground (orange line);
θ: angle of the Z-axis relative to the gravity (green line).
Could someone explain how to find equations 1,2 and 3 from the figure above?
Source of the equations and figure: https://www.thierry-lequeu.fr/data/AN3461.pdf
There is another similar and more detailed source that uses the same equations, but I also could not understand how to find them: https://www.analog.com/en/app-notes/an-1057.html
I have already implemented them and it is working, I just want help to understand how to obtain the equations. Here is the code:
let pitch = Math.atan(ax / Math.sqrt((Math.pow(ay,2) + Math.pow(az,2))) );
let roll = Math.atan(ay / Math.sqrt((Math.pow(ax,2) + Math.pow(az,2))) );
let theta = Math.atan(Math.sqrt((Math.pow(ax,2) + Math.pow(ay,2))) /az);
Thanks in advance.
This is the Pythagorean theorem, finding the 2D distance between 0,0 and a point represented by the two numbers given. If we assign that to a new function it may be clearer:
distance(a, b) { return sqrt((pow(a,2) + pow(b,2))) }
Then angles are calculated by using the inverse tangent function with a distance from that function representing one side of the triangle. For example, the pitch in your question divides the x acceleration by the distance between 0,0 and the acceleration in the YZ plane.
pitch = atan(x / distance(y, z))

JavaScript - rotate a shape by a fixed angle

I want to move a shape around the circumference of a circle on HTML canvas. I am using the following JavaScript logic:
speed = 0.005;
angle = Math.PI/2;
angle += speed * direction;
var x = cx + (radius * Math.cos(angle));
var y = cy + (radius * Math.sin(angle));
direction is set by a key press (left arrow = -1, right arrow = +1). cx and cy are fixed - they are the x and y co-ordinates of the center of the circle around which the shape is moving.
I want to move the shape around the circle in fixed steps, like the seconds hand of a clock. However, there should be 187 steps. I know that dividing 360/187 = 1.9251 degrees = 0.03359 radians. However, my drawing function is inside a loop, so writing angle += 0.03359 makes the shape spin around the circle forever.
How can I make each key press move the shape either clockwise or anti-clockwise around the circle, but in steps of 0.3359 radians?
I am using the logic I found in the answer written by rafaelcastrocouto for this question: how to move object in circle forward and backward in html5 canvas?
You need to save the starting angle in avariable that you access each time you begin to draw:
This line:
angle = Math.PI/2;
should then look like this:
angle = window.starting_angle;
On each keypress, you either increment or decrement this variable and redraw the shape.

find angle made by a line passing through origin

In above image the blank arrow will rotate randomly and stop at particular box.
I know the X & Y of each box how can i find the angle made by blank arrow. basically i want to find out at what angle each box is. I need to calculate this in javascript.
You can use slop to calculate angle
deltaY = Y //(of Box Point 2 is (0,0) so Delta = Y2-Y1=Y2);
deltaX = X //(of Box);
Than angle in degrees is
Degrees = arctan(deltaY / deltaX) * 180 / PI
If atan2 is present in library use(JavaScript)
Degrees = Math.atan2(deltaY ,deltaX) * 180 / PI

Find Co-ordinates of squares edge defined by angle from center

I'm trying to find the co-ordinates of an edge of a square from an imaginary line from the centre of the square that goes out on a variable angle. Where that line intercepts with the edge of the square is the co-ordinates I need.
For example sake, the square is 50px X 50px the center co-ordinates are (10,10) and the angle of the line from the center is on a 45 degree angle clockwise, the end of this line should not extrude the square and I'm trying to find the x,y co-ordinates of the end of this line.
What am I using this for, I want to be able to rotate a liner gradient fill in a rect() as you would do so in photoshop. I'm also not wanting to use a library as I'm trying to "reinvent the wheel" as I find it the best way to learn for my own sake.
I'm doing this in Javascript.
Thanks in advance for any help
You have to subdivide the rectangle if four sectors, then determine in which sector your line lies. One way to do that is checking the angle value with 90°, 180° and 270° using plain if statements.
Once you have the angle's sector, you have to compare the line's angle against the rectangle's diagonal angle, so you could determine the edge your line is colliding with.
Once you've determined the collision edge you get one of the collision coordinates for free (left-x, right-x, top-y or lower-y), the another coordinate can be obtained using trigonometry (the tangent relation).
You'll end up with two basic cases in every sector, one takes the opposite leg for the right triangle that forms for the collision with one of the vertical edges and the other takes the adjacent leg. Here is an example for the first sector (the upper right quadrant)
if (lineAngle < rectDiagAngle) {
// For this collision you have the x coordinate, is the same as the
// right edge x coordinate
colX = rectX + rectW;
// Now you need to find the y coordinate for the collision, to do that
// you just need the opposite leg
oppositeLegLength = Math.tan(lineAngle) * (rectW / 2);
colY = rectCenterY - oppositeLegLength;
} else {
// The line collides with the top edge
// For this collision you have the y coordinate, is the same as the
// top edge y coordinate
colY = rectY;
// Now you need to find the x coordinate for the collision, to do
// that you just need the adjacent leg
adjacentLegLength = (rectH / 2) / Math.tan(lineAngle);
colX = rectCenterX + adjacentLegLength;
}
This fiddle takes the angle, calculates the collision point and then draws a line from the rectangle center to the collision point.

Specify origin of Math.atan2

Math.atan2() is a very useful function for calculating angles. However, I cannot wrap my head around one thing:
$(document).mousemove(function(event){
r = Math.atan2(event.pageY, event.pageX);
deg = r * 180/Math.PI;
console.log(deg);
})
console.log indicates that 0,0 from where the angle is being calculated is at the upper left corner of the screen. How would I go about calculating the angle from a different origin, say the centre of the screen?
You would subtract the coordinates of your origin from the coordinates that you want to find the angle of:
r = Math.atan2(event.pageY - originY, event.pageX - originX);

Categories