5 Replies Latest reply: May 16, 2012 1:37 PM by RxMadjack RSS

    Rotate matrix by mouse position.

    RxMadjack

      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!

        • 1. Re: Rotate matrix by mouse position.
          _spoboyle Community Member

          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;

           

          }

          • 2. Re: Rotate matrix by mouse position.
            sinious MVP

            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.

            • 3. Re: Rotate matrix by mouse position.
              RxMadjack

              See in the beginning i thought that i could simply move the registration point to one of the display object's corners, but when i do that and then rotate the object with code it still rotates around its center....  I would love to be able to make it that simple, I wonder why that way isn't working for me.  I tried doing what you suggested Sinious, it moved my rectangle up higher but still rotates around its origin.(center).  Using _spoboyle code didnt seem to help, the rectangle spins out of control like crazy... All I need is a rectangle that rotates (to follow the mouse position) but the rectangle needs to rotate around one of its corners rather than its center. You guys could probly just make your own code in a minute, im a noob

              • 4. Re: Rotate matrix by mouse position.
                sinious MVP

                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;

                }

                • 5. Re: Rotate matrix by mouse position.
                  RxMadjack

                  Sorry its been a few days, thank you so much for that code, I think it will help me get the desired result im looking for, thank you again.