dcsimg
A Flash Developer Resource Site

Results 1 to 9 of 9

Thread: Everything related to angles in flash

  1. #1
    doItLikeThis
    Join Date
    Jan 2004
    Location
    :noitacoL
    Posts
    1,080

    Everything related to angles in flash

    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!
    -Aditya

  2. #2
    Senior Member
    Join Date
    Mar 2000
    Posts
    472
    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
    Last edited by Dickee; 09-26-2005 at 02:56 AM.

  3. #3
    Iron Chef In-Training OpethRockr55's Avatar
    Join Date
    Sep 2005
    Location
    Kitchen Stadium
    Posts
    313
    That's great and all, but all you need is this:

    Code:
    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.
    Attached Files Attached Files
    Last edited by OpethRockr55; 09-28-2005 at 05:35 AM.

  4. #4
    doItLikeThis
    Join Date
    Jan 2004
    Location
    :noitacoL
    Posts
    1,080
    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*
    Last edited by adit_ya_sharma; 09-30-2005 at 10:23 AM.
    -Aditya

  5. #5
    Senior Member
    Join Date
    Mar 2000
    Posts
    472
    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:

    Code:
    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:

    Code:
    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:

    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
    Last edited by Dickee; 09-30-2005 at 03:25 PM.

  6. #6
    Iron Chef In-Training OpethRockr55's Avatar
    Join Date
    Sep 2005
    Location
    Kitchen Stadium
    Posts
    313
    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.
    Last edited by OpethRockr55; 09-30-2005 at 03:48 PM.

  7. #7
    doItLikeThis
    Join Date
    Jan 2004
    Location
    :noitacoL
    Posts
    1,080
    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);

    }

    Last edited by adit_ya_sharma; 10-12-2005 at 02:48 AM.
    -Aditya

  8. #8
    Junior Member
    Join Date
    Oct 2007
    Location
    Delhi
    Posts
    1

    arvind

    Quote Originally Posted by 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*

  9. #9
    Member
    Join Date
    Oct 2005
    Location
    Santa Barbara, California, USA
    Posts
    61
    Thanks Dickee. This really answers the question I had about calculating the angle between 0,0 and x,y.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center