[UI&C Lab] Draw Path...

이번에는 만들어 놓은 Draw Path Recorder를 이용하여 path 경로를 축출하여 나무가지가 뻗어나가며 꽃과 잎이 돋아나는 형태의 결과물을 만들게 되었다. draw path를 가져와서 라인을 그리는 클래스에서 추가적인 기능을 넣는 것으로 완성을 하게 되었는데 그 과정은 다음과 같다.

 

라인을 path에 따라 그려주는 클래스에서 임의의 좌표점에서 무비클립의 스케일을 랜덤하게 생성하여 scale 1 ~ scale random(100)으로 진행하였다. 기초적인 나무의 형태와 오브젝트들을 나열했으나 부자연스럽다. 다음 진행은 아래와 같다.

 

 

라인의 굵기를 처음 좌표를 시작하는 지점과 끝 지점으로 갈수록 굵은 쪽에서 가늘게 진행하였다. 그리고

꽃과 잎의 구분을 위하여 두개의 무비클립을 상호 조화롭게 나타나도록 배치하였고 라인과 마찬가지로 잎과 꽃의 scale도

큰쪽에서 작은 쪽으로 진행하였다. 그러나 어딘가 또 부자연스럽다. 잎과 꽃의 rotation을 보면 rotation을 랜덤으로

설정해 놓았기 때문에 식물의 가지가 뻗어나가는 방향으로 향하지 않은 놈들이 상당히 보인다. 이는

자연의 나무 형태에서 보는 것과는 다른 부자연스러운 모양을 나타내고 있다. 다음은

그 문제를 해결한 부분이다.

 

앞의 것과 같은 클래스 구조에서 각각의 잎과 꽃을 나타내는 무비클립의 rotation에 제한을 두었다.

 

  var difx:Number = pointList[count].x - pointList[count-1].x;
  var dify:Number = pointList[count].y - pointList[count-1].y;

  var ang:Number = Math.atan2(dify, difx);

  var rotationValue:Number = ang * (180 / Math.PI);

 

여기서의 rotationValue 값은 라인이 진행하는 방향의 각도를 가지고 있으므로 그 각도에서 + and -값을 꽃은 60, 잎은 70도로

한정하고 - 와 +는 랜덤으로 설정하였다. 이렇게 하여 라인이 진행하는 방향 쪽으로 향하는 잎과 꽃을 나타낼 수 있었다.

 

 

이렇게 진행하고 마지막으로 잎과 꽃을 실사 이미지를 입히고 가지의 line은 lineGradientStyle 메소드를

이용하여 명암을 넣으므로써 조금은 입체적인 느낌을 살리려고 했다.

 

이것을 만들때 Line Path Recorder를 이용하여 축출한 Point 좌표가 마우스의 움직임에 따라 저장이되는 관계로

그대로 사용할 경우에는 한점과 한점을 지나는 간격이 좁은 관계로 처리해야 하는 양이 늘어나는 문제가 있었다.

이는 기존의 point 좌표를 갖는 array에서 중간 값들을 두번 걸러내는 것으로 처리속도를 높일 수 있었다.

 

실사 이미지가 들어가므로 인해서 잎과 꽃이 나타날때 약간의 CPU문제가 발생하지만 그럭저럭 쓸만한 클래스가 만들어졌다.