AS3: Rotate a DisplayObject with the Mouse

Question

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.

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?

IN RESPONSE TO TROBADOUR

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:

First, save what will be the middle of the image, the so-called registration point around which we will rotate everything:

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);

Am I correct so far? If so, I'll continue.

Second, denote the original mouse-down position:

var mouseDownPoint:Point = new Point(box.mouseX, box.mouseY);

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.

var vector:* = WTF.forReals();

Next, save the distance between registrationPoint and mouseDownPoint. 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.

var distance:Number = calculateDistance(registrationPoint, mouseDownPoint);

I know I'm getting close! Next, to determine the constrained scale, we get the current mouse location, determine its distance to registrationPoint, and divide that by distance.

var constrainedScale:Number = calculateDistance(registrationPoint, new Point(mouseX, mouseY)) / distance;

My question here is: how do I get values when I don't want them constrained, like scaleX and scaleY?

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?

The question, as currently posed, doesn't quite make sense. You can't have the picture corner follow the mouse exactly and be only rotating about one fixed point. — Troubadour
Scale isn't the FIRST priority right now. (Walk before you run) I'd basically like to calculate the degrees of rotation based on the mouse x and y as compared to image x and y. I'm just totally drawing a blank on what math would be good for that. I need to get some rest and some food, but if anyone has any ideas, please don't hold back :) — Naftuli Kay
@rfkrocktk: When I say "vector" I am referring to the mathematical meaning of a set of co-ordinates eg. the vector pointing in the direction (4,6). That sort of thing. Similar to your Point type. Maybe it's the same thing in AS3, I have no idea. — Troubadour
Well, we can just simply call it a Point object, as it is a pair of two numbers. What should I store in my "vector" as discussed above? — Naftuli Kay

Troubadour Troubadour · Accepted Answer · 2010-08-05T23:01:52

Denote the mouse co-ords of the scale/rotation centre as (x0,y0) and the mouse co-ords of the corner when in an unscaled, unrotated state as (x1,y1). Store the point (x0,y0) and cache both the vector and the distance between (x0,y0) and (x1,y1). Denote the cached vector by v0 and the distance by d0.

To get the scale factor just compute the current mouse co-ords distance to (x0,y0) and divide that by d0.

To get the rotation angle first calculate the vector between (x0,y0) and the current mouse co-ords. Denote this by v. Then calculate the angle by using the dot product formula

v.v0 = |v| d0 cos(theta)

which will give you something between 0 and pi. To get into the correct quadrant just examine the sign of the cross product of v and v0 and adjust accordingly.

AS3: Rotate a DisplayObject with the Mouse

IN RESPONSE TO TROBADOUR

1 Answers