{"id":186,"date":"2008-01-21T12:58:29","date_gmt":"2008-01-21T17:58:29","guid":{"rendered":"http:\/\/www.pixelwit.com\/blog\/2008\/01\/21\/swing-pendulum-arc\/"},"modified":"2009-08-14T17:54:05","modified_gmt":"2009-08-14T22:54:05","slug":"swing-pendulum-arc","status":"publish","type":"post","link":"https:\/\/www.pixelwit.com\/blog\/2008\/01\/21\/swing-pendulum-arc\/","title":{"rendered":"How to Swing a Pendulum Arc"},"content":{"rendered":"

\"\"<\/p>\n

In my previous article explaining How to Draw an Arc with ActionScript<\/a> a few readers asked how to simulate the swing of a pendulum or the swaying motion of a falling leaf. Hopefully this tutorial will add a little insight into that process. The technique I’ll be using won’t mimic the effects of gravity but will be more similar to the metered swing of a clock’s pendulum or a large carnival ride<\/a>.
\n
\nObservations<\/strong>: Before we start writing any code, let’s make a few general observations. If you were to swing a pendulum from right to left, you could note the following:<\/p>\n

    \n
  1. Once the pendulum is dropped or released, it begins to pick up speed as it approaches the bottom of its arc. This gradual acceleration is similar to “Easing In”.<\/li>\n
  2. Once the pendulum passes the bottom of its arc, it begins to swing upward and consequently slows down which is similar to “Easing Out”.<\/li>\n
  3. Once the pendulum reaches the top of its arc on the left, it begins to swing backwards from left to right. The swing from left to right is a mirror image of the previous swing from right to left.<\/li>\n<\/ol>\n

    Conventions<\/strong>: With those observations in mind we can start hammering out some conventions to simplify the writing of our Pendulum function. <\/p>\n

      \n
    1. When the pendulum is at the bottom of its arc it can be assumed to be at an angle of 0.<\/li>\n
    2. To swing the pendulum, we need to know how high to lift it, or if you want to get all fancy about it, we need to know its “Angle Of Inclination”. We’ll call this AOI.<\/li>\n
    3. Once you know the AOI, you can describe the pendulum’s position as being anywhere between -1 * AOI (full left raised position) to +1 * AOI (full right raised position).<\/li>\n
    4. There are many ways to describe angles but, because I’m a freak<\/a>, I like to use ratios between 0 and 1. Zero represents no rotation while 1 represents one full rotation or 360 degrees. An angle of 90 degrees would be described as .25 or similarly 90\/360<\/li>\n<\/ol>\n

      Deductions<\/strong>: With our observations and conventions in hand we can start visualizing what we will need to make everything “go”.<\/p>\n

        \n
      1. To swing from right to left we need to generate values from +1 to -1.<\/li>\n
      2. To swing from left to right we need to generate values from -1 to +1.<\/li>\n
      3. The values generated need to be eased. More<\/strong> easing when near -1 or +1. Less<\/strong> easing when near 0.<\/li>\n<\/ol>\n

        Achieving all of the above goals may seem like a fairly daunting task until you realize that this is a problem that you solve every time you draw a circle. In my How to Draw a Circle tutorial<\/a> I discussed a Magic Trig Function which just happens<\/em> to be the perfect mechanism for driving the “swing” of our pendulum. Let’s take a look at this Magic<\/em> function shall we? I think we shall…<\/p>\n

        \/\/<\/span>
        \n\/\/<\/span>
        \nfunction<\/span> magicTrigFunction (<\/span>pointRatio)<\/span>{<\/span>
        \n    return<\/span> Math<\/span>.cos<\/span>(<\/span>pointRatio*<\/span>2<\/span>*<\/span>Math<\/span>.PI<\/span>)<\/span>;
        \n}<\/span>
        \nfor<\/span>(<\/span>var<\/span> i=0<\/span>; i<<\/span>=22<\/span>; i++)<\/span>{<\/span>
        \n    \/\/ Input numbers between 0 and 1.<\/span>
        \n    var<\/span> ratio = i\/<\/span>22<\/span>;
        \n    \/\/ Output eased values between -1 an +1.<\/span>
        \n    trace<\/span>(<\/span>magicTrigFunction(<\/span>ratio)<\/span>)<\/span>;
        \n}<\/span>
        \n\/\/<\/span>
        \n\/\/<\/span><\/div><\/div>\n

        Running the above code will produce the following results:<\/p>\n

        1
        \n0.959492973614497
        \n0.841253532831181
        \n0.654860733945285
        \n0.415415013001886
        \n0.142314838273285
        \n-0.142314838273285
        \n-0.415415013001886
        \n-0.654860733945285
        \n-0.841253532831181
        \n-0.959492973614497
        \n-1
        \n-0.959492973614497
        \n-0.841253532831181
        \n-0.654860733945285
        \n-0.415415013001887
        \n-0.142314838273285
        \n0.142314838273285
        \n0.415415013001887
        \n0.654860733945285
        \n0.841253532831181
        \n0.959492973614497
        \n1<\/div><\/div>\n

        As you can see, the returned values go from +1 through 0 to -1 and then they reverse back through 0 to +1. That’s just what we need, and to put icing on the cake, the values are being eased the right way at the right time. Changes in values near 0 are large while changes near -1 and +1 are small. Perfect.<\/p>\n

        Arguments<\/strong>: Now that we understand the mechanism that will swing the pendulum, it’s time to think about the arguments we must give to our pendulum function. We’ll need a center for the pendulum to swing from, this will be noted with “centerX” and “centerY”. We’ll also need to know the distance of the pendulum form center, we’ll call this “radius”. Next we’ll need to know the maximum Angle Of Inclination (how far the pendulum swings), we’ll call this “aoi”. <\/p>\n

        The next argument we’ll need to provide is a “ratio of completion”. The position of the pendulum depends on the time it was set into motion so we must keep track of the amount of time that the pendulum has been swinging.<\/p>\n

          \n
        • Before you release the pendulum, it has a “completion ratio” of 0.<\/li>\n
        • After the pendulum is released, as it reaches the bottom of its swing it will have a completion ratio of .25.<\/li>\n
        • Once the pendulum reaches its maximum height on the opposite side it will have a completion ratio of .5.<\/li>\n
        • After reaching the opposite side, the pendulum swings back towards its starting position. As the pendulum reaches the bottom of this swing it will have a completion ratio of .75.<\/li>\n
        • When the pendulum swings all the way back to the height of its starting position, it can be said to have a completion ratio of 1.<\/li>\n<\/ul>\n

          Measuring this change in time is what will drive the pendulum animation.<\/p>\n

          So now we can see that the pendulum function will have the following arguments:<\/p>\n

          \/\/<\/span>
          \n\/\/<\/span>
          \nfunction<\/span> pendulum (<\/span>centerX, centerY, radius, aoi, completionRatio)<\/span>{<\/span>
          \n    \/\/Some Code.<\/span>
          \n}<\/span>
          \n\/\/<\/span>
          \n\/\/<\/span><\/div><\/div>\n

          Doin’ It<\/strong>: It has taken quite a while to get to this point, but now that we’ve done most of the mental grunt work (Observations, Conventions, Deductions, Arguments) writing the actual code will be pretty easy. You can follow along by reading the comments.<\/p>\n

          \/\/<\/span>
          \n\/\/<\/span>
          \n\/\/<\/span>
          \n\/\/ Initial variables.<\/span>
          \nvar<\/span> pendX = 250<\/span>;
          \nvar<\/span> pendY = 250<\/span>;
          \nvar<\/span> pendRadius = 200<\/span>;
          \nvar<\/span> pendArc = 135<\/span>\/<\/span>360<\/span>;
          \nvar<\/span> pendSpeed = .005;
          \nvar<\/span> pendCount = 0<\/span>;
          \n\/\/<\/span>
          \n\/\/<\/span>
          \n\/\/<\/span>
          \n\/\/ Make a red footbal-shaped clip.<\/span>
          \ncreateEmptyMovieClip<\/span>(<\/span>"Pendu"<\/span>, 10<\/span>)<\/span>;
          \nwith<\/span>(<\/span>Pendu)<\/span>{<\/span>
          \n    beginFill<\/span>(<\/span>0xFF0000)<\/span>;
          \n    moveTo<\/span>(<\/span>-20<\/span>, 0<\/span>)<\/span>;
          \n    curveTo<\/span>(<\/span>0<\/span>, 15<\/span>, 20<\/span>, 0<\/span>)<\/span>;
          \n    curveTo<\/span>(<\/span>0<\/span>, -15<\/span>, -20<\/span>, 0<\/span>)<\/span>;
          \n}<\/span>
          \n\/\/<\/span>
          \n\/\/ Make a clip in which to draw the stick holding the pendulum.<\/span>
          \ncreateEmptyMovieClip<\/span>(<\/span>"Stick"<\/span>, 5<\/span>)<\/span>;
          \n\/\/<\/span>
          \n\/\/<\/span>
          \n\/\/<\/span>
          \n\/\/ Swing a point on an eased arc with the given properties.<\/span>
          \nfunction<\/span> pendulum (<\/span>centerX, centerY, radius, aoi, completionRatio)<\/span>{<\/span>
          \n    \/\/<\/span>
          \n    \/\/ Use magic trig function to turn linear values between 0<\/span>
          \n    \/\/ and 1 to eased values between -1 and +1.<\/span>
          \n    var<\/span> easedOneToNegOne = Math<\/span>.cos<\/span>(<\/span>completionRatio*<\/span>2<\/span>*<\/span>Math<\/span>.PI<\/span>)<\/span>;
          \n    \/\/<\/span>
          \n    \/\/ Convert "Angle Of Inclination" from a ratio between 0<\/span>
          \n    \/\/ and 1 to radians.<\/span>
          \n    var<\/span> aoiRadians = aoi *<\/span> 2<\/span> *<\/span> Math<\/span>.PI<\/span>;
          \n    \/\/<\/span>
          \n    \/\/ Determine eased rotation of the pendulum in radians.<\/span>
          \n    \/\/ Derived from #3 in the above "Conventions" section.<\/span>
          \n    var<\/span> currentRotation = easedOneToNegOne *<\/span> aoiRadians;
          \n    \/\/<\/span>
          \n    \/\/ Get X and Y coordinates of pendulum at eased angle of rotation.<\/span>
          \n    var<\/span> x = centerX + Math<\/span>.sin<\/span>(<\/span>currentRotation)<\/span> *<\/span> radius;
          \n    var<\/span> y = centerY + Math<\/span>.cos<\/span>(<\/span>currentRotation)<\/span> *<\/span> radius;
          \n    \/\/<\/span>
          \n    \/\/ Return both X and Y coordinates inside a single 'point' object.<\/span>
          \n    return<\/span> {<\/span>x:x, y:y}<\/span>;
          \n}<\/span>
          \n\/\/<\/span>
          \n\/\/<\/span>
          \n\/\/<\/span>
          \n\/\/ Advance the pendulum to its next position.<\/span>
          \nfunction<\/span> swingPendulum (<\/span>)<\/span>{<\/span>
          \n    \/\/<\/span>
          \n    \/\/ Increment the clock counter.<\/span>
          \n    pendCount += pendSpeed;
          \n    pendCount %<\/span>= 1<\/span>;
          \n    \/\/<\/span>
          \n    \/\/ Get the pendulum's new coordinates.<\/span>
          \n    var<\/span> point = pendulum (<\/span>pendX, pendY, pendRadius, pendArc, pendCount)<\/span>;
          \n    \/\/<\/span>
          \n    \/\/ Place the pendulum at its new coordinates.<\/span>
          \n    Pendu._x<\/span> = point.x<\/span>;
          \n    Pendu._y<\/span> = point.y<\/span>;
          \n    \/\/<\/span>
          \n    \/\/ Draw a line from the center to the pendulum.<\/span>
          \n    with<\/span> (<\/span>Stick)<\/span>{<\/span>
          \n        clear<\/span>(<\/span>)<\/span>;
          \n        lineStyle<\/span>(<\/span>2<\/span>, 0<\/span>)<\/span>;
          \n        moveTo<\/span>(<\/span>pendX, pendY)<\/span>;
          \n        lineTo<\/span>(<\/span>point.x<\/span>, point.y<\/span>)<\/span>;
          \n    }<\/span>
          \n}<\/span>
          \n\/\/<\/span>
          \n\/\/ Keep Swinging the pendulum every time we enter a frame.<\/span>
          \nonEnterFrame<\/span> = swingPendulum;
          \n\/\/<\/span>
          \n\/\/<\/span>
          \n\/\/<\/span>
          \n\/\/<\/span><\/div><\/div>\n

          The above code will produce the following SWF:<\/p>\n\n\n\t\n\t\n\t\n\t\n\t\t\n\t\n\t<\/object>\n\t\n<\/object>\n

          And so it goes. One pendulum swinging in an arc.<\/p>\n","protected":false},"excerpt":{"rendered":"

          A detailed Flash tutorial explaining one way to simulate the swing of a pendulum with ActionScript and the thought process involved in its creation.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[8],"tags":[23,45,36,37],"class_list":["post-186","post","type-post","status-publish","format-standard","hentry","category-flash","tag-actionscript","tag-draw","tag-swfs","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/comments?post=186"}],"version-history":[{"count":0,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/posts\/186\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/media?parent=186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/categories?post=186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixelwit.com\/blog\/wp-json\/wp\/v2\/tags?post=186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}