sin 함수 애니메이션 (블로그 타이틀 01)

http://minsangk.com/22

글 들어가기 전에 블로그 관한 잡담 (열기)

하루 15시간씩 꼬박 앉아 블로그를 만들고 있다.
블로그가 삶의 기록이라면, 요즘 내 삶의 기록은 오로지 블로그 제작 과정이 전부일텐데, 하루 15시간씩 쓰다보니 도무지 포스팅 속도가 제작 속도를 못 따라 간다. 블로그에 자그마한 변화 하나라도 있을 때마다 글을 올려서 관련 포스트를 검색하는 것만으로 이 블로그가 어떻게 만들어졌는지 보여주고자 했었는데. 쉽지 않다. 이렇게 만들어 놓은걸 다음날은 철저하게 부수고 다시 두드리는 일도 심심찮게 있고. 이건 확정이야, 절대 안 바꿔- 이렇게 만들어 놓은 레이아웃도 몇일 지나면 사지를 분해해 재조립하기도 한다.

아무튼 그래서 'about블로그' 카테고리를 포기하고 'HelloWorld' 카테고리에 [minsangK.com] 접두어를 붙이기 시작했다. (사실 이거 고치는 것만 해도 완전 대공사였음, DB 접속해서 ID를 전부 다시 줄맞춰 수정하고 PHP 에서 Description 배열도 수정하고, 등등) 블로그에 관한 내용이 'HelloWorld'에 올라온다는 것은 이제 앞으로의 작업들이 대부분 코드와 스크립트로 점철되는 피곤한 작업이라는 뜻이기도-

타이틀에 들어간 플래시는 액션스크립트 2.0 으로 제작되었다. 메뉴를 플렉스로 만드느라 액션스크립트 3.0 을 머리 아프게 공부하고 있는 터라 그나마 만만하고 자신있는ㅠ 2.0으로 두드려보자- 라는 취지였지만 결과적으로 머리가 좀 아팠다. 플렉스에선 2.0 코드 두드리더니 플래시 가선 3.0 두드리고- 이러고 있다. 2.0은 XML을 불러오는 방식이 3.0과는 또 다르다. 레퍼런스(물론 한글 한글자도 안 들어간)를 뒤적거리며 어쨌든 기어코 완성을 시켰네.

하지만 스크립트의 포인트, 가장 중요한 부분은 Sin 함수를 이용한 눈송이 애니메이션-
이건 이미 예전에 한번 써먹었던 레퍼토리-_-라 두드리는데 큰 어려움은 없었다.
다른 점이 있다면 이건 그냥 수직하강 눈송이가 아니라 Sin 함수를 이용해 돌아간다는 점.

이전에 만든 눈송이 애니메이션

눈송이 구현 코드 (열기)

by AS 2.0

1. // 눈송이 갯수
2. amount_of_Circles = 30;
3.  
4. // 캔버스 사이즈
5. canvasWidth=900;
6. canvasHeight=100;
7.  
8. // 크기, 알파 설정 (최소/최대값)
9. minScale = 5;
10. maxScale = 10;
11. minAlpha = 20;
12. maxAlpha = 50;
13.  
14. // 눈송이 생성, 초기화
15. for(var i=0; i<amount_of_Circles; i++)
16. {
17.  this.attachMovie("circle","circle"+i,this.getNextHighestDepth());
18.  this.initCircle(this["circle"+i]);
19. }
20.  
21. // 눈송이 초기화 함수
22. function initCircle(_mc:MovieClip)
23. {
24.  mc = _mc;
25.  mc._x = random(_root.canvasWidth)-200;
26.  mc._y = random(_root.canvasHeight);
27.  mc._width = mc._height = random(_root.maxScale-_root.minScale) + _root.minScale;
28.  mc._alpha = random(_root.maxAlpha-_root.minAlpha) + _root.minAlpha;
29.  mc.xSpeed = random(3) + 1;
30. }
31.  
32. // 눈송이 위치 이동 (onEnterFrame)
33. this.onEnterFrame = function()
34. {
35.  for(i=0; i<amount_of_Circles; i++)
36.  {
37.   this["circle"+i]._x += this["circle"+i].xSpeed;
38.   this["circle"+i]._y += Math.sin(this["circle"+i]._x/50);
39.   //  this["circle"+i]._y = Math.sin(this["circle"+i]._x/30)*(canvasHeight/2)+canvasHeight/2;
40.  
41.   // 눈송이가 바깥으로 나갈 경우
42.   if ( this["circle"+i]._x > canvasWidth ) {
43.    initCircle(this["circle"+i]);
44.   }
45.  }
46. }

