웹눈 이야기

  이곳에 가시면 Verlet Inegration의 구현에 대해 매우 상세히 설명되어 있는 글을 보실 수 있습니다. 설명되어 있는 예제가 html5의 Canvas를 이용하였기 때문에, 크롬 브라우저나 파이어폭스 혹은 익스 9 버전으로 확인 하셔야 합니다.

위의 예제는 Verlet Integration을 이용하여 구현해본 것입니다.  전에 Euler Integration을 사용하여 비슷한걸 구현해 본적이 있는데요. Verlet Integration을 이용하면 놀라울 정도로 간단히 구현할 수 있습니다.

제가 만든게 웹상에 돌아다니니까 신기하네요.. 지돌스타님이 손봐주신거지만.. ㅋㅋ

http://webnoon.net/entry/플레시-Actionscript-30-10만개-파티클-테스트-mouseX의-비용-체험

Actionscript 3 로 만든 프로그램을 이해하기 위해서는 프로그램의 수행흐름을 따라가야 합니다. 즉, 머리속에 현재 프로그램의 수행상태, 제어흐름, 데이터 흐름등을 파악하고 있어야 합니다.

저는 플래시 프로그래밍을 하다보면, 이벤트 모델의 사용으로 인해 수많은 함수 분기가 일어나서 나중에 그 프로그램을 다시 보았을때 수행흐름을 파악하는데 어려움을 겪었습니다.

즉, 제가 원했던 것은 아래와 같은 수행흐름을 이해하기 편한 표현방법 이었다면,

실제로는 아래와 같이 되는게 일반적이였습니다.

이렇게 되면 구현내용을 일일이 파악해야지 이 프로그램이 무엇을 하는것인지 이해가 가능할것입니다.

이런 어려움을 겪고 있던 저는 얼마전 구세주와 같은 해결방법을 보게되었습니다. 바로 hika님이 포스팅 하신 “Message Queueing 서비스” 라는 포스트입니다. hika님이 알려주신 팁을 적용하면, 위와 같은 문제점은 대략 아래와 같이 해결가능해졌습니다.

(위에 예를든 프로그램과 별개입니다. 헷갈리실수도 ^^;) 아래는 디버그 결과입니다.

init 함수 안에 이 프로그램에 대한 수행흐름을 모두 나타낼수 있었습니다. 이로써 자세한 구현사항을 파악하지 않아도 이 프로그램이 무엇을 하는 프로그램인지 보다 쉽게 이해가 가능해진것 같습니다.

p.s - 제목은 마치 읽기쉬운 프로그래밍을 할수 있는 방법을 제시할것처럼 해놓았지만 결국은 “Message Queueing 서비스”에 대한 저의 감상문 정도의 글이 였습니다. ^^; 개인적으로 이런 훌륭한 팁을 마구마구 알려주시는 hika님께 매우 감사드린다는… 아무튼, 보다 구체적이고 원론적인 내용을 원하시는 분들은 위에 언급한 포스트를 읽어보세요.

웹기반 소프트웨어에 대한 자료를 조사하던중 플렉스로 제작된 그래픽 저작툴을 발견하였습니다. 아무래도 포토샵에 비해서는 기능이 부족해보이지만 플렉스로 이런 소프트웨어를 만들었다는 자체가 저에게는 놀랍기만 하네요.

Sumo Paint는 보시는 바와같이 무료는 아니지만 Try Online 버튼을 클릭하시면 테스트하실수 있습니다. 아래는 테스트 화면입니다.

저번에 “플래시의 정수 표현방법 - 2의 보수표기법” 이라는 제목으로 포스팅한 적이 있습니다. 그 포스트에 hika 님이 uint 에 관해서도 진리표 작성을 권유(?) 하셔서 한번 삽질을 해보았습니다.

