title: AS3: Rotate a DisplayObject with the Mouse
body: <p>I am basically trying to create a display object transformation manager which will allow me to scale/rotate objects. I am currently trying to figure out how to rotate an object so its corner follows the current x and y of the mouse.</p>
  
  <p><a href="https://i.stack.imgur.com/0SuHF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0SuHF.jpg" alt="Example 1"></a>
  
  <a href="https://i.stack.imgur.com/OjsUX.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OjsUX.jpg" alt="Example 2"></a>
  
  <a href="https://i.stack.imgur.com/fadzY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fadzY.jpg" alt="Example 3"></a>
  </p>
  
  <p>I always get confused on the math of things like this. I know how to listen for the events and everything, I just am unsure of how to calculate the amount of rotation to apply. I will probably be rotating via a Matrix so I can rotate the object around its center, rather than the upper-left corner of it. Can anyone who is more skilled with the math of this help me out? </p>
  
  <h1>IN RESPONSE TO TROBADOUR</h1>
  
  <p>Your answer is so brilliant that I can't understand it at all. Let me explain what I can grasp and what I can't. Here's a walkthrough of what I do/don't understand:</p>
  
  <p>First, save what will be the middle of the image, the so-called registration point around which we will rotate everything:</p>
  
  <pre><code>var box:Sprite = new BeautifulSprite();
  box.width = box.height = 100;
  /* ... */
  var registrationPoint:Point = new Point(box.x + box.width / 2, 
          box.y + box.height / 2);
  </code></pre>
  
  <p>Am I correct so far? If so, I'll continue. </p>
  
  <p>Second, denote the original mouse-down position:</p>
  
  <pre><code>var mouseDownPoint:Point = new Point(box.mouseX, box.mouseY);
  </code></pre>
  
  <p>Third, store the "vector." Problem is, I'm not sure of what you mean vector. I am familiar with Vector types in Java and AS3, in that they store a list of values of a certain type. Beyond that, I'm lost. </p>
  
  <pre><code>var vector:* = WTF.forReals();
  </code></pre>
  
  <p>Next, save the distance between <code>registrationPoint</code> and <code>mouseDownPoint</code>. I remember learning about calculating distance between two points way back in high school, so I'm sure I could dig up the formula for distance between two 2d points. </p>
  
  <pre><code>var distance:Number = calculateDistance(registrationPoint, mouseDownPoint);
  </code></pre>
  
  <p>I know I'm getting close! Next, to determine the constrained scale, we get the current mouse location, determine its distance to <code>registrationPoint</code>, and divide that by <code>distance</code>.</p>
  
  <pre><code>var constrainedScale:Number = calculateDistance(registrationPoint, new Point(mouseX, mouseY)) / distance;
  </code></pre>
  
  <p>My question here is: <em>how do I get values when I don't want them constrained, like scaleX and scaleY?</em> </p>
  
  <p>Now, to get the actual rotation around the registration point, I am completely lost. Could you help me out, using the variables I have defined above? </p>