제9강 삼각함수를 활용한 원운동

1. 학습목표    ① 삼각함수를 활용하여 단진동을 구현할 수 있다.    ② 삼각함수를 활용하여 원운동을 구현할 수 있다.   지난 강좌에서 배운 내용 복습하기   1. 대포와 포탄 무비클립을 만들고 각각의 인스턴스 이름을 정한다. 2. 레이어를 하나 더 추가한 후 첫번째 프레임에 다음과 같은 액션을 입력한다. ok = 0;      v = 0;       a = 0.3;     angle = 0;        theta = 0; vx = 0;      vy = 0;    _root.bomb._x = _root.cannon._x;  _root.bomb._y = _root.cannon._y;  function go() {                              if (Key.isDown(Key.UP)) {            angle += 5;            _root.cannon._rotation = angle;              theta = angle * 2 * Math.PI / 360;         } else if (Key.isDown(Key.DOWN)) {       angle -= 5;            _root.cannon._rotation = angle;       theta = angle * 2 * Math.PI / 360;    } else if (Key.isDown(Key.SPACE)) {       v += 5;                                 _root.rect._width = v;          }    if(ok){                                 _root.bomb._x += vx;            vy += a;       _root.bomb._y += -vy;         } } setInterval(go, 25); _root.cannon.onMouseDown = function() {    vx = v*Math.cos(theta);       vy = v*Math.sin(theta);        ok = 1; }     2. 단진동(삼각함수를 활용하여 단진동을 구현할 수 있다.)   @ 단진동이란?   #일정한 경로를 주기적으로 반복하는 운동   #대표적인 단진동 : 그네의 흔들림, 용수철에 물체를 매달고 물체를 잡아당겼을 때의 운동                            물속에 나무 도막을 넣고 나무 도막을 눌렀을 때 나무 도막의 운동   일단 다음의 액션을 보면서 구체적으로 설명하겠습니다. angle = 0; theta = 0; function go() {   angle += 4;            //0.025초 간격으로 각도를 4도씩 증가시킴   theta = angle*2*Math.PI/360;  //각도를 라디안 단위로 환산시킴             _root.ball._y=100+90*Math.sin(theta); //100인 지점을 중심으로 단진동 } setInterval(go, 25);   위 아래로 왔다 갔다(진동)하는 모습이 꼭 용수철에 물체를 매달고 물체를 잡아당겼을 때의 운동과 같지 않나요? ^^   아래의 플래쉬 화면을 마우스로 클릭하고 있으면 각도가 점점 커지면서 원운동합니다. 이 때의 sin값을 보면 처음에 0에서부터 시작해서 커졌다가 작아지는 운동을 반복하는 것을 확인할 수 있습니다. 한편 cos값은 각도가 0일 때 가장 큰 값(1)을 가지고 각도가 커질 수록 작아졌다가 커지는 것을 확인할 수 있습니다.   3. 단진동(삼각함수를 활용하여 원운동을 구현할 수 있다.)   사전 팁 :  액션스크립트로 무비클립 삽입하기   # 지금까지는 무비클립 만들어 장면1로 나온다음 Ctrl+L로 라이브러리창을 띄운 다음 해당 무비클립을 드래그하여 장면1의 바탕화면에 붙여 넣는 방법을 사용하였습니다. 이제는 좀 더 액션적인 방법을 배워보도록 하겠습니다.     1. 무비클립을 만들고 장면1을 클릭하여 무비클립 편집창에서 나온 후 Ctrl+L을 눌러 라이브러     리 창을 띄운다. 2. 무비클립을 바탕화면으로 드래그하여 붙여 넣지 말고 라이브러리 창에서 무비클립을 마우스     오른쪽 버튼으로 클릭하면 여러가지 메뉴가 뜨는데 그 중에 "링크"(2-1)를 선택한다. 3. 링크 속성 창이 뜨면 "ActionScript에 내 보내기"를 선택하면 무비클립의 이름이 식별자(3-1)     에 나타난다. (한글도 잘 먹히더군요. ^^) 4. 확인을 눌러 링크 속성 창을 닫고 첫번째 프레임(4)에 다음과 같은 액션을 쳐 넣는다. _root.attachMovie("ball", "ball", 1); //첫번째 ball은 링크 속성창에서 쓴 식별자이고  //두번째 쓴 ball은 바탕화면에 붙여질 무비클립의 인스턴스 이름입니다. //세번째로 써진 1은 깊이를 말하는 것으로... 1보다는 2가 위에 놓이게 됩니다. _root.ball._x = 100; _root.ball._y = 100;   5. Ctrl+L로 확인해 보면 좌표가 (100,100)인 위치에 무비클립이 붙여진 것을 확인할 수 있다.     단진동하는 모습을 x,y에 모두 적용시키면 아주 쉽게 구현할 수 있습니다. angle = 0; theta = 0; _root.attachMovie("ball", "ball", 1);    //ball이라는 무비클립을 붙여 넣음 function go() {   angle += 4;               theta = angle*2*Math.PI/360;     _root.ball._x=100+90*Math.cos(theta);  //무슨 뜻일까요? ^^   _root.ball._y=100+90*Math.sin(theta); } setInterval(go, 25);   sin(theta), cos(theta) 값은 언제나 -1에서 1의 값을 갖습니다. 90*Math.cos(theta)하게 되면 -90에서 +90의 값을 가질 수 있다는 뜻이죠. 따라서 100+90*Math.cos(theta)하게 되면 10에서부터 190까지의 값을 가지게 됩니다. 이는 100인 지점을 중심으로 반지름이 90인 운동을 한다는 뜻입니다.   이러한 개념으로 위의 코드를 직관적으로 바꾸면 다음과 같습니다. angle = 0; theta = 0; cx = 100;    //center의 x좌표값이라는 뜻을 줄여 썼습니다. cy = 100;    //center의 y좌표값이라는 뜻이겠죠? ^^ r = 90:       //반지름을 뜻하는 radius의 첫자를 땄습니다. _root.attachMovie("ball", "ball", 1);     function go() {   angle += 4;               theta = angle*2*Math.PI/360;     _root.ball._x=cx + r*Math.cos(theta);     _root.ball._y=cy + r*Math.sin(theta); } setInterval(go, 25);     각도가 0부터 시작하므로 cos(theta)는 1부터 시작해서 각도가 커질 수록 cos(theta)값은 작아지게 됩니다. 그래서 x좌표는 190부터 시작해서 그 값이 작아졌다가 커졌다를 반복하게 되는 것입니다.   한편 sin(theta)는 각도가 0일 때 그 값이 0이 되고 각도가 커질 수록 sin(theta)값은 커지므로 y좌표는 100부터 시작해서 그 값이 커졌다가 작아졌다가를 반복하죠. 이 둘의 합이 바로 원운동인 것입니다.   4. 과제(삼각함수를 활용할 수 있다.)   1. 원의 반지름이 작았다가 점점 커지거나 점점 작아지게 할려면 어떻게 해야할까? (힌트 : r) 2. 회전 속력이 점점 빨라지게 하려면 어떻게 해야할까? (힌트 : angle) 3. 회전 반지름이 작아지면서 회전 속력은 증가하고 점점 뿌옇게 흐려지게 하려면? ^^ 4. 옆으로 약간 넓게 찌그러진 원(타원) 모양으로 돌게 하려면 어떻게 해야할까? (힌트 : r)   # 당분간 강좌는 쉴려고 합니다. 아내가 여기에 너무 푹 빠져 산다고 해서... ^^ 제 홈페이지 내용도 좀 업데이트 하고... 논문도 쓰고... 해야겠네요. 딸래미하고도 놀아주고... 요것이 "아빠"하고 불러주면 "엄마"하면서 반항하는게 심상치 않아요...