우선 uint는 양의 정수만을 표현할때 사용하는 기본형으로, 32비트를 사용하여 양의 정수를 표현한다고 레퍼런스에 나와있습니다. 최대값이 int 형의 두배가 된다고도 나와있는데 (즉, 2^32  – 1 ,정확히 두배는 아니…음..) 여기에서 32비트 전부를 수를 표현하는데 사용한다는걸 알수 있었습니다.

그럼 간단히 테스트를 해본 결과를 보겠습니다.

위 그림과 같이 255 크기의 uint 를 byteArray에 쓰고, 한 바이트씩 읽었습니다.

여기서 4번째 바이트를 읽어왔을때 반환값이 –1 인것을 볼수 있는데, 이것은 ByteArray의 readByte() 메소드는 int형을 반환하고, 2의 보수표기법을 사용하는 int형은 비트열 11111111 을 -1로 표현한다는것을 알수 있습니다.

따라서 플래시의 uint형은 비트열의 32비트열의 2진 체계를 그대로 10진법으로 변환하여 표현해주는 방식을 사용한다고 볼수 있겠습니다.

플래시 빌더4를 사용해서 Actionscript Project 형식으로 Air 프로젝트를 생성 하는 방법을 알아보겠습니다.

1. File > New > "Flex Project"
2. 프로젝트 이름을 입력합니다. 예로, “Foo”
3. "Desktop (runs in Adobe AIR)" 를 선택합니다.
4. "Finish" 버튼을 클릭.
5. "Foo.mxml" 지웁니다.
6. File > New > ActionScript Class 에서 Sprite 를 상속받는 Foo.as 파일을 생성합니다.
7. 완료 버튼 클릭.
8. "Foo.as" 파일에 마우스 우측 버튼을 클릭후,  "Set as Default Application" 를 선택합니다.
9. Foo.as 생성자에 다음과 같이 입력합니다. "this.stage.nativeWindow.visible = true;"
10. Run & Done!

플래시에서 정수를 표현하기 위해 어떤 비트패턴을 사용하는지 알아보고 정수를 사용할 때 나타날수 있는 이슈사항들에 대해 알아보도록 하겠습니다.

1. 컴퓨터의 정수표현 - 2의 보수 표기법

2의 보수 표기법(two’s complement) 은 컴퓨터에서 정수 표현에 사용되는 표기법이며 다른 표기법으로는 초과 표기법이 있습니다.

이 글에서는 플래시에서 정수를 표현하는데 사용되는 2의 보수 표기법에 대해서 알아보도록 하겠습니다.

현재 플래시는 길이가 32인 비트패턴을 사용하여 정수를 표현하고 있습니다. 여기서는 2의 보수 표기법이 무엇인지 설명하기 위해 내용전달이 충분히 가능면서 보다 설명하기 편한 길이가 4인 비트패턴을 사용하겠습니다.

2의 보수 표기법은 양수와 음수의 정보를 나타내는 하나의 최상위 비트와 나머지 값을 나타내는 비트들로 이루어져 있습니다. 길이가 4인 비트패턴으로 예를 들면 아래 표와 같습니다.

2의 보수 표기법에서 최상위 비트(제일 왼쪽 비트) 0은 양수를 , 1은 음수를 표현합니다. 이는 부호비트(sign bit) 라고 불립니다. 나머지 3비트는 정수의 크기를 나타내는데, 양수 표현에서는 일반 2진 체계로 정수를 나타내는 방법과 동일합니다. 즉, 정수 3은 2진 체계로 010 의 값으로 나타낼수 있습니다.

여기서 음의 정수를 표현한 비트패턴과 양의 정수를 표현한 피트패턴 사이에는 재미있는 규칙이 있습니다. 양의 정수 비트패턴을 오른쪽에서 왼쪽으로 읽어나갈 때 처음으로 1이 나오는 부분까지는 양과 음의 비트패턴이 같고, 나머지는 양의 정수 비트패턴과 보수관계 입니다. 예를 들어 정수 2와 -2의 비트 패턴을 살펴보면, 비트 패턴의 오른쪽으로 부터 2번째에 처음으로 1이 나오고, 3번째 부터는 양수와 음수의 비트패턴이 보수관계에 있는것을 볼수 있습니다. (보수 관계란 1은 0 , 0은 1 이 되는것을 말함.)

