How to rotate a vertex around a certain point?

The easiest approach is to compose three transformations:

  1. A translation that brings point 1 to the origin
  2. Rotation around the origin by the required angle
  3. A translation that brings point 1 back to its original position

When you work this all out, you end up with the following transformation (where x is the desired angle of rotation in radians):

newX = centerX + (point2x-centerX)*Math.cos(x) - (point2y-centerY)*Math.sin(x);

newY = centerY + (point2x-centerX)*Math.sin(x) + (point2y-centerY)*Math.cos(x);

Note that this makes the assumption that the angle x is negative for clockwise rotation (the so-called standard or right-hand orientation for the coordinate system). If that’s not the case, then you would need to reverse the sign on the terms involving sin(x).

Leave a Comment