Skip navigation
RxMadjack
Currently Being Moderated

Rotate matrix by mouse position.

May 10, 2012 10:13 AM

Hey guys I have been banging my head against this problem for the past few hours.  I have a rectangle object created, I want the rectangle's rotation to follow my mouse cursor. ( I am easily able to do this).  Where things get hard is that I want the rectangle to rotate around it's bottom right corner, to do this I've found that I need to use a matrix transformation.  At this point I am able to have my rectangle rotate around the bottom right point, but I cannot figure out how to have it follow my mouse cursor as well while rotating.  The reason being that with a matrix you can only tell it a amount of radians to rotate (matrix.rotate) rather than just being able to set its current rotation.... Here is my code

 

var point:Point=new Point(myRectangle.x+myRectangle.width/2, myRectangle.y+myRectangle.height/2);

 

function rotateObject( event:Event ):void

{

          var m:Matrix=myRectangle.transform.matrix;

                              m.tx -= point.x;

                              m.ty -= point.y;

                              m.rotate (45*(Math.PI/180));

                              m.tx += point.x;

                              m.ty += point.y;

                              myRectangle.transform.matrix=m;

 

}

 

addEventListener( Event.ENTER_FRAME, rotateObject);

 

So with the current code it is constantly rotating around the bottom right corner, I have tried changing the "45" to "Math.atan(mouseX/mouseY), but again it seems that would only work if i could set the rotation of the matrix to that rather than telling it how much to rotate by....

 

Any thoughts or ideas would be much appreciated, thanks!

 
Replies
  • Currently Being Moderated
    May 11, 2012 1:29 AM   in reply to RxMadjack

    can you not calculate the new rotation based on the mouse position and the rotate by the difference with the current rotation on your rectangle?

     

     

    function rotateObject( event:Event ):void

    {

              var newRot:Number = Math.atan(mouseX/mouseY);

              var rotationDelta:Number = myRectangle.rotation - newRotation

     

              var m:Matrix=myRectangle.transform.matrix;

                                  m.tx -= point.x;

                                  m.ty -= point.y;

                                  m.rotate (rotationDelta*(Math.PI/180));

                                  m.tx += point.x;

                                  m.ty += point.y;

                                  myRectangle.transform.matrix=m;

     

    }

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2012 7:00 AM   in reply to RxMadjack

    Any reason you're not simply setting the registration point to the place you want to rotate it, the bottom left?

     

    Meaning create the rectangle in a display object (Sprite, etc) so you can just set its y position to rectangle.y -= rectangle.height;. Rotate the sprite and it'll, with much less cpu, rotate the rectangle on its bottom left corner.

     
    |
    Mark as:
  • Currently Being Moderated
    May 11, 2012 8:51 AM   in reply to RxMadjack

    Sure.. make a new AS3 document, paste this into frame 1, run:

     

    import flash.geom.Rectangle;

    import flash.display.Sprite;

    import flash.events.Event;

     

     

    // container, I'll use graphics and draw

    // directly into it

    var container:Sprite = new Sprite();

    addChild(container);

     

     

    // draw rectangle, pushing up on the y axis

    container.graphics.beginFill(0xFF0000,1);

    container.graphics.drawRect(0,-100,100,100); // see the -100 on y axis?

    container.graphics.endFill();

     

     

    // position it in the center of the stage

    container.x = stage.stageWidth / 2;

    container.y = stage.stageHeight / 2;

     

     

    // start rotating baby

    addEventListener(Event.ENTER_FRAME, rotateMeBaby);

     

     

    function rotateMeBaby(e:Event):void

    {

              container.rotation += 3;

    }

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points