How to rotate a group of 2D shapes around an arbitrary point

Question

and i'm making a 'Body' class which holds a bunch of 2D shapes together to form a single moveable, rotatable body.

What i need to know is how i can rotate each individual shape in a way that makes it look like the whole body is rotating, not each shape doing it's own rotation around it's center. I can't just change each shapes center of rotation to the same point, as this would cause their placement to be affected also.

Therefore i need to find some kind of equation that uses the bodies center to re-position and re-rotate each individual shape in a body in a way that keeps the Body figure undeformed?

How can i do this?

Answer 1

The way to rotate by an arbitrary point is first substract the point coordinates, do the rotation about the origin and then add the point coordinates.

x2 = px + (x1-px)*cos(q)-(y1-py)*sin(q)
y2 = py + (x1-px)*sin(q)+(y1-py)*cos(q)

where px, py are the rotation point coordinates, and x1,y1 the original 2D shape vertex and x2,y2 the rotated coordinates, and q the angle in radians.

Answer 2

I'll assume you're representing points in Cartesian coordinates (x,y) and that you're comfortable with the basic idea of vectors.

To rotate a single point by a given angle θ around the origin (0,0), we transform it like so:

x' = x cos(θ) - y sin(θ)
y' = x sin(θ) + y cos(θ)

Or in vector-matrix form:

= (θ) = (θ)

(I can spell out the vector-matrix stuff if you're not familiar with it.)

To rotate the point around a point , do this:旋转点 ，请执行以下操作：

= + (θ) ( - ) = + (θ) ( - )

To rotate the whole Body by θ about its center , just rotate each shape's center by θ about , and rotate each shape about its own center by θ (you can do those steps in any order).旋转 θ ，只需将每个形状的中心围绕旋转 θ ，然后将每个形状围绕其自己的中心旋转 θ （您可以按任何顺序执行这些步骤）。

Answer 3

What you need is a hierarchy of transformations. Essentially, what is done all the time in 3D, only you use 2D math for it. So instead of 4x4 affine matrices, you have 3x3 affine matrices.

Each individual shape needs to have a local transform. The rotation of itself around its center (relative to a neutral rotation), and the translation of itself to that center point relative to its parent object. You build this transformation as a 3x3 matrix.

You need a hierarchy of objects: a tree. Your "body" is a node in the tree. It has child nodes: two upper legs, two upper arms, and a head. Each upper leg has a lower leg as a child, just as each upper arm has a lower arm as a child. And so on.

So, when it comes time to draw everything, you accumulate matrices. You get the body's transform matrix, transform the body by it, and render it. Then you get every child of the body, multiply its transform by its parent, transform that shape by that new matrix, and render it. Then, for each of these, you repeat the process: take the parent matrix, apply its local matrix to that parent matrix, transform the object by the new matrix, and render it. Recurse through the entire hierarchy of objects.

Really, the best way to understand this is to look at how 3D renderers do it. 2D rendering is just a special case of this, where you only rotate around Z and only have a 2D translation.