A Flash Developer Resource Site

Results 1 to 8 of 8

Thread: Rotating and new positions for mcs

  1. #1
    Senior Member hatu's Avatar
    Join Date
    Jan 2007
    Posts
    480

    Rotating and new positions for mcs

    I'm trying to implement rotation into a Jigsaw puzzle game but with my math skills I'm having a bit of trouble with it.

    They're not always these exact pieces as it can change depending on which are connectd.

    I've got everything else working except this part. How do I calculate the new positions for all these clips?
    They area all attached to eachother and I know the distance between the one that's being dragged/rotated and each clip when they haven't been rotated.
    Everything rotates in synchronization so they all have the same _rotation.


    Any help is appreciated, best case if someone can make me understand what's going on




  2. #2
    Senior Member
    Join Date
    May 2006
    Location
    Manhattan
    Posts
    246
    if the entire space rotates (as in your second image), the distance doesn't change.

  3. #3
    Senior Member hatu's Avatar
    Join Date
    Jan 2007
    Posts
    480
    Quote 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

  4. #4
    Senior Member
    Join Date
    May 2006
    Location
    Manhattan
    Posts
    246
    the easiest way to accomplish this is to rotate the DisplayObjectContainer the pieces reside in- not individually.

  5. #5
    Senior Member hatu's Avatar
    Join Date
    Jan 2007
    Posts
    480
    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

  6. #6
    Senior Member
    Join Date
    May 2006
    Location
    Manhattan
    Posts
    246
    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.

  7. #7
    Senior Member hatu's Avatar
    Join Date
    Jan 2007
    Posts
    480
    Thanks alot, this seems to be just what I was looking for. I'll report later how it worked out.

  8. #8
    Senior Member
    Join Date
    May 2006
    Location
    Manhattan
    Posts
    246
    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
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center