I have a position somewhere on my map (in GTAV). In JavaScript it could be something like:let targetPos = {x: 1200, y: 653, z: 250}; and I have my position which changes every time I walk or rotate. Now what I want is to get the direction of the targetPos whenever I rotate or walk. Not the function but the math solution. Currently I'm using var angle = Math.atan2(pos1.y - pos2.y, pos1.x - pos2.x) * (180 / Math.PI); which is not working as intended. It gives me the angle in degree but not when I rotate myself or when I walk around it. In short: I want the direction of a position relative to my position. So I can rotate a circle to show in the target direction.
Here is what I have:
The player position (x, y, z), rotation (x, y, z) and heading (yaw)
The target position
As you can see in the horrible image, the circle doesn't show in the direction of the target when the player rotates
I hope you know what I mean
Related
I have the following img that I'd like to drag (by dragging a circle on top of rectangle) and rotate an image.
When dragging, I just want to rotate an image inside the rectangle and not the rectangle itself. I'm not sure I'm doing this correctly, I have this formula when I start dragging:
const newAngle = Math.atan(circleDrag.y, circleDrag.x) * (180 / Math.PI);
I'm getting the position of the circle from the top of the rectangle, but it's giving me something between 90 to 110 degrees only. Correct way of rotation angle would start from 0 I think, and should rotate between 0-360 degrees.
Could somebody direct me on how to calculate rotation angle?
If I understand your needs right, you have to measure angle of direction from the center point of rectangle to the circle center.
Math.atan(circleDrag.y - rectangleCenter.y, circleDrag.x - rectangleCenter.x)
(At this moment you are calculating direction from coordinate origin to the circle)
The question is related with that other question: https://stackoverflow.com/questions/26948677/translate-coordinates-to-its-equivalent-in-scale1 that no one gave response but it does not matter anymore because it's solved, at least that part. I get the correct x and y values.
I put you in situation, the app I'm developing allows the user to create a image with 6 differents backgrounds with funny characters without face so that the user can put a photo of his/her face. To do this, they can drag, pinch to zoom and rotate the image. Drag and pinch to zoom are under control but when the image is rotated I can not match the image in the exact coordinates. The images always go up a little.
An example, I get as values that:
x: 30,
y: 80,
scale: 0.5,
deg: 40.
So, when I draw into a canvas the rotated image the y seems to go up a little depending on the degrees. Less degrees, less go up.
I'm using this function to draw the image rotated:
var TO_RADIANS = Math.PI / 180;
var drawRotatedImage = function (context, image, x, y, angle) {
context.save();
context.translate(x, y);
context.rotate(angle * TO_RADIANS);
context.drawImage(image, -(image.width / 2), -(image.height / 2));
context.restore();
}
PD: To point it out, if I do not rotate the image, it matches perfectly in the correct position.
How I can get the correct x and y values for the rotated image?
I'm trying to put resizing handles on the four corners of a rectangle, which can be dragged to resize the rectangle. What I'm having trouble with is calculating the new width, new height, and new points of the rectangle after I've dragged one of the rectangle's points.
If the rectangle were not rotated, this would obviously be very easy because the width and height would change by the same amout as the mouse's offsetX and offsetY. However, this rectangle CAN be rotated, so offsetX and offsetY don't match up to the changes in width/height.
In the image above, I've represented information that I already have in solid black, and information I want to find in light grey. I've tried to show how the rectangle should change if I dragged the a1 corner up and to the right.
Could anyone help me figure out how to calculate the missing information?
Thanks for any help! It's much appreciated.
--
EDIT: I've got drag start, drag move, and drag end callbacks on each handle. My current code simply gets the new point (in this example, a2). Unfortunately this simply moves the handle we're currently dragging into its new position, but obviously has no effect on the width/height of the rectangle, and the position of its other points. What I'm hoping for help figuring out is how do I calculate the new width and height, and the new position of the other points, based on this drag.
Handle Coordinates (before drag)
handles: {
a: { x: 11, y: 31 },
b: { x: 44, y: 12 },
c: { x: 39, y: 2 },
d: { x: 6, y: 21 }
};
Callbacks:
// Save the original x and original y coordinates
// of the handle, before dragging
onDragStart: function(x, y, handle) {
handle.data({
ox: x,
oy: y
});
}
// While dragging the handle, update it's coordinates to
// reflect its new position
onDragMove: function(dx, dy, handle) {
handle.attr({
x: handle.data('ox') + dx,
y: handle.data('oy') + dy
});
}
// Not currently using the drag end callback
onDragEnd: function(x,y,handle) {}
http://en.wikipedia.org/wiki/Cartesian_coordinate_system#Distance_between_two_points gives you the method for finding the length of a1 to a2
var len=Math.sqrt(Math.pow(a2x-a1x,2)+Math.pow(a2y-a1y,2));
Then looking at the triangle formed by the intersection of the grey and black lines (Lets call that point H) and a1 and a2. You can use trigonometry to solve. So the angle formed by the line d1 to c1 with the bottom lets call that the angle of rotation(R). That means the R is equal to angle at a2 and the angle at a1 is equal to 90-R. To find the sides then you go
//line from a2 to H
var hDif=Math.sin(R)*len;
//line from a1 to H
var wDif=Math.cos(R)*len;
You can then use these to find the new length and height. There will a few more calculations to see if you are adding or subtracting to the old width and height.
I have another idea:
Consider that your rectangle is rotated by 30 degress anticlockwise with respect to the origin.
When the user clicks on one of the edges or corners, do the following:
1) Let StartPt = the point where the mouse starts.
2) Get the point where the mouse moves to. Let it be EndPt.
3) Rotate each of the vertex of the Rectangle by -30 so that now it becomes an unrotated rectangle. (Do not draw the unrotated rectangle, it is for calculcation purpose only)
4) Rotate the StartPt and EndPt by -30 degrees. Calculate the change in the width and height of the rectangle when the point.
5) Add the change to the rotated vertices of the rectangle.
6) Rotate the vertices of the Rectangle by +30 degrees. Now draw the Rectangle.
https://www.experts-exchange.com/questions/24244758/How-can-let-a-user-drag-to-resize-a-rotated-rectangle.html#answer23964155
I have two (or 3) coordinates.
They are the 2 upper coordinates: left and right
How do I create a div where the left corner has the coordinate of the left one and the right corner the coordinate of the right one.
The rotation should be created from these coordinates or this height difference between these 2 points
How can I achieve this?
To get the angle between the two coordinates, you could use Math.atan2
var angle = Math.atan2(Y2 - Y1, X2 - X1);
you could then use a CSS3 property to set the correct angle on the div.
For example it may be used in the application of manually adjusting the hands of the clock. I guess it probably involves translating the needle (to make the end point of the needle the centre of rotation) then rotating it, then translating the needle again.
But since the needle listens to the mouse event all the time, the 1st mouse event will be captured. The result is that the needle ends up being translated and not rotated at all. Mouse event is impossible to debug too...
Any idea or code snippets that I can refer to? Using Javascript or CSS to rotate both fine.
In your example, you will want to calculate the angle between the centre of the clock face (black dot), and the current mouse position (red dot), relative to the Y axis (cardinal north if you imagine a compass).
If I remember my trig correctly, you can calculate this by using the following:
var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
// alter the angle to be relative to Y axis instead of X
angle += 90;
if(angle < 0) { angle = 360 + angle; }
In the formula, x and y are the coordinates of the two points, one of which you will know (it is the centre of the clock face), and the other you can get from the mouse move event.
Once you have the angle, you can simply translate to the the centre of the circle, rotate the canvas by the calculated amount, and draw the hand.
Update: I created a jsfiddle to illustrate the angle calculation:
http://jsfiddle.net/DAEpy/1/