장황하게 써놨지만 실제로 중요한건 딱 두 줄이다. 이거-

(Language : javascript)

37. this["circle"+i]._x += this["circle"+i].xSpeed;
38. this["circle"+i]._y += Math.sin(this["circle"+i]._x/50);

x 값은 랜덤으로 지정된대로  오른쪽으로 달려간다.
y 값은 현재 x 값에 50을 나눠서 sin 함수에 넣고, 나온 결과값.
이해가 가지 않는다고? 음, 동감이야. 하지만 어렵게 이해하고 두드렸으니 잠깐 설명하자면-

일단 고등학교 수학시간으로 돌아가자. 그리 어려울 것도 없으니 겁먹지 말고.
sin( 0 ) 은 0 이고, sin( Math.PI / 2 ) 은 1 이다.
플래시의 sin 함수도 역시 라디안 값으로 동작하니까 고등학교 수학 시간하고 똑같이 생각하면 된다.
잠깐 여기서 90도(Math.PI/2) 가 넘어가면 어떻게 되는가? 그래프를 떠올려보자.

그렇다 정점을 친 값은 떨어진다, 그리고 270도가 되면 마이너스값으로 바닥을 친뒤 한바퀴를 돌면 다시 제자리로 온다.
여기서 우리가 원하는 값은 한 프레임당 움직여야 할 y 값-
아, 갑자기 머리가 아파온다. 이거 구하려면 미적분이 다 나와야 할 것 같은 분위기다.

하지만 중요한건 방향성이다. 굳이 값을 알아내서 뭐하겠다는거냐.
우리가 원하는건 단지 y 값이 x 값의 증가값에 따라 출렁거려주기만 하면 되는거니까.
x 값은 선형증가하고 있으니 단지 그 증가하고 있는 값을 적당한 숫자의 나누기를 통해 작은수로 줄여주는 것이다.


왜 이렇게 마구리스러운 방법을 썼냐면 나도 할 말이 있다.

 

위의 움직임은 아래와 같은 식으로 작성되었다. (나머지는 거의 비슷하다고 보면 된다)

(Language : javascript)

this["circle"+i]._y = Math.sin(this["circle"+i]._x/30)*(canvasHeight/2)+canvasHeight/2;

식이 좀 복잡해 보이지만 한가지 외엔 큰 차이가 없다. 바로
[ += 대신 = 이 사용되었다는것 ]
증가값을 조절하는게 아니라 _y 값을 직접 조정하는 것이다.

이 경우 진폭을 조절하긴 쉽다.
싸인함수 결과값은 어쩌니저쩌니 해도 결국 -1 부터 1 사이의 값이고, 여기에 50 을 곱하면 -50 부터 50 사이의 값이 된다. 여기에 다시 50을 더해주면 y 값은 0부터 100 까지의 범위를 넘지 않게 되는 것.

다만 위와 같이 너무도 정형화된, 이건 도무지 고등학교때 수학 선생님한테 얻어맞던 기억이 떠올라 등골이 싸해지는 애니메이션이 될 수 밖에 없는거다. 뭐, 여기서도 진폭과 x 의 시작 위치를 랜덤값으로 둘 경우 고등학교 수학 선생님이야 떠오르지 않겠지만, 현재 블로그의 타이틀처럼 도저히 싸인 곡선이라고는 믿을 수 없는 자연스러움을 구현하기엔 많은 애로사항이 꽃핀다.


블로그 타이틀 01 은 여기까지 끝내고, 다음은 02번-
플래시 액션스크립트 2.0 으로 구현하는 XML 로드다-