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?

Do you know how to rotate one point around another? And is the position of a shape defined by the position of its center? — Beta, Jul 11 '11 at 02:05
yes the position of the shape depends on the center, and no i don't know how to do that — Griffin, Jul 11 '11 at 02:25
-1. Ask this in Mathematics Exchange first to get the math down, and then ask here for the implementation if needed. Also look in Wikipedia for "2D rotation" - http://en.wikipedia.org/wiki/Transformation_matrix#Rotation. — John Alexiou, Jul 11 '11 at 03:06
possible duplicate of [C++: Rotating a vector around a certain point](http://stackoverflow.com/questions/620745/c-rotating-a-vector-around-a-certain-point) — Ben Voigt, Jul 11 '11 at 03:17
@ja72: If you want, known @Griffin for not searching for existing answers. But this isn't off-topic. — Ben Voigt, Jul 11 '11 at 03:17

score 10 · Accepted Answer · edited Feb 19 '17 at 14:00

10

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.

edited Feb 19 '17 at 14:00

Cœur

37,241
25
195
267

answered Jul 11 '11 at 03:09

John Alexiou

28,472
11
77
133

This doesn't keep the spatial distance between the original shapes. Any ideas on how to fix that? – Ash Blue Aug 27 '12 at 19:53
1

Yes. It will keep `(px,py)` fixed and move `(x,y)` around at a fixed distance. – John Alexiou Aug 28 '12 at 14:45
2

Here is a more detailed description as to what is going on http://en.wikipedia.org/wiki/Rotation_matrix#In_two_dimensions – Ash Blue Aug 29 '12 at 20:30

score 1 · Answer 2 · answered Jul 11 '11 at 03:08

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:

X' = M(θ) X

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

To rotate the point X around a point B, do this:

X' = B + M(θ) (X - B)

To rotate the whole Body by θ about its center B, just rotate each shape's center by θ about B, and rotate each shape about its own center by θ (you can do those steps in any order).

@Griffin: which ones? The third and fourth? – Beta Jul 11 '11 at 15:26 — Beta, Jul 11 '11 at 15:26

score 0 · Answer 3 · answered Jul 11 '11 at 02:16

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.

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

3 Answers3

Linked