Everything related to angles in flash

[adit_ya_sharma]

I have used flash for more than two years now but Iam still a newbie when it comes to all kinds of angles between points, the conversion of angles in flash script language, use of sin and other functions. If any one can post a hot post or maybe some links, then it might be very useful. Looking forward to some great post. Thank you!

[Dickee]

Hey Aditya!

Checkout my AS2Library to explore examples of your quest:

com.wis.math.geom.util.Graphic ... mainly 2D

Angle computation:

1. distance(p1,p2)
2. angle(p1,p2)
3. radAngle(p1,p2)
4. toStandardAngle(ang)
5. lineToStandardAngle(p1,p2)
6. angleSpan(ang1,ang2,cw)
7. averageAngle(arr)

...

Angle Conversion:

22. dms2Deg(sDms)
23. deg2Dms(deg)
24. convertDeg(deg,sOut)
25. convertRad(rad,sOut)
26. convertMultPI(multPI,sOut)
27. convertDms(sDms,sOut)


com.wis.math.geom.trig.*

Circular ... typical sin, cos, tan and their complements
Degree ... Circular functions returned in degrees
Hyperbolic ... advanced trigonometric functions


com.wis.math.alg.Complex

... utilizes Circular and Hyperbolic trig methods to support its complex number methods.

Ahab Tutorials ... a mirror of Brandon Williams' early tutorials ... Brandon's main field of interest these days is Algebraic Topology ... we won't get into that here!

Senocular's Trigonometry Tutorial is a short read to give you a quick synopsis of the methods applied in Flash ... it deals with 2-space, to be extended to 3-space ... thus it's found in his 3D tutorial section.

Also, you can checkout my Unit Circle app to see all Circular trig methods in action and a large list of trig identitites (no proofs though) ... the graph mapping tool is not quite finished, sorry! Actually, it's a Flash 5 app that won't be revisited ... anyone remember the complexity of trying to tweak 'onClipEvent' code??!! I've used an explicit line algorithm (f(x) = mx + b) without my AS2 class-included hack for 'divide by 0', so some vector depictions will explode at vertical. An explanation of the explicit, implicit, and parametric line algorithms that are included in the above Graphic class can be found at the Intersection between two lines Were-Here thread.

Richard

[OpethRockr55]

That's great and all, but all you need is this:

onClipEvent (mouseMove) {
    x = this._xmouse;
    y = this._ymouse*-1;
    angle = Math.atan(y/x)/(Math.PI/180);
    /*if (x<0) {
        angle += 180;
    }
    if (x>=0 && y<0) {
        angle += 360;
    }*/
    this._rotation = angle*-1;
    updateAfterEvent();
}

The commented stuff is only if your using an movie clip in the center of the stage. However, there are a lot of exceptions, so have fun with it.
Check out the attached file to see the code in action.

[adit_ya_sharma]

Thanks guys. Actually Iam still in learning phase of AS 2.0 so that's kinda hard for me to understand. But I'll look back to this whenever I'll need it. thanks again Dickee!

Sorry for being late with the reply, my tooth has been aching from past few days :P

Edit: and also thanks for all the great links *reading*

[Dickee]

Hey OpethRockr55!

Your post creates the opportunity to explore the functionality of an angle mapping algorithm, and may help Aditya with his quest!

Although your ragdoll app performs as expected, your posted code snippet is incomplete ... copy and pasting it to an onstage mc doesn't work. Try this instead:

this.createEmptyMovieClip("clip",1);
with (clip)
{
    _x = 275;
    _y = 200;
    lineStyle(5);
    moveTo(-20,0);
    lineTo(20,0);
    moveTo(0,-10);
    lineTo(20,0);
    lineTo(0,10);
    clip.onMouseMove = function()
    {
        xDiff = _root._xmouse-this._x;
        yDiff = _root._ymouse-this._y;
        rot = this._rotation = Math.floor(Math.atan2(yDiff,xDiff)*180/Math.PI);
        // these 2 lines change Flash CW rotation to Math-friendly CCW rotation
        // and also alter the negative 0-180 results of atan2
        if (rot>0) rot -= 360;
        rot *= -1;
    }
}

