Jump to content
  • Advertisement
Sign in to follow this  

Calculate the mid point of a rotated rectangle in Javascript

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

If you intended to correct an error in the post then please contact us.

Recommended Posts


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 this post

Link to post
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 degtorad = Math.PI/180;
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};

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.

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!