Polar coordinates and circular player scrub - javascript

I'm having issues positioning the cursor at the right point in this circular time scrubber:
I'm calculating angle with simple formula: Math.atan2(y, x).
This gives me the angle in radians, then I map it to a range [0, 1].
This range updates the player progress which is binded back to the cursor position (simple bi-directional binding).
What I need to do is just have angle = 0rad, when mouse.x = 0 and mouse.y >= radius.
Right now angle is set to 0 when I'm at mouse.x >= rootRadius, and mouse.y = 0.
This image perhaps add more insight, I'm having difficult explaining it in a simple manner, however this should be progress/angle = 0:

Related

Using atan2 with offset circle

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)

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.

three.js orbital controls reset by animating

Is there any way to set the angle of three.js orbital controls angle. When t try to setAzimuthalAngle and polar angle it shows
controls.setPolarAngle(myangle)
controls.setPolarAngle is not a function
I need a way so that i can tween the cameras angle to 0.
As you note, there is no setPolarAngle function for OrbitControls.js. You probably want to change the min/max values for vertical orbiting instead to lock it at your desired angle.
// How far you can orbit vertically, upper and lower limits.
// Range is 0 to Math.PI radians.
this.minPolarAngle = 0; // radians
this.maxPolarAngle = Math.PI; // radians

JavaScript - Angular Velocity by Vector - 2D

I am making a game in JavaScript, with the Canvas API.
I perform circle to segment collision, and I need to calculate the anglar velocity for the circle by its velocity vector, I use this formula to do it:
ball.av = ball.v.length() / ball.r
// ball.av = angular velocity
// ball.v = velocity vector, contains x and y values
// .length() = returns initial velocity (pythagoras) for example: return Math.sqrt(ball.v.x * ball.v.x + ball.v.y * ball.v.y)
// ball.r = radius
Now since a square root can't be negative, this won't work when the ball is supposed to rotate anti-clockwise. So, I need a signed version of the initial velocity that also can be negative, how do I calculate that?
I've heard about that the Wedge product is working for this, and I've read many articles about it, but I still don't understand how to implement it to my code, please help!
In the general case, if the ball is rolling on a surface then the angular velocity would be the cross product of the velocity with the surface normal over the radius.
ball.av = CrossProduct(surfaceNormal, ball.v) / radius;
But if you are always on a flat surface along the x direction then this simplifies to this:
ball.av = -ball.v.x / ball.r;
Here is crossproduct for you if you don't have it.
float CrossProduct(const Vector2D & v1, const Vector2D & v2) const
{
return (v1.X*v2.Y) - (v1.Y*v2.X);
}
NOTE: if the ball rolls backwards just add a '-' sign to your calculations or swap the parameters in the crossProduct call but I think they are right as I've written them.
Surface normal is a perpendicular normalized (unit) vector from a surface. In your case surface normal is the normalized vector from the contact point to the centre of the circle.
As a side note to remove the component of gravity into a surface as a ball is rolling do this:
vec gravity;
gravity = gravity - surfaceNormal*dot(surfaceNormal, gravity);
you can then apply the resultant gravity as a ball is rolling down a surface.

What's the significance of 1/cos(x) in this code for a 3d canvas game?

I've been experimenting with HTML5 canvases lately and came across this 3d example with relatively little code behind it. I was hoping to find a good introduction to 3d rendering, but I'm having more trouble understanding the geometry behind the code than I was expecting to. I set up a JSbin and copied over the code that was used on his website to play with. I'm stuck at understanding the meaning of
deltaX=1/Math.cos(theta);
which is later used in:
if (deltaX>0) {
stepX = 1;
distX = (mapX + 1 - x) * deltaX;
}
else {
stepX = -1;
distX = (x - mapX) * (deltaX*=-1);
}
Source
My best guess is that it's used for the relation cos(x) = adjacent/hypotenuse in a right triangle, but I don't understand where the triangle would fit in, if at all.
If you draw a line from the origin (0, 0) with direction theta (measured from the x-axis), then
deltaX = 1/cos(theta) is the distance on this line until the vertical line x = 1 is met, and
deltaY = 1/sin(theta) is the distance on this line until the horizontal line y = 1 is met.
It is indeed a triangle relation. In the first case, the triangle has the points (0, 0), (1, 0) and the point (1, y) where the line meets the vertical line x=1.
(mapX, mapY) is a grid point with integer coordinates, and (x, y) is a point in the square [mapX, mapX+1) x [mapY, mapY+1).
distX computes the distance of the next vertical grid line in theta-direction, and distY the distance of the next horizontal grid line.
Remark: The computation fails if the direction is a multiple of π/2, i.e. the direction is exactly right, up, left, or down, because sin(theta) = 0 or cos(theta) = 0 in that case. This probably does not happen in your program, because the playerDirection starts with 0.4 and is incremented or decremented by 0.07.

Categories