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
Related
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)
I've been trying to create a pure javascript version of the "plinko" game. I don't have a maths or physics background so everything I've picked up has been from google/youtube.
I'm trying to calculate the angle a ball should bounce at when making contact with an angled surface. I've got as far as calculating the angle of the ball at impact and the angle of the line its making contact with using inverse tan and the velocity x and y of the ball and line respectively. I then found the angle of incidence by finding the difference in the two angles, which according to snell's law should give me the angle of reflection relative to the line it has impacted.
However, having implemented this in code (or at least I think I have) the angles calculated and the direction of travel of the ball does not make sense. Here is the section of the code that deals with that:
var lineVelX = startPos[0] - endPos[0];
var lineVelY = startPos[1] - endPos[1];
var lineAngle = Math.atan(lineVelY / lineVelX) * 180 / Math.PI;
var ballAngle = Math.atan(window[ball].velY / window[ball].velX) * 180 / Math.PI;
var angleOfIncidence = ballAngle - lineAngle;
var newBallAngle = ballAngle - angleOfIncidence;
window[ball].velX = Math.cos(newBallAngle) * 2;
window[ball].velY = Math.sin(newBallAngle) * 2;
Hopefully, someone with a greater understanding of maths and physics can explain where I'm going wrong.
Here is a link to my code in jsfiddle.
Thanks in advance for the help :)
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.
I'm using a THREE.PerspectiveCamera with THREE.OrbitControls for rotation etc.
When I rotate the camera I want to update a symbol on Google Maps to show the direction of the camera.
Trying to get the rotation of (Y) in degrees like this:
360 / Math.PI * perspectiveCamera.rotation.y;
It returns the degrees from ..5..15...180..15..5 then -5..-15...-180..-15..-5.
Is there a another way to get the y rotation of the camera in 360 degrees?
In the past I have used radians * 180 / Math.PI to convert radians to degrees. More on these conversions here.
Or you could add 180 to the angle you are currently calculating to get a range from 0 to 360 :)
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);