-
Senior Member
-
if the entire space rotates (as in your second image), the distance doesn't change.
-
Senior Member
Originally Posted by newblack
if the entire space rotates (as in your second image), the distance doesn't change.
Still how do I calculate the correct positions for them all because I want them to move like in the image and not just rotate on their original position
-
the easiest way to accomplish this is to rotate the DisplayObjectContainer the pieces reside in- not individually.
-
Senior Member
I don't think that'll work because this group can be pretty much any number of pieces and I don't want the rest of the pieces that don't belong to this group to rotate and move
-
i think you need to be a bit more specific... especially in how you're representing the "pieces".
but we'll try to walk through an implementation anyway. i'll assume that you have each piece in a group stored in an Array and each piece is a DisplayObject:
Code:
var pieces:Array = [ piece1, piece2, piece3, etc... ];
the first thing you need to do is define the center of rotation globally, then translate each piece into the rotation's local space. each piece will inherit the same rotational offset, so we simply need to define its displacement, after rotation, from the center of rotation.
it might be helpful to think of each piece as the end of a spoke on a broken wheel (broken spokes with different sizes etc). we need to find the length (magnitude in vector parlance) and original direction of each spoke.
so we'll create 2 functions- 1 helper method to encapsulate the actual rotational transformation and the main algorithm which will reposition your pieces.
Code:
function rotateGroup( group:Array, rotationX:Number, rotationY:Number, degrees:Number ) : void
{
for each( var piece:DisplayObject in group )
{
//find position relative to rotation
var offsetX:Number = piece.x - rotationX;
var offsetY:Number = piece.y - rotationY;
//compute the rotational change requested in radians
var radians:Number = degrees * Math.PI / 180;
//find the piece's post-rotation position
var transformed:Point = transform( offsetX, offsetY, radians );
//reposition
piece.x = transformed.x;
piece.y = transformed.y;
//update the pieces rotation
piece.rotation += degrees;
}
}
function transform( offsetX:Number, offsetY:Number, theta:Number ) : Point
{
var sine:Number = Math.sin( theta );
var cosine:Number = Math.cos( theta );
var point:Point = new Point();
point.x = cosine * offsetX - sine * offsetY;
point.y = sine * offsetX + cosine * offsetY;
return point;
}
and obviously you pass the Array of pieces you want transformed by rotation:
Code:
//rotates each piece about the center (100,200) by 45 degrees
rotateGroup( pieces, 100, 200, 45 );
the transformation itself utilizes what's called a rotation matrix
Code:
| cos(theta) -sin(theta) |
| sin(theta) cos(theta) |
this matrix, multiplied with position relative to the rotation's center, returns the transformed position.
i wrote this all here, so i haven't tested this- but it should get you started all the same.
Last edited by newblack; 01-19-2008 at 03:25 PM.
-
Senior Member
Thanks alot, this seems to be just what I was looking for. I'll report later how it worked out.
-
when i looked back over this, i saw a few things that need changed. the transformation is still in the rotation's local space so we need to translate back out to global coordinates. also, on a less important note, we don't need to recalculate radians for each piece- i'm not able to edit my response (wtf?), so see the new algorithm below:
Code:
function rotateGroup( group:Array, rotationX:Number, rotationY:Number, degrees:Number ) : void
{
//compute the rotational change requested in radians
var radians:Number = degrees * Math.PI / 180;
for each( var piece:DisplayObject in group )
{
//find position relative to rotation
var offsetX:Number = piece.x - rotationX;
var offsetY:Number = piece.y - rotationY;
//find the piece's post-rotation position
var transformed:Point = transform( offsetX, offsetY, radians );
//reposition
piece.x = rotationX + transformed.x;
piece.y = rotationY + transformed.y;
//update the pieces rotation
piece.rotation += degrees;
}
}
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|