Your posted code with comments following:

onClipEvent (mouseMove) {
    x = this._xmouse;
    y = this._ymouse*-1;                    // 1
    angle = Math.atan(y/x)/(Math.PI/180);   // 2
    /*if (x<0) {                            // 3
        angle += 180;
    }
    if (x>=0 && y<0) {
        angle += 360;
    }*/
    this._rotation = angle*-1;
    updateAfterEvent();
}

1. ??? I'm not sure why you've used '*-1' here. The atan's x,y input is actually depicting a direction vector from the mc (0,0) to the mouse. Your scheme won't do this (see #2), and with the y at '*-1' could be wildly incorrect.

2. Notice in both my code and in your posted ragdoll fla's 'relax' method, the input to the angle function uses the difference from the mouse x and y to the clip x and y ... your code uses the actual mouse position rather than this difference, which will blow up each 'mouseMove'.

3. This commented code adjusts the atan results to account for which of the 4 quadrants the actual angle resides. The simplification in my code is due to the use of atan2, which only requires adjustment at -/+ 180 degrees, instead of atan's 4 x 90 degree complexity.

Your revised code:

onClipEvent (mouseMove) {
    x = _root._xmouse-this._x;
    y = _root._ymouse-this._y;                
    angle = Math.atan(y/x)/(Math.PI/180); 
    this._rotation = angle*-1;
    updateAfterEvent();
}

Notice, however, that both my atan2 clip code and your revised atan clip code function correctly without the sector hacks, since the new angle calculation only differs from the previous by a small amount, thus negating the need for the hacks. The hacks only come into play when angle measurements exceed the 90 degree boundaries for atan and 180 degrees for atan2.

Checkout my old F5 app dragLineAtan2 View | Source to compare the values for atan and atan2 ... it's a little hard to follow, but check the various field results while you drag one point around the other.

Richard

[OpethRockr55]

Hey, thanks, Dickee!
I only learned how to use atan, so that's what I use. There are a few things I need to clear up however.

1. The reason I used '*-1' was to set Flash's coordinate system, which is flipped on the x-axis, to the usual coordinate system:

(-X, Y) | (X, Y)
------------------
(-X, -Y)| (X, -Y)

I don't know if this was essentially necessary, but it sure helped me out when I began to model this ragdoll.

2. This code is a version of one of my early angle escapades that WAS mouse based. The _mousex and _mousey are replaced with each joint's connective partner. Let's take the hand to the elbow. The relax function INSIDE the hand calls up the coordinates of the joint it's connected to, the elbow, and uses those coordinates in place of the mouse coordinates.

3. That seems like a good idea with the atan2. I've never tried it and it should make things much easier for me.

So thanks for your input and hope that clears somethings up for both you and adit_ya.

[adit_ya_sharma]

Hey guys, thanks for everything. Iam finally beginning to see the matrix of this. I was reading a tut. on some site regarding the calculation of angles between a point and mouse co-ordinates. There the code was almost the same as you guys have done it, but in _y difference, it was written like this:-

yDiff =-1*( _root._ymouse-this._y);

and the explanation was that since the cartesian coordinate system in flash was opposite for y axis, we will find the negative of it to find the proper difference. Any comments on this please.

Edit: Here's the actual code from this link

code:

---

onClipEvent (mouseMove) {



adjside =_root. _xmouse-_root.origin._x;

oppside = -1*(_root._ymouse-_root.origin._y);



angle = Math.atan2(oppside, adjside); // in radians

angle = Math.round(angle/Math.PI*180); // convert to degrees

_root.compass._rotation = -1*(angle);



} 

---

[arv_aswasw]

Thanks guys. Actually Iam still in learning phase of AS 2.0 so that's kinda hard for me to understand. But I'll look back to this whenever I'll need it. thanks again Dickee!

Sorry for being late with the reply, my tooth has been aching from past few days :P

Edit: and also thanks for all the great links *reading*

[Creative Action]

Thanks Dickee. This really answers the question I had about calculating the angle between 0,0 and x,y.