How to find the x,y coordinates of a rotated vector

Question

Hi all, I found the best way of calculating the width and height of the bounding box of a vector post-rotation from a different stack overflow post. This worked great. My problem now is calculating the new x,y coordinates of the rotated vector's bounding box. Here is the my javascript. The newWidth, newHeight variables are correct -- the rotatedXPos, rotatedYPos are not correct, however, and it's because x0, y0 -- which I think should be the rotating middle of the vector -- are also incorrect (They're set to just the x,y coordinates of the upper-right/left of the vector, which I know is wrong).

this.options.rotationAngle = parseInt(this.options.lastRotationAngle);
var degreesAsRadians = this.options.rotationAngle*Math.PI/180;
var points = new Array();
points.push({x:0, y:0});
points.push({x:this.options.width, y:0});
points.push({x:0, y:this.options.height});
points.push({x:this.options.width, y:this.options.height});
var bb = new Array();
bb['left'] = 0; bb['right'] = 0; bb['top'] = 0; bb['bottom'] = 0;

$A(points).each(function(p) {
  var newX = Math.abs(parseInt(p.x * Math.cos(degreesAsRadians) + p.y *  Math.sin(degreesAsRadians)));
  var newY = Math.abs(parseInt(p.x * Math.sin(degreesAsRadians) + p.y * Math.cos(degreesAsRadians)));
  bb['left'] = Math.min(bb['left'], newX);
  bb['right'] = Math.max(bb['right'], newX);
  bb['top'] = Math.min(bb['top'], newY);
  bb['bottom'] = Math.max(bb['bottom'], newY); 
});

var newWidth = parseInt(Math.abs(bb['right'] - bb['left']));
var newHeight = parseInt(Math.abs(bb['bottom'] - bb['top']));

Object.extend(this.options, {
rotatedWidth: newWidth
,rotatedHeight: newHeight 
});

var x0 = this.options.xPos;
var y0 = this.options.yPos;

this.options.rotatedXPos = x0+(this.options.xPos-x0)*Math.cos(degreesAsRadians)+(this.options.yPos-y0)*Math.sin(degreesAsRadians);
this.options.rotatedYPos = y0-(this.options.xPos-x0)*Math.sin(degreesAsRadians)+(this.options.yPos-y0)*Math.cos(degreesAsRadians);

And here is a video. In the video, the red box shows the newWidth, newHeight correctly, but the rotatedXPos, and rotatedYPos are not being calculated at the top/left of the newly rotated vector. I'd love any help, thanks much!

Answer 1

If you know where the center of the ellipse is (xc, yc) then the upper left corner of the bounding box is

(xc - newWidth/2, yc - newHeight/2)

(assuming +x goes right and +y goes down).