How to calculate points in a shape when shape is rotated

Question

I have a bunch of different shapes and on these shapes there 20 points laid out in a grid. What I am trying to figure out is how to calculate where these points are when a shape is rotated, the shapes can be rotated any degree from the center of the shape. The points are placed from the top left of the shape.

Here are a couple of examples of shapes with the points I want to be able to calculate as the shape is rotated. I have all of the x/y coordinates for all of the shapes at 0 degrees. I am build a JavaScript app so if someone has any functions in JavaScript for this that would be great or if you could direct me to somewhere with some resources for this.

Answer 1

To rotate point (Xold,Yold) about center point (Xc, Yc) by angle Angle counter clockwise, you can use complex affine transformation , composed from translation of rotation center to origin, rotation around origin, and back translation. Resulting formula:

Xnew = Xc + (Xold - Xc) * Cos(Angle) - (Yold-Yc) * Sin(Angle)
Ynew = Yc + (Xold - Xc) * Sin(Angle) + (Yold-Yc) * Cos(Angle)