플래시 속에 감춰진 수학, CurveTo의 비밀

출처 : http://physics.snu.ac.kr/~kclee/lects/lect02/lect02.htm#%C7%A5%C1%F6%20%C2%F7%B7%CA

Computing 이란 수학과 물리의 바탕 위에 세워진 기술이다.  그럼에도 불구하고 그것이 잘 보이지 않는 것은 그 바탕을 꼭꼭 숨겨 놓았기 때문이다.  수학이나 물리에 거부감을 느끼거나 두려움을 갖는 사람들을 안심시키기 위해서 꼭꼭 감추어 놓았기 때문이다.  플래시만 해도 그렇다.  그 바탕은 물리와 수학이다. 이 글에서는 이 숨겨진 수학 하나를 끄집어 내어 살펴 보기로 한다.  

왜 은밀한 곳에 숨겨 놓은 것을 들춰 내려고 하느냐고 힐난하는 이가 있을 지 모른다.  왜 수학을 하느냐고 반문할 지도 모른다.   수학 없이도 잘 해 왔는데 하고서 말이다.  그러나 나는 감히 말한다.  우리가 일류로 남느냐 아류로 만족하느냐는 수학을 하고 안하느냐에 달렸다고.  

우리가 인터넷 강국이니 어쩌니 해도 모든 원천 기술은 미국회사들이 갖고 있다.  고작 보세가공의 수준의 제품을 만들고 있을 뿐이다.   플래시 속에 감춰진 수학을 들춰 보는 것은 아류를 넘어 일류로 가기 위한 준비를 위해 서이다.  

Flash MX Actionscript 에는 스크립트만으로 무비를 만들 수 있게 해 놓았다. 그중에서도 그림도구(Drawing tool)의 핵심은 Movieclip 의 method 인 moveTo, liineTo, curveTo 라 할 수 있을 것이다.

curveTo 의 용법은 아래와 같이 2 차원상의 두 점을 인자로 받는다.  즉

MovieClip.curveTo ( x1, y1, x2, y2 )

첫 번째 인자 ( x1, y1)는 control point 라는 점의 좌표이고 두 번째 점 ( x2, y2 )은 anchor point  또는 끝점(end point)의 좌표이다.  이 곡선의 시작점은 현재 위치  current draw position 즉 curveTo 이전에 MovieClip.moveTo ( x0, y0 ) 또는 MovieClip.lineTo ( x0, y0 ) 에 의하여 와 있는 점 (x0, y0) 이다.

Array

그렇다면 이 곡선은 어떻게 그려지나?

매뉴얼에 보면 시작점에서 control point 에 이어진 직선은 이 곡선의 시작점의 접선이고 끝점 anchor point 와 control point를 잇는 직선도 이 곡선의 anchor point 에서의 접선이라고 되어 있다. 그리고 고작 시작점이나 끝점에서 control point 까지의 거리는 곡선의 곡률을 결정한다 고만 말하고 있다.  비수학적 표현이다.   이는 수학을 감추기 위하여 일부러 그렇게 쓴 것일지 모른다.   그러나 위에 열거한 그리기 도구만 가지고 그림을 그리려면 곡선의 정확한 정의를 알아야 할 것이다.  그래야 정교한 그림을 그릴 수 있다.  

여기에 수학이 숨어 있다.  

나도 사실 곡선의 정확한 정의를 몰랐다.  그래서 조금 리버스 엔지니어링(reverse engineering)*을 해 보았다.  

내가 정년 퇴임하면서 책상 설합을 정리하다가 발견하고 쓰레기통에 버리고 온 것 중에 프렌치 커브자 한 쌍이 있었다.(이 글을 읽는 대부분의 독자는 본 일이 없을 것이다)   삼각자와 마찬가지로 플라스틱으로 만든 잔데 마치 구름을 연상케 하는 다양한 곡률을 갖는 곡선이 연속으로 이어진 자다.  제도를 할 때 두 점을 잇는 매끈한 곡선을 그리기 위해서 썼던 자다.   컴퓨터가 발달하면서 제도도 종이에 그리지 않고 컴퓨터를 사용하게 되어(CAD) 그 용도가 없어진 것이다.  그렇다면 프레치자를 대신한 컴퓨터기법은 무엇인가?

