CCBezier(베지어 곡선)를 사용할땐 controlPoint(컨트롤 포인트)를 조심하자

베지어 곡선을 처음접하신분들은 다음의 링크들(이미지 위주)을 보시면 이해가 빠르실겁니다.

1. http://en.wikipedia.org/wiki/User_talk:Twirlip (wiki Bezier Cuver Animation)

2. http://eunchul.com/Algorithms/BezierCurves/BezierCurves.htm  (수학적인 이해)

3. http://cakel.tistory.com/entry/B%C3%A9zier-curves-%EB%B2%A0%EC%9D%B4%EC%A7%80-%EA%B3%A1%EC%84%A0 (베지어 곡선에 관한 자료를 이미지 위주로 잘 종합해놓은 포스트)

시간관계상 이번 포스트는 링크 위주로 갑니다 ! <-언제는 안그랬냐는 듯이..

(사실 Bezier 그대는 내가 다루기에는 너무 무거운 주제..)

다음은 비교적 쉽게 CCBezier에 대하여 정리해놓은 포스트 링크들 입니다. (모두 감사합니다!)

1. http://blog.naver.com/PostView.nhn?blogId=jusipers&logNo=90110313885 ([android cocos2d] Action-CCBezier)

2. http://coolsharp.tistory.com/111 (cocos2d for android - 곡선)

사족을 붙이자면 (이게 중요함) '2차원 곡선'을 흉내내보고자 'controlPoint_1'와 'endPosition'만을 사용하여

베지어를 그리고자 하는데 자꾸만 원치않는 곡선을 그리는거였습니다.

몇번을 시뮬레이션 해봐도 '3차원 곡선'을 그리는듯 하길래, 일일이 값들을 확인해본결과,

'controlPoint_2'의 값이 비어있는게 아니라, '(0,0)'이라는 포인트가 들어있.....(믿었던 부분에 대해 배신감을 느낌)

나름 결론은 controlPoint는 _1과_2를 둘다 써주어야 한다는 것.

문제는 컨트롤포인트를 둘다 사용해야 한다는 건데.. 완만한 2차원 곡선을 표현하기 위해서,

두개의 컨트롤포인트를 정확한 지점에 위치시켜야 한다는 것이다...............

(BezierTo라면 position을 controlPoint_1로 대신 사용하면 근접한 곡선을 얻을 수 있다. 근데 속도가 미묘하게 틀..)

또 한가지 의문점이 드는게, CCBezierBy로도 시뮬레이션 해봤는데, 결과는 비슷하다.

By개념에서의 포인트'0값'은 무의미해보여도 베지어에서는 쉽사리 통용되지 않는 법.

(같은 자리에 수차례 컨트롤포인트를 찍을수록 곡선은 변형된다.)

ps. Bezier는 By가 더 헷갈린것 같다.. 포인트에서의 거리를 계산하다보니 ㄱ-

다음의 링크를 통해 쉽게 베지어 곡선을 만들어보고 곡선에 맞게 코딩해봅시다 !

1. http://alecjacobson.com/programs/bezier-curve/ (베지어 곡선을 그려볼수 있는 어느 한 외국 사이트(?))

+ 막상 베지어 곡선을 만들고 나니 기본사용법과 개념만 충분히 숙지한다면 얼마든지 변형해서 사용할수 있다는걸 깨달았다.. 혹시라도 잊어버릴까 다음과 같은 포스트에 간단히 정리해놓았습니닷. (BezierCurve(베지어 곡선) Sample(예제) 정리 (CCBezierBy기준)