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
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 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.
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
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.
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.