Question

I think I am just over-complicating this but I have a rectangle that I am trying to draw using a rotation value. I have the coordinates of all four vertices and I need the new coordinates when rotated by X degrees clockwise.

EDIT: One thing to note, I am drawing on the HTML5 canvas so the coordinate system is a little different. X and Y are always > 0 and and increase in Y progresses downward.

Any ideas?

Thanks

Answer 1

So all you really need is a function that takes a point, an origin (the center of your rectangle in this case) and an angle:

function rotatePoint(p, origin, angle) {
  if (angle === 0) return p;
  // make the origin essentially zero:
  var px = p.x - origin.x;
  var py = p.y - origin.y;
  if (px == 0 && py == 0) return p;
  var rad = angle * Math.PI / 180;
  var cosine = Math.cos(rad);
  var sine = Math.sin(rad);
  p.x = cosine * px - sine * py;
  p.y = sine * px + cosine * py;
  // put the point back:
  p.x += origin.x;
  p.y += origin.y;
  return p;
};

So if you wanted to rotate a vertex at 10,10 by 45 deggrees about the center which is (say) 20,20, you would do: rotatePoint({x:10, y:10}, {x:20, y:20}, 45) would give you (20, 5.85), and so on.