본문 바로가기

ActionScript/AS3.0

삼각함수와 플래시 - 1.원의 좌표

원과 타원의 좌표는 삼각함수를 이용하여 표현된다.
삼각함수에 대한 것은 고등학교에서 배웠을것이다.
요즘은 모르겠다. 중학생이나 초등학생도 삼각함수를 알고 있을지도 모르겠다.
중요한건 우리는 확실히 배웠다 (기보다는 귀로 들었다). 단지 뇌에 담겨있지 않을뿐


자세한 설명은 생략하고 플래시에서 써먹기 위한 내용만을 정리해보면
반지름이 R인 원에서 x축과 시계방향으로 T의 각도를 이루는 빨간점의 좌표 x,y는 아래와같다.

  x =  R*cosT
  y = R*sinT

T는 일반각(degree)이 아니라 호도각(radian) 이다.
일반각과 호도각과의 관계는 아래와 같다.

  호도각 = 일반각*PI/180
  일반각 = 호도각*180/PI


여기까지가 대부분의 평범한 사람에게서 고비가 된다.
그래서 이쯤에서 나에게도 고비가..

개념정리는 여기까지 하고 플래시의 세계로 넘어가자



첫번째 목표
임의의 객체들을 stage에 배치시킬때 원의 자취를 따르게 하고 싶다.




Step1 - 기초변수와 함수 설정



일단 기본적으로 다음과 같은 변수5개를 준비한다.

var _cx:Number;              //원의 중심이 되는 x좌표
var _cy:Number;             //원의 중심이 되는 y좌표
var _wRadius:Number;    //원의 가로 반지름
var _hRadius:Number      //원의 세로 반지름
var _radian:Number;       //라디안각


만약 원의 가로 세로 반지름이 같다면 정원의 형태가 되고 다르다면 타원이 되게 된다.

이러한 변수들을 바탕으로 위에서 알아본 삼각함수를 조금더 다듬어서
중심이(_cx,_cy) 이고 가로세로 반지름이 각각 _wRadius,_hRadius 인 원의 자취 x,y를
구하는 공식을 플래시의 Math클래스를 이용해 나타내면 아래와 같다.

x = cx + wRadius*Math.cos(_radian);
y = cy + hRadius*Math.sin(_radian);


여기까지의 내용을 바탕으로 하나의 함수를 만든다.

function getCirclePos(radian:Number,Radius:Number=100,hRadius:Number=100,cx:Number=0,cy:Number=0):Point {  
   var tx:Number = cx+wRadius*Math.cos(radian);
   var ty:Number = cy+hRadius*Math.sin(radian);
   return new Point(tx,ty);
}


기본값은 원점이 (0,0) 반지름이 100인 정원으로 설정했다.
자 이제 해당하는 원의 자취에서 라디안값에 해당하는 좌표를 Point 형태로 뱉어내는 함수를
가지게 되었다.



Step2 - 각 객체들의 호도각



만약 5개의 객체를 원의 자취에 따라 등간격으로 배치시킨다면 각 객체들은
원에 대하여 얼마만큼의 각을 가지게 될까?

제대로 형태를 이룬 원(혹은 타원)의 경우 원을 이루는 전체각이 360도 이므로
360/객체수를 하면 원에 대한 각객체들이 가지는 호도각을 구할수 있다.

그렇다면 그 호도각을 라디안으로 바꿔 위의 함수를 이용해 좌표를 리턴, 설정하면
원의 자취를 따르게된다.



Step3 - 객체들 배치



스테이지의 크기는 400 x 500
아래의 무비클립을 List라는 이름의 클래스로 설정
각 변수들을 통해 원의 자취를 따르도록 List클래스의 객체들을 배치시킨다.


텍스트필드를 통해 변수들의 값을 조정하여 버튼을 누르면 다시 배치된다.