# Calculate the mid point of a rotated rectangle in Javascript

This topic is 2316 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

Hello

I am attempting to find the mid point of a rotated rectangle.

I have made a javascript function to do this but its outputting incorrect answers. I dont understand where I am going wrong in my math or maybe I am not converting everything to radians?

Can you tell me how I can get my function to correctly calculate the mid point of a rotated rectangle?

This JSFiddle demonstrates how I am getting incorrect values for the mid point: http://jsfiddle.net/HyFrX/1/
function getMidPoint( /*int*/ x, /*int*/ y, /*int*/ width, /*int*/ height, /*int(in degrees)*/ angle ) { width = width/2; height = height/2 var dist = Math.sqrt( (Math.pow(width,2)) + (Math.pow(height,2)) ); var degtorad = Math.PI/180; x += Math.cos(degtorad * (45+angle)) * dist; y += Math.sin(degtorad * (45+angle)) * dist; return {px: x, py: y}; } var p = getMidPoint(50,90,200,300,0); var p2 = getMidPoint(10,500,600,100,0); alert("p1: "+p.px+","+p.py); // Should be 150,240 right? alert("p2: "+p2.px+","+p2.py); // Should be 310,550 right

##### Share on other sites
This would be much easier if you defined the rectangle in a sane way -- it's pretty odd to define a rotatable object relative to its upper-left-hand corner; you'd almost always define it relative to its center of rotation, which would usually correspond to its physical center.

But you can make the math work, regardless, if you're tied to this representation (assuming it rotates about the upper-left corner):

1. Get the center of the non-rotated rect, relative to the upper-left corner. (Width /= 2, Height /= 2)
2. Treating this as a 2D vector, rotate it by the desired angle (convert angle to radians, use a simplified rotation matrix) -- this gives you a new vector which is the center of the rotated rectangle *relative to the original upper-left corner*.
3. Add the original upper-left corner coordinates to the rotated vector.

You don't need to get the distance or normalize the original midpoint vector. The body of your code should look like this:

[source lang='javascript']
width = width/2;
height = height/2;
var cosA = Math.cos(degtorad * angle);
var sinA = Math.sin(degtorad * angle);
x += width * cosA + height * sinA;
y += width * (-sinA) + height * cosA;

return {px: x, py: y};
[/source]

This code does clockwise rotation in a left-handed cartesian coordinate system (standard 2-d Graphics coordinate system) -- if you want CCW rotation or a right-handed coordinate system, you'll have to fiddle with the signs. Refer to Rotation Matrix on Wikipedia.

1. 1
2. 2
frob
16
3. 3
4. 4
5. 5
Rutin
10

• 18
• 13
• 14
• 76
• 22
• ### Forum Statistics

• Total Topics
632149
• Total Posts
3004363

×