위의 보수 관계를 이용하면 음의 정수 7의 비트패턴을 양의 정수 7의 비트패턴을 이용하여 구할수가 있는데, 다음과 같이 양의 정수 7의 비트패턴을 구하고 (0111), 오른쪽으로부터 처음으로 1이 나오는 자리 다음부터 보수를 취하면 됩니다. (1001)

2. 플래시의 int 를 사용할때 나타날수 있는 이슈사항

정수를 표현하기 위해 이용하는 비트의 자리수에 따라 표현할수 있는 정수의 최대값과 최소값이 정해지는데, 위의 4비트로 예를 들면, 부호 비트 하나를 제외한 나머지 비트열들의 경우의 수 만큼 정수를 표현할수 있습니다( 즉, 양수는 2^3 –1 , 음수는 - 2^3 ).  플래시는 정수를 표현하기 위해 길기가 32인 비트패턴을 사용하므로, 최대값은 2^31 – 1 , 최소값은 -2^31 이 됩니다.

얼마전 팀에서 모 증권 사이트 프로젝트를 진행한적이 있는데, 다른 팀원분이 금액을 나타내기 위해 int 형을 사용해서 이슈가 되었던 적이 있습니다. 즉, 원(WON) 단위 금액을 표현하는데, 최대로 표현할수 있는 수 2,147,483,647 (약 21억) 을 넘어가니까 오버플로(overflow) 가 발생한것이지요.

벡터 외적 연산의 핵심은 연산한 결과가 연산한 두 벡터에 수직인 벡터로 표현된다는 점이였습니다.
외적 연산의 수학적 표기방법은 X 를 사용합니다.
(내적은 dot를 사용해서 dotproduct , 외적은 X 를 사용해서 crossProduct라고 불립니다.)



위 SWF 에서 볼수 있듯이

 녹색 선은 L2 벡터.
빨간색 선은 L1 벡터.
파란색 선은 L3 벡터. 로 표현하고 있고,

 L2 X L1 = L3 의 결과를 나타내고 있습니다.

 화살표키로 로테이션 시킬때마다 L2 X L1 의 연산결과를 나타내고 있습니다.

내장 Vector3D API 를 사용한 연산은 아래와 같습니다.

var l1 : Vector3D = new Vector3D(100,0,0);
var l2 : Vector3D = new Vector3D(0,100,0) ;
var l3 : Vector3D = l1.crossProduct(l2) ;

위 코드에서 벡터 l1은  방향은 x축방향이고 크기는 100 인 벡터입니다.
l2 는 방향은 y축 방향, 크기는 100인 벡터입니다.

 두 벡터의 외적 연산 결과는 l3로 벡터이며, 크기는 |l1|*|l2|*sin@ (여기서 @는 l1과 l2의 사이각) 이고 방향은 양의 Z축과 평행한 방향입니다.(l1과 l2의 수직한 방향).

 만약 여기서 외적 순서를 바꿔서 l2.crossProduct(l1) 을 하게 되면 l3는 크기는 위와 같고 방향은 음의 z축방향을 향하게 됩니다.

 여기서 볼수 있듯이 외적계산은 교환법칙이 성립하지 않으며, 이러한 성질을 이용해서 3D 엔진에서 평면을 렌더링할때,평면이 앞을 바라보고 있는지 뒤를 바라보고 있는지 알수 있습니다.

 예를들어, l3와 시선벡터 Vector(0,0,-1)를 내적을 하게 된 결과가 양수이면 앞면을 바라보고 있는것이고, 음수이면 뒤를 바라보고 있는것입니다.

위 예제 sWF에서 l3와 Vector(0,0,-1)을 내적해서 양수(앞면)이면 노란색으로 평면을 칠하고, 음수(뒷면)이면 회색을 칠하도록해보았습니다.

more..