▶ [p5.js] 기초 :: 베지어곡선 (Bezier Curve) 활용하기

▶ [p5.js] 기초 :: 베지어(Bezier) 활용하기 - 1. 기본 개념 및 bezier()함수

---

이번 글에서는 P5.js 에서   Bezier Curve 를 활용하는 방법에 대해 정리해 보려고 한다. 

시작

---

이 '베지어'라는 개념은  (나를 포함하여) 꽤- 많은 사람들을 긴장하게 만드는, 뭔가 묘한 매력이 있다. 잘 사용하면 그만큼 아름다운 무언가를 만들어 낼 수 있지만, 그 '잘 사용한다'라는 개념까지 이르기가 너무 어렵다. 즉, 진입장벽이 꽤 높다는 말이다.

미리 말하지만, 이 글에서 진입장벽의 높이를 보일 생각은 없다. 

나도 알아가는 사람 중 한 명이기 때문이다.

글 도입부에 이렇게 '베지어 곡선'의 위대한 진입장벽에 대해 이야기하는 이유는 간단하다. '조금 어려운 단어와 개념들이 등장하더라도 당황하지 말자는 것이다.' 개인적으로 베지어 곡선의 위키백과에 갔다가 온갖 수학 공식들을 마주하고는 조용히 창을 닫은 적이 많다.

그 무섭다는 베지어 곡선의 정의를 조금 들여다보자.

베지어 곡선 혹은 베지어 곡선(Bezier Curve)은 n개의 점으로부터 얻어지는 n-1개의 곡선으로 수치 해석 분야에서 상당히 중요한 위치를 차지하고 있다. 특히 3차 베지에 곡선은 포스트스크립트 글꼴, 메타폰트(METAFONT), 김프 등에서 부드러운 곡선을 생성하는 데에 이용되고 있으며, 트루타입 폰트에는 2차 베지에 곡선 알고리즘을 사용한다.^[각주:1]

[ Bezier Curve의 개념을 설명하는 위키백과의 이미지 ] 

――――――

베지어곡선 = n개의 점으로부터 얻어지는  n-1개의 곡선

베지어곡선 = 점으로부터 곡선을 얻기

기본적인 개념만 놓고보자면 일단, 베지어 곡선이란  "n개의 점으로부터 얻어지는 n-1개의 곡선"을 의미한다. 좀더 주관적인 요약을 해보면, 이것을 활용하여 우리는 '점'을 특정 위치에 찍어 '선'을(여기서는 곡선을)얻을 수 있다는 것이다.

p5.js에서 베지어(Bezier) 활용하기

---

위에서는 베지어 곡선에 대한 기본적인 개념만 간략하게 살펴봤다. 다시한번 말하지만, 이 글은 베지어 곡선의 과학적 우수성 보다는 '그래서 이걸 어떻게 코드에 활용할 지'에 대한 내용을 정리하는 것을 목표로 한다.

이글에서는 P5.js에서의 Bezier에 대해 다음과 같이 정리하려고 한다.

* 정리기준은 p5.js의 공식홈페이지의 분류를 참고했다.

1. Curves

- bezier()

- bezierPoint()

- bezierTangent()

2. Vertex

- bezierVertex

＿＿＿＿＿

p5.js에서 베지어(Bezier) 활용하기 - Curve

Curve > bezier()

Bezier 관련하여 살펴볼 함수는 총 4개인데, 그 중 가장 먼저 살펴볼 것은   bezier()  함수이다.

기본 형태

See the Pen p5js_bezier by tadkim (@colony-tad) on CodePen.

결과 형태가 뭔가 대단해보이지는 않지만, 원리를 이해하고자 할 때는 이런 가장 간단한 상태에서 뜯어보는 것이 중요하다. 코드만으로 결과를 유추하지 않아도 된다. 아래에서 정리한 내용을 바탕으로 한번 더 살펴보자.

요약

 bezier() 함수는 화면에 cubic bezer curve를 그린다. 이 곡선은 일련의 기준점(Anchor) 와  제어점(Control Point) 으로 정의되며, 자세한 내용은 다음과 같다.

  //베지어 곡선 문법
  // bezier(x1, y1, x2, y2, x3 y3, x4, y4); 또는
  // bezier(z1, z2, z3, z4);

- 처음 두  parameter 로 기준점(Anchor)을 하나 지정하고, 

- 마지막 두 parameter 로 다른 쪽의 기준점(Anchor)을 지정한다.

- 중간에 있는 parameter 들은, 곡선의 형태를 정의하는 두 개의 제어점(Control Point)를 지정한다. 

+ 이와 함께 P5.js의 curve() 레퍼런스를 참고하면 도움이 된다.

직접 codpen 등을 통해 Bezier 곡선을 표현하는 기본 예제를 바탕으로 각 변수를 하나하나 조절해가며 원리를 이해해보는 것도 하나의 방법이다. 앞서 살펴봤던 기본 예제코드를 Codepen에 작성하고, p5.js 라이브러리를 로드해두었다. 페이지로 이동후 직접 조작해보자. 

* 조작해본 내용을 저장하고 싶다면, 화면 우측 상단의 'fork'를 누른뒤 연습하고 - 저장하면 된다.

Codepen - bezier() 예제코드 보기

정리

이번 글에서는 베지어곡선(Bezier Curve)에 대한 기본 개념에 대해서 살펴보고, 이것을 실제로 p5.js에서는 어떻게 활용 할 지 에 대한 내용으로, 관련함수 중   bezier() 함수를 중심으로 살펴보았다. 다음 글에서는  bezierPoint와 bezierTangent()의 활용 방법에 대해 살펴보려고한다.

​

1. 위키백과, "베지에 곡선" , https://ko.wikipedia.org/wiki/베지에곡선(2016.7.13) [본문으로]