Mouse pointer locked around a point - math

Sorry if this question has been asked before, but if so I could not find it before posting this.
In a nutshell, I want to do this:
Example.
I want a pointer (red) to rotate about the circle (blue) according to where the mouse is located. (If picture is not visible, it depicts a blue circle with a red triangle pointing away from it, towards the mouse).
If possible, please answer with a general mathematical equation rather than specific code. Thanks.

Assuming a normal cartesian coordinate space, with the X axis going to the right and the Y axis going up, you first need to calculate the angle to the mouse coordinate (M) to the circle origin (O):
theta = atan2(M.y - O.y, M.x - O.x)
you can then calculate the position of a point (P) orbiting the circle at radius (r) with:
P.x = r * cos(theta)
P.y = r * sin(theta)
The atan2(y, x) function is a common math library function that just computes atan(y / x) but takes the relative signs of x and y into account to determine the correct quadrant.

Related

Converting XYZ to XY (world coords to screen coords)

Is there a way to convert that data:
Object position which is a 3D point (X, Y, Z),
Camera position which is a 3D point (X, Y, Z),
Camera yaw, pitch, roll (-180:180, -90:90, 0)
Field of view (-45°:45°)
Screen width & height
into the 2D point on the screen (X, Y)?
I'm looking for proper math calculations according to this exact set of data.
It's difficult, but it's possible to do it for yourself.
There are lots of libraries that do this for you, but it is more satisfying if you do it yourself:
This problem is possible and I have written my own 3D engine to do this for objects in javascript using the HTML5 Canvas. You can see my code here and solve a 3D maze game I wrote here to try and understand what I will talk about below...
The basic idea is to work in steps. To start, you have to forget about camera angle (yaw, pitch and roll) as these come later and just imagine you are looking down the y axis. Then the basic idea is to calculate, using trig, the pitch angle and yaw to your object coordinate. By this I mean imagining that you are looking through a letterbox, the yaw angle would be the angle in degrees left and right to your coordinate (so both positive and negative) from the center/ mid line and the yaw up and down from it. Taking these angles, you can map them to the x and y 2D coordinate system.
The calculations for the angles are:
pitch = atan((coord.x - cam.x) / (coord.y - cam.y))
yaw = atan((coord.z - cam.z) / (coord.y - cam.y))
with coord.x, coord.y and coord.z being the coordinates of the object and the same for the cam (cam.x, cam.y and cam.z). These calculations also assume that you are using a Cartesian coordinate system with the different axis being: z up, y forward and x right.
From here, the next step is to map this angle in the 3D world to a coordinate which you can use in a 2D graphical representation.
To map these angles into your screen, you need to scale them up as distances from the mid line. This means multiplying them by your screen width / fov. Finally, these distances will now be positive or negative (as it is an angle from the mid line) so to actually draw it on a canvas, you need to add it to half of the screen width.
So this would mean your canvas coordinate would be:
x = width / 2 + (pitch * (width / fov)
y = height / 2 + (yaw * (height / fov)
where width and height are the dimensions of you screen, fov is the camera's fov and yaw and pitch are the respective angles of the object from the camera.
You have now achieved the first big step which is mapping a 3D coordinate down to 2D. If you have managed to get this all working, I would suggest trying multiple points and connecting them to form shapes. Also try moving your cameras position to see how the perspective changes as you will soon see how realistic it already looks.
In addition, if this worked fine for you, you can move on to having the camera be able to not only change its position in the 3D world but also change its perspective as in yaw, pitch and roll angles. I will not go into this entirely now, but the basic idea is to use 3D world transformation matrices. You can read up about them here but they do get quite complicated, however I can give you the calculations if you get this far.
It might help to read (old style) OpenGL specs:
https://www.khronos.org/registry/OpenGL/specs/gl/glspec14.pdf
See section 2.10
Also:
https://www.khronos.org/opengl/wiki/Vertex_Transformation
Might help with more concrete examples.
Also, for "proper math" look up 4x4 matrices, projections, and homogeneous coordinates.
https://en.wikipedia.org/wiki/Homogeneous_coordinates

Moving an object diagonally inside a square

I am stuck on a particular problem. I am learning on how to create a very basic game, where a ball will travel diagonally from either top left corner of a square or a rectangular down to the bottom right corner in a straight line (As shown in Fig 1 & 2). Now I know that the ball x and y position will both need to be changed frame by frame but I am unsure on how to go about this.
enter image description here
Math is not my strong point and I am unsure how do I calculate the exact route, especially since both the square and rectangle will have a different angles. Are there any math formulas I can use to calculate the diagonal line and by how much each of the x and y coordinates of the ball will need to be adjusted frame by frame.
From the research that I have done I think that I will most likely need to calculate the angle using the sin or cos functions but I am not sure how everything fits together. Have been using https://www.mathsisfun.com/sine-cosine-tangent.html to try and learn more.
I am planning on starting to code this but would really appreciate answers to these basic questions. I am trying to learn both the programming and the mathematical aspect at the same time and I feel that this approach would be the best fit.
Many Thanks for any suggestions/help, I would really appreciate it.
Since it's rectangular, just calculate the slope: rise (Y) / run (X). That will give you how much to increase the object's location in each direction per frame. Depending on how fast or slow you want the object to move, you'll need to apply some modifier to that (e.g., if you want the object to move twice as fast, you'll need to multiple 2 by the change in a particular direction before you actually change the object's location.
For square :
If you are using Frame or JFrame, you have coordinate with you.
You can move ball from left top to right down as follow ->
Suppose ur top left corner is at (0,0), add 1in both coordinate until you reach right bottom corner.
U can do this using for loop
You don't technically need the angle for this mapping. You know that the formula for a line is "y = m * x + b." I presume that you can calculate m,b. If not, let me know.
Given that - you can simply increment x based on anything you like (timer, event, etc. ). You can place your incremented x into the equation above to get your respective y.
Now, that won't be quite enough as you are dealing with pixels instead of actual numbers. For example, lest assume that in your game x/y are in feet. You will need to know how many pixels represent a foot. Then when you draw to the screen you adjust your coordinates by dividing by pixels per foot.
So...
1. Calculate your m and b for your path.
2. Use a timer. At each tick, adjust your x value
3. Use your x value to calculate your y value
4. Divide x and y by a scaling number
5. Use the new scaled x and y to plot your object
Now...There are all kinds of tricks you can play with the math, but that should get you started.
Let's left bottom corner of rectangle (or square) has coordinates (x0, y0), and right top corner (x1, y1). Then diagonal has equation
X(t) = x0 + t * (x1 - x0)
Y(t) = y0 + t * (y1 - y0)
where t is parameter in range 0..1. Point at t=0 corresponds to (x0, y0), at t=1 to (x1, y1), and at t=0.5 - to the center of rectangle. So all you need is vary parameter t and calculate position.
When your object will move with constant absolute speed in arbitrary direction, use horizontal and vertical components of velocity vx and vy. At every moment get coordinates as x_new = x_old + delta_time * vx. Note that reflection from vertical edge just changes horizontal component of velocity 'vx = - vx' and so on.

Create a formula for velocity based on rotation in 2d?

So I have a bit of a math problem. Here are the pieces.
Input:
Rot = Rotation (degrees). This is the rotation of the "player". This is also the yaw.
Vel.X = This is the left/rightward movement that would be happening if it weren't rotated
Vel.Z = Same as last except its up/down movement
Output:
Result.X = This is the actual movement that should be happening along the x axis considering rotation
Result.Z = Same as last
Basically the scenario is that a player is standing on a platform with "Rot" rotation. When directional keys are pressed velocity is added accordingly to the "Vel" value. However if rotation isn't 0 this wont produce the right result because when the player rotates moving left becomes relative.
Could you please tell me a formula that would find the proper x and y movement that would result in the player moving around relative to its rotation?
This problem is probably the most basic rotation question in game programming.
Using your Vel.X and Vel.Z values, you have what you might think of as the vector you wish to rotate in the x/z plane (instead of x/y - but same idea). Whether velocity or position, the approach is the same. With a simple google search we find that for 2D vector rotation, the formula is:
Result.X = Vel.X * cos(Rot) - Vel.Z * sin(Rot);
Result.Z = Vel.X * sin(Rot) + Vel.Z * cos(Rot);

Rotating an object around a tilted axis

I have the coordinates of a centre point . I also have an array called the asteroid normal which I assume is the relative rotation of the axis (its 3 numbers between zero and one).
How can I make an object revolve around this object? I haven't been able to find any formula that does this.
Try this:
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glTranslate(-x,-y,-z);
glRotate(angle,nx,ny,nz);
glTranslate(x,y,z);
Use the rotation matrix for an axis and angle. The new position p' of a point p on the object is
p' = center + R(angle, axis) * (p - center)
where R(angle, axis) is the matrix that rotates by angle about axis, and center is a point that the axis passes through. Tal Darom's answer is the same, only in OpenGL notation.

Need equations for a parametric parabola + the angle of the tangent at any given time

This may be ridiculously obvious, but math wasn't my strong suit in school. I've been banging my head against the wall long enough that I finally figured I'd ask.
I'm trying to animate a sprite moving along a 2D parabolic path, from point A to point B. Both points are at the same y-coordinate. The desired height of the parabola from the starting/ending y-coordinate is also given (or, if you prefer, a desired velocity). Currently in my code I have a timer firing at a high frequency. I would like to calculate the new location of the ball based on the amount of time that has passed. So a parametric parabola equation should work nicely.
I found this answer from GameDev adequate, until my requirements grew (although I'm not sure its really a parabolic path... I can't follow the derivation of the final equations there provided). Now I would like to squish/stretch the sprite at different points along the parabolic path. But to get the effect to work right, I'll need to rotate the sprite so that it's primary axis is tangential to the path. So I need to be able to derive the angle of the tangent at any given location/time.
I can find all sorts of equations for each of these requirements (parametric parabola, tangent at a point, etc.), but I just can't figure out how to unify them all. Could someone with more math skills help a fellow coder out and provide a set of equations that will work? Thanks ever so much in advance.
What you are missing is this:
Slope = TAN(angle) // in radians
What is the slope? It is how much up/down you move per how much across you move ( dy/dx on some other answers ). For you it is actually (dy/dt)/(dx/dt) since both x and y are functions of time.
So for a trajectory x(t)=Vx*t and y(t)=Vy*t-1/2*g*t^2 the slope is Slope=(Vy-g*t)/Vx where Vx is the initial horizontal velocity, and Vy the initial vertical velocity. g is the gravity (vertical acceleration down). So your rotation in degrees shall be
angle = ATAN( (Vy-g*t)/Vx ) * 180/PI
Basically the slope is equal to the ratio of vertical velocity to horizontal velocity.
Let X be the distance from A to B, Y the desired height of the parabola, V the horizontal speed.
x = Vt
y = Y - (4Y/X^2) (X/2-Vt)^2
tangent dy/dx = (8Y/X^2) (X/2-Vt)

Resources