[ch 1] 사인 (Math.sin) 완벽히 이해하기 예제

본내용은 "플래시 액션스크립트 3 애니메이션 " 에서 인용한 내용입니다 더욱 자세한 내용은 책을 참고 바랍니다

너무 답답해서 다시 한번 되새김질 할려고 자다가 일어났네요 ;;

이놈의 멍청한 머리 ;;;


1. 사인 ( Math.sin 각도 )

0의 사인은 0 이며
90도 즉 파이 / 2 라디안의 사인은 1 입니다
180 도 즉 파이 라디안은 0
270 도 즉 3/2파이의 사인은 -1
360 도 즉 2파이 의 사인은 0 으로 돌아옵니다

자세한 내용은 책을 참고 바랍니다

플래시에서는 y 축이 반전되기 때문에 사인곡선이 상하고 그려집니다


앞 에제에서 봤떤 왔다갔다 하는 상하 모션으로 생각하자면

뭔가 물체를 왔다 갔따 하기 위해서 연산처리가 필요할때 사용한다고 생각하면 좀 도움이 되었습니다

하지만 cos 도 역시 같은 반응을 보이지만 약간 다릅니다

아래 예제는

변수 angle 이 0 으로 시작해서 0.1 씩 증가 합니다 그럼으로서 나오는 결과물은 angle 의 사인값을 출력하고 있습니다





2. 박동 모션

중심점 과 범위 스피드값으로 움직임을 나타내고 있습니다

package
{
	import flash.display.Sprite;
	import flash.events.Event;

	/**
	 * 사인 ( sin ) 에 대한 예제 심장박동
	 * @author Hazbola
	 * 
	 */	
	public class SinPulseExample extends Sprite
	{
		static private var angle: Number = 0; // 
		static private var centerScale: Number = 2; // 
		static private var range: Number = .5; // 범위설정
		static private var speed: Number = .2; // 스피드 설정
		
		public function SinPulseExample()
		{
			init();
		}
		
		private var ball: Ball;
		private function init(): void
		{
			this.ball = new Ball( 10 );
			this.addChild( ball );
			
			this.ball.x = stage.stageWidth / 2;
			this.ball.y = stage.stageHeight / 2;
			
			this.addEventListener( Event.ENTER_FRAME, enterEH );
		}
		
		private function enterEH ( e: Event ): void
		{
			this.ball.scaleX = this.ball.scaleY = centerScale + Math.sin( angle ) * range;
			angle += speed;
		}
	}
}

3. 2개의 각도를 가진 물체

한 물체가 2개의 각도를 가지고 서로 각각 다른 스피드값을 설정해

마치 방안에서 벌레가 움직이는 효과를 보일수 있습니다

미리 결정된 수학적인 동작이지만 랜덤하게 움직이는것 같이 보입니다

package
{
	import flash.display.Sprite;
	import flash.events.Event;

	/**
	 * 사인 ( sin ) 에  대한 예제 2개의 각도를 가진 물체  
	 * @author Hazbola
	 * 
	 */	
	public class SinRandomExample extends Sprite
	{
		
		
		public function SinRandomExample()
		{
			init();
		}
		
		private var ball: Ball;
		private function init(): void
		{
			this.ball = new Ball( 10 );
			this.addChild( ball );
			
			this.ball.x = stage.stageWidth / 2;
			this.ball.y = stage.stageHeight / 2;
			
			this.addEventListener( Event.ENTER_FRAME, enterEH );
		}
		
		private var angleX: Number = 0;
		private var angleY: Number = 0;
		
		private var centerX: Number = 200; // Y 중간 범위	
		private var centerY: Number = 200; // X 중간 범위	
		
		private var range: Number = 50; // 움직일 거리
		
		private var speedX: Number = .07; // X 스피드 설정
		private var speedY: Number = .11; // Y 스피드 설정
				
		private function enterEH ( e: Event ): void
		{
			this.ball.x = centerX + Math.sin( angleX ) * range;
			this.ball.y = centerY + Math.sin( angleY ) * range;
			
			this.angleX += speedX;
			this.angleY += speedY;
			
		}
	}
}

4. 드로잉 api 를 사용한 곡선

이걸 보시면 좀더 잼있은 움직임을 볼수 있습니다

package
{
	import flash.display.Shape;
	import flash.display.Sprite;
	import flash.events.Event;
	
	/**
	 * 드로잉 API 를 사용한 곡선 
	 * @author Hazbola
	 * 
	 */	
	public class SinTwoLineExample extends Sprite
	{
	
		public function SinTwoLineExample()
		{
			init();
		}
		
		private var posX: Number; //X 위치 설정
		private var posY: Number; // Y 위치 설정
		
		private var line: Shape;
		private function init(): void
		{
			this.posX = 0;
			
			this.line = new Shape();
			this.line.graphics.lineStyle( 1, 0xff3399 );
			this.line.graphics.moveTo( 0, centerY );
			this.addChild( line );
			
			this.addEventListener( Event.ENTER_FRAME, enterEH );
			
		}
		
		private var angle: Number = 0;
		private var centerY: Number = 200; // X 중간 범위			
		private var range: Number = 50; // 움직일 거리		
		private var speedX: Number = 1; // X 스피드 설정
		private var speedY: Number = .05; // Y 스피드 설정
		
		private function enterEH ( e: Event ): void
		{
			this.posX += speedX;
			this.angle += speedY;
			
			this.posY = centerY + Math.sin( angle ) * range;
			this.line.graphics.lineTo( posX, posY );
		}
	}
}