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

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

---

이번 글 역시 지난 글에이어 베지어 곡선에 대한 내용을 정리해 볼 것이다. 지난 글에서 Bezier 곡선에 대한 기본적인 내용 및 p5.js에서의 베지어 관련 기본함수인 bezier()에 대한 내용을 정리했고, 이번 글에서는 bezierPoint()에 대한 내용을 다룰 것이다.

지난글 ▶ [p5.js] 기초 :: 베지어곡선 (Bezier Curve) 활용하기 - 1. 기본내용 및 bezier() 이해

bezierPoint() 함수

---

지난 시간과 동일하게, 우선 최소한의 예제코드와 - 그를 통해 구현되는 형태를 나란히 놓고 살펴보자. 

See the Pen p5.js bezierPoint() - example by tadkim (@colony-tad) on CodePen.

사용법

bezierPoint()의 사용 문법은 다음과 같다.

//bezierPoint(a,b,c,d,t);

점 a, b, c, d에 대한 위치 t를 바탕으로 베지어곡선(Bezier Curve)의 형태를 결정한다. 

- parameter    A 는 곡선의   시작점 을,  D 는   끝점 을 의미한다.

- parameter  B ,  C  는  제어점  (Control Point)이다.

- paramter  t  는 (함수 내)가장 마지막 위치에 삽입 되며, 범위는 0 ~ 1.0 이다. 

- (베지어 곡선의 위치를 얻기위해)parameter t는 x좌표로 한번, 그리고 y 좌표 에도 한 번 쓰인다.

연습해보기

코드펜에서 점의 위치및 t 의 값을 여러가지로 변경해보면서 차이점을 비교해보는 것도 좋은 방법이다.

*변경해보고 난 뒤 우측 상단에 있는 'fork'를 누르면 codepen에 저장해둘 수 있다.

CODEPEN - p5.js bezierPoint() 기초예제 

​