• Create Account

Need scary sound effects or creepy audio loops for your next horror-themed game? Check out Highscore Vol.3 - The Horror Edition in our marketplace. 50 sounds and 10 loops for only \$9.99!

# Calculate the mid point of a rotated rectangle in Javascript

Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

### #1gretty  Members   -  Reputation: 169

Like
0Likes
Like

Posted 12 April 2012 - 08:37 PM

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)) );
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

### #2Ravyne  Crossbones+   -  Reputation: 4093

Like
0Likes
Like

Posted 12 April 2012 - 08:54 PM

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):
• Get the center of the non-rotated rect, relative to the upper-left corner. (Width /= 2, Height /= 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*.
• 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};[/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.

Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

PARTNERS