ActionScript3 : ต้องการเปลี่ยนตำแหน่งของวัตถุเชิงมุมแบบต่าง ๆ เช่น การแกว่ง (oscillation), การหมุน (Rotation) ฯล

แนวคิด / แนวทาง  :  เราจะทดลองประยุกต์การใช้งาน Math.sin() และ Math,cos() เพื่อทำให้เกิดการเคลื่อนที่เชิงมุมแบบต่าง ๆ
วิธีการ / ขั้นตอน : หากเราทดสอบการเปลี่ยนค่าของ Math,cos(radian) หรือ Math,sin(radian) โดยการเพิ่มค่าของ radian ขึ้นครั้งละ 1 ไปเรื่อย ๆ เราจะพบว่า Math,sin(radian) และ Math,cos(radian) จะมีค่าวนไปมาระหว่าง -1 ถึง 1 เท่่านั้น จากคุณสมบัตินี้เราสามารถนำมาประยุกต์ใช้กับการเคลื่อนที่ที่มีลักษณะแบบวนไปมาได้ เช่น การแกว่ง การเคลื่อนที่เป็นวงกลม การเคลื่อนที่เป็นวงรี  การหมุนรอบแก่น การเคลื่อนที่แบบลูกคลื่น เป็นต้น

ตัวอย่างที่ 1 การเคลื่อนที่แบบ sine wave
                                                     
package{
    import flash.display.Sprite;
    import flash.events.Event;
          import flash.events.TimerEvent;
          import flash.utils.Timer;

   public class SineWaveMoving extends Sprite{
                       private var _xRadius:Number = 100; /**** ****/
                       private var _angle:Number=45; /**** degree ****/
                       private var _yRadius:Number=150;
                       private var _speed:Number=10;

               public function SineWaveMoving(){
                       this.drawMe();
                       this.setPosition(0,400);
                       var timer:Timer  = new Timer(50,0);
                       timer.addEventListener("timer",moveMe);
                       timer.start();
               }
              public function setPosition(x:Number,y:Number):void{
                      this.x=x;
                      this.y=y;
              }

              private function drawMe():void{
                     /**** to draw a red circle with 50 pixels radias ****/
                         this.graphics.beginFill(0xFF0000,200);
                         this.graphics.drawCircle(0,0,10);
                         this.graphics.endFill();
              }

             private function moveMe(e:TimerEvent):void{
                 this.y=200+Math.sin(_angle)*_xRadius;
                 this.x+=_speed;
                 this._angle+=0.5;
             }
   }
}

ตัวอย่างนี้เราทำให้การเคลื่อนที่ในแนวแกน x (ระนาบ) เป็นแบบเส้นตรงด้วย

this,x+= _speed;

และทำให้การเคลื่อนที่แนวแกน y (แนวดิ่ง) เปลียนในรูปแบบ sine wave ด้วย

this.y=200+Math.sin(_angle)*_yRadius;

เมื่อ _yRadius เป็นค่าความสูงของ Wave



Demo : http://wonderfl.net/c/piB8

flash on 2011-4-2 - wonderfl build flash online

ตัวอย่างที่ 2 การเคลื่อนที่แบบสั่น (Oscillation)

package{
    import flash.display.Sprite;
    import flash.events.Event;
         import flash.events.TimerEvent;
         import flash.utils.Timer;

  public class OscillationMoving extends Sprite{
                      private var _xRadius:Number = 100; /**** ****/
                      private var _angle:Number=45; /**** degree ****/
                      private var _yRadius:Number=150;
                      private var _speed:Number=10;

              public function OscillationMoving(){
                      this.drawMe();
                      this.setPosition(0,400);
                      var timer:Timer  = new Timer(50,0);
                      timer.addEventListener("timer",moveMe);
                      timer.start();
              }
             public function setPosition(x:Number,y:Number):void{
                     this.x=x;
                     this.y=y;
             }

             private function drawMe():void{
                    /**** to draw a red circle with 50 pixels radias ****/
                        this.graphics.beginFill(0xFF0000,200);
                        this.graphics.drawCircle(0,0,10);
                        this.graphics.endFill();
             }

            private function moveMe(e:TimerEvent):void{
                    this.x=200+Math.cos(_angle)*_xRadius;
                                 this._angle+=0.5;
            }
  }
}

Demo : 

flash on 2011-4-2 - wonderfl build flash online

ตัวอย่างที่ 3  การเคลื่อนที่แบบแบบวงกลมหรือวงรี ในตัวอย่างนี้จะไม่ได้ใช้สมการวงกลมหรือวงรีตามหลักของ trigonometry แต่จะใช้การกำหนดค่าการเคลื่อนที่เชิงมุมของ x และ y ไปพร้อมกัน โดยให้การเปลี่ยนค่าของ x ขึ้นกับค่า Math.cos(radian) และการเปลี่ยนแปลงค่าของ y ขึ้นกับ Math.sin(radian)

package{
    import flash.display.Sprite;
    import flash.events.Event;
         import flash.events.TimerEvent;
         import flash.utils.Timer;

  public class CircularMoving extends Sprite{
                      private var _xRadius:Number = 100; /**** ****/
                      private var _angle:Number=45; /**** degree ****/
                      private var _yRadius:Number=150;
                      private var _speed:Number=10;

              public function CircularMoving(){
                      this.drawMe();
                      this.setPosition(0,400);
                      var timer:Timer  = new Timer(50,0);
                      timer.addEventListener("timer",moveMe);
                      timer.start();
              }
             public function setPosition(x:Number,y:Number):void{
                     this.x=x;
                     this.y=y;
             }

             private function drawMe():void{
                    /**** to draw a red circle with 50 pixels radias ****/
                        this.graphics.beginFill(0xFF0000,200);
                        this.graphics.drawCircle(0,0,10);
                        this.graphics.endFill();
             }

            private function moveMe(e:TimerEvent):void{
                    this.x=200+Math.cos(_angle)*_xRadius;
                      this.y=200+Math.sin(_angle)* _yRadius;
                                 this._angle+=0.5;
            }
  }
}

Demo :

flash on 2011-4-2 - wonderfl build flash online

ระดับความยาก : 3


เอกสารอ้างอิง : 1 http://en.wikipedia.org/wiki/Trigonometric_functions