▶이동
  • 상구너 닷컴 블로그를 방문하신 여러분을 환영합니다 :)
  • 스팸 정책에 의해 일부 덧글·방명록차단될 수 있습니다.

베지에 곡선 (Bezier Curve)

Develop 상구너(smokingbird) 2015.09.04 12:44

베지에 곡선(Bézier Curve) 이란 n개의 점으로부터 얻어지는 n-1차 곡선 이라고 위키피디아에 나와있습니다.

딱히 그 정의가 중요한것은 아니고 우리는 이 곡선을 어떻게 그릴 것인가 가 중요합니다.


본 글에서는 html5canvas 와 자바스크립트를 이용해 설명하도록 하겠습니다.


사실 html5의 canvas 나 svg 그외 많은 그래픽 라이브러리들이 베지에 곡선 그리기를 기본적으로 제공합니다.

Canvas 기준으로 설명을 하면 Canvas 2D 의 컨텍스트 에는 세점을 이용하는 쿼드레틱(Quadratic Curve)네 점을 이용하는 큐빅(Cubic Curve) 을 지원하는 메소드가 포함되어있습니다.


간단히 소개를 하자면 아래와 같습니다

--

위처럼 간단하게 세점 혹은 네점만 알면 알아서 계산되고 선을 그을 수 있습니다.


그런데 여기서 세점을 모두 꼭 지나는 곡선이 필요하다고 하면 문제가 조금 복잡해집니다.


선은 끝점끝점을 지나고 중간에 있는 좌표들은 곡률을 지정하기위한 변수로만 이용되기때문입니다. 

쿼드레틱을 예를들면

P1->P2->P3 로 이어지는 곡선은 P1 에서 P2 로 진행하는것처럼 보이지만 어느새 방향이 P3를 향하고 있습니다. 

P1->P2 의 기울기와 P2->P3 의 기울기가 같지않은이상 곡선은 절대 P2를 지날 수 없습니다.


세점을 이용해 직접 구현해보세요.

이는 나중에 설명할 계산식을 참고하면 금방 아실 수 있습니다.



보정(Interpolation)

그래서 세 점을 꼭 지나도록 보정하는 추가 계산이 필요합니다. 

