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.
Related
I have a polygon (RED SQUARE), for simplicity its a square 100x100 with an offset of 100 from the top left. Assume the coordinate system top left is 0,0. So the coordinates for my simple square are: [x:100,y:100],[x:100,y:200],[x:200,y:200], [x:200,y: 100].
Now lets say I have another square (BLUE SQUARE), its a 100x100 square also, with the same 100 offset from the top left, but this square is rotated 45 degrees, so its cords are: (rounded) [x:150,y:79],[x:79,y:150],[x:150,y:221],[x:221,y:150].
How do I calculate the rotation of BLUE SQUARE (45 degrees) if I am given only the coordinates? Assuming I want the right angles to be straight (vertical or horizontal) in this coordinate system (Like RED SQAURE).
Worded another way... Given these coordinates: [x:150,y:79],[x:79,y:150],[x:150,y:221],[x:221,y:150] how do I calculate the rotation to apply to polygon so its coordinates are this: [x:100,y:100],[x:100,y:200],[x:200,y:200], [x:200,y: 100]
Here is a image demonstrating what I am talking about.
Image of both polygons with coordinates
The way you do this is to
calculate the angle between two adjacent points. The formula for this Math.atan2(x2-x1, y2-y1); This will give you the angle the quadrilateral is on.
Rotate the quadrilateral (from its center) by -angle (or by pi/2 - angle) and one side will be horizontal and one will be vertical
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)
So I'm trying to get the top left x,y values for the green box to crop an image that has been rotated into a square.
The green square can move left and right on the dotted line, so I'm able to get the x value, I'm just having a hard time getting the Y especially when the blue rectangle is a different aspect ratio.
So I know how much the blue rectangle has be rotated and with width and height, also the width and height of the bounding box and same for the green square.
So I need the min and max Y at a certain X value with a rotation between -10 - 10 degrees?
I'm using html and js right now.
the blue rectangle is a scrollable div that's rotated inside the square div so you can see a preview of the crop.
diagram:
http://i.stack.imgur.com/FwXjZ.jpg
thanks
You can setup a line equation for the top and bottom side of the rotated rectangle: y1 = mx + b1, resp. y2 = mx + b2
m is the slope, which is the tangent of the angle between the line and the x-axis.
b is the intercept (the y-value at which the line intersects the y-axis; b = y(0)).
Look at this site for more information.
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/
I am working on a simple platform game in HTML5/Canvas/Javascript/jQuery. You can see it here.
I'm aware of how to check the intersection of two rectangles (there are several questions on here regarding that), and my game checks and handles the intersection of the two rectangles, but only under very specific circumstances, and only because the character is not wider than my block.
My question: how do I calculate the intersection of two rectangles in a way which I can tell which direction the intersection occurs from? The only way I can think of includes 20+ if statements (this cannot be the proper way?).
I need to know the direction of intersection because I "peek" ahead to see if my sprite coordinates (x + dx, y + dy) will intersect a rectangle, and if they will, set the sprite's new coordinates to just the edge of the rectangle on the next tick.
To get the position of a rectangle relatively to an other, you could use the center the sprite rectangle and get its position to the block.
The following function is to get position of a point to another. It should help you. Just need to adapt to verify the position of your sprite to your block using the center of the sprite and the center of the block (or verify the position of the sprite center to the top left and bottom right corners of the block)
function positionOf(point, relativeTo) {
var dx = point.x - relativeTo.x; // diff on x axis
var dy = point.y - relativeTo.y; // diff on y axis
if(dx >= dy) { // point is on top right half from relativeTo
return dx >= - dy ? 'EAST' : 'NORTH';
}
else { // point is on bottom left half from relativeTo
return dx >= - dy ? 'SOUTH' : 'WEST';
}
}
EDIT : all of this is good when considering x and y axis origin is at top left corner of viewport