Computer Graphics를 해 본 사람은 B?zier 라는 프랑스 수학자의 이름을 들어 보았을 것이다.  그는 프렌치 자를 대신하는 곡선을 컴퓨터에서 그리는 기법을 개발하였다. B?zier 는 1960 년대 프랑스의 Renault 자동차 회사의 설계 팀에서 일했는데 이 기법은 거기에서 자동차의 모양을 디자인하기 위해 서 개발된 것이다.  일반적으로   B?zier 곡선은 control point 가 두 개의 경우가 보통 인데 (Postscript 같은 데에) 한 개의 경우가 가장 간단하다. 그 곡선은 다음과 같은 식으로 정의된다.  아래에서는 맺음변수 (parameter) 로서  0 에서 1로 증가하면서 바뀐다.  즉 시작점에서 Array값은 0 이고 끝점에서 Array값은 1 이다.  그에 따라 곡선상의 1 점의 자리표 

Array

는 다음과 같이 계산해서 얻는다.  

Array  Array Array

그렇다면 Flash MX 의 curveTo 는 과연 이 식을 따라 그렸을까 아래와 같은 Script를 써서 시험해 보았다.

1.        mc.lineStyle(1, 0x00000); // line Style을 굵기 1 에 흰색으로 잡는다.
2.        mc.moveTo(h1._x, h1._y);  // 시작점으로 current position을 옮긴다.
3. // 위의 식에 따라 곡선을 50 개의 점으로 된 점선으로 그린다.
4.     for ( var i = 0; i <100; i++)
5.            {  x = h1._x *(1 - i/100)*(1 - i/100) + ctl._x* 2*i/100*(1 - i/100) + h2._x* i/100* i/100;
6.            y = h1._y *(1 - i/100)*(1 - i/100) + ctl._y* 2*i/100*(1 - i/100) + h2._y* i/100* i/100;
7.           if (i%2 == 0)
8.           mc.lineTo(x,y);
9.           else
10.           mc.moveTo(x, y);
11.                   }

전체 스크립트의 소스 파일 (CurvetoMod.fla)는 여기를 클릭해서 내려 받을 수 있습니다.

아래 그림(flash 그림)에서  control point 의 핸들을 마우스로 끌어 당겨 보세요.  시작점과 끝점도 움직일 수 있어요.

굵고 흰 선은  curveTo 곡선이고 그 위에 가는 검은 점선은 위에서 정의한 B?zier 곡선이에요.

시작점, control point, 끝점을 마우스로 잡아서 끌어 당겨 보세요 두 곡선은 함께 다니지요 ?

내 reverse engineering 이 맞았네요!

연습 문제

1.  curveTo를 가지고 가장 효율적으로 원을 그리는 방법을 생각해 보세요.

2.  타원은 어떻게 하면 될까요?

3.  control point 가 두개의 경우 다항식은 어떻게 될까요?  ActionScript 를 써 보세요.  힌트: control point 가 두 개의 경우 B?zier 곡선 다항식 공식은 인터넷 사이트에 많이 있어요.  검색해 보세요. 

*요새 북핵 미사일 위기가 고조되고 있는데 북한이 어떻게 장거리 미사일을 개발하였을까?  소련에서 스커드 미사일을 사다가 모두 분해 해서 리버스엔지니어링을 했다는 것이다.  즉 부품을 모두 뜯어서 그 제조과정의 설계도면을 역으로 추정했다는 것이다.  기술을 이양한다는 것은 설계도면을 내 준다는 것이다.  그러나 설계도면 없이 제품에서 설계도면을 추정하는 리버스 엔지니어링을 한다는 것은 아주 힘든 일이다.