쉽게말하면 P1->P2->P3  로 되어있는 좌표를 어떤 계산을 통해 P1-> P2` ->P3 

으로 바꾸어서 P2를 지나도록 만듭니다. 상당히 간단한 개념입니다만 이를 계산하는 식은 덧셈뺄셈 정도로 끝나지 않습니다.


보정되는 포인트를 컨트롤 포인트(Control Point:Cx) 라 하겠습니다. 아래는 구현된 Cx를 구하는 함수입니다.

위와 같이 하면 곡선은 P1,C1,C2,P3 좌표를 이용하는 곡선이 되며 P1->P2->P3 를 모두지나는 곡선이 됩니다.

보정이없을땐 쿼드래틱이었는데 보정을 하고나니 좌표수가 하나 늘어서 큐빅으로 계산하게 되었네요.

--


곡선의 좌표(Coordinate of Curve)

선을 긋는 정도로 만족한다면 아래쪽은 참고할 필요가 없습니다. 그러나 이 선을 이루는 모든 좌표들을 알고싶다면 또 새로운 작업이 필요합니다.

우리는 구해지는 좌표를 통해, 더이상 기본으로 제공해주는 곡선 메소드를 이용할 필요가 없습니다.(물론 기본제공 메소드가 더 최적화 되어있습니다.) 단지 조금 정확한 혹은 세부적인 작업이 필요한경우 아와같은 방법을 이용할 수 있습니다.


쿼드래틱의 경우



위와 같은 커브를 그린다고 가정할때



각각 선위의 점을 t로 나눈(여기서 t는 텐션이 아닙니다.) 점(DP)의 좌표는 위처럼 구합니다




이런 식이 나오게됩니다.




식을 이용해 기본식을 구하면 위와 같습니다. 저는 위그림의 2번째 줄처럼 구현해보았습니다.






베지에의 경우


위와같은 베지에 커브가 있다고 가정하면



각각의 나눈점 좌표는 위와 같으며 위 그림의 마지막줄처럼 결과가 도출이 됩니다.



식을 전개하면 위와 같습니다.




쿼드레틱과 베지에 예제 메소드에서 qu 변수는 좌표의개수 즉 두 점사이에 나눈 수를 의미합니다. 나누어지는 수가 늘어나면 곡선은 조금더 자연스러워집니다.

결과는 array 로 도출이되고 이를 이용해 곡선을 따라 움직이는 엘리먼트 등을 구현할 수 있습니다.


두 식에서 굳이 t+=1/qu 로 한이유는 ...

없습니다. 하다보니 머리가 굳어서 안보였어요.. 입맛에맞게 수정하세요..



저작자 표시 비영리 변경 금지
신고

'Develop' 카테고리의 다른 글

구너갤러리 15.11.2  (0) 2015.11.16
구너갤러리 15.11  (0) 2015.11.04
구너 플레이어 15.11  (1) 2015.11.04
베지에 곡선 (Bezier Curve)  (1) 2015.09.04
[구너 플레이어] 15.8 단일파일 php 음악 플레이어.  (1) 2015.08.06
PHP html5 css3 음악 플레이어.  (0) 2014.10.18
  • 공지사항
    중요한 개인정보필요한 경우가 아닌 경우 적지 마시고, 적으셨다면 비밀글 설정을 꼭 해주시기 바랍니다.
    스팸 필터 정책에 의해 영문만으로 작성된 글이나 무의미한 내용의 글은 등록이 되지 않을 수도 있습니다.
  • 이병준 2016.03.31 11:51 신고
    정말 감사합니다.. 저도 캔버스 공부중인데. quadraticCurveTo(),bezierCurveTo() 를 기본적으로 제공해주어도 점3개를 꼭 지나야 하는 이론적인 무언가가 필요했는데 많은도움이 되었습니다.
  • PHP html5 css3 음악 플레이어.

    Develop 상구너(smokingbird) 2014.10.18 22:07

    php로 음악파일 목록을 불러와 playlist 로 만들고 자동재생되도록 만들어보았습니다.

    1차적으론 개인 파일서버에있는 음악들을 들으려고 만들었는데, 

    이정도면 배포해도 괜찮겠지 싶어서 일단은 배포합니다.

    파일은 <name>.php 로 음악이 있는 폴더에 저장하면 됩니다. 파일을 직접 올리지는 않겠습니다.

    php 에서 같은 디렉토리 내의 파일목록과 디렉토리목록을 리스트업해서 재생해줍니다.

    우분투 환경에서 테스트하였고, 윈도우의 경우는 php가 한글을 인식하는게 문제가 있어서 안될듯..


    재배포와 수정은 자유이지만 처음 주석부분은 수정하지 않았으면 좋겠다.


    One file php html5 css3 jquery music player.


    이름도 한번 지어볼까..? 구너플?


    저작자 표시 비영리 동일 조건 변경 허락
    신고

    'Develop' 카테고리의 다른 글

    구너갤러리 15.11.2  (0) 2015.11.16
    구너갤러리 15.11  (0) 2015.11.04
    구너 플레이어 15.11  (1) 2015.11.04
    베지에 곡선 (Bezier Curve)  (1) 2015.09.04
    [구너 플레이어] 15.8 단일파일 php 음악 플레이어.  (1) 2015.08.06
    PHP html5 css3 음악 플레이어.  (0) 2014.10.18
  • 공지사항
    중요한 개인정보필요한 경우가 아닌 경우 적지 마시고, 적으셨다면 비밀글 설정을 꼭 해주시기 바랍니다.
    스팸 필터 정책에 의해 영문만으로 작성된 글이나 무의미한 내용의 글은 등록이 되지 않을 수도 있습니다.
  • 1