Bezier Curve
/ 4 min read
Vector 이미지
- Scalable Vector Graphics
- 확대해도 깨지지 않는 이미지
| SVG | PNG |
|---|---|
 |  |
왼쪽은 vector 이미지, 오른쪽은 png 이미지.
가능하다면 컴퓨터에서는 Ctrl++로 확대하거나, 모바일에서 핀치로 확대해서 보면 왼쪽은 픽셀이 보이지 않는 반면, 오른쪽은 픽셀이 보인다.
구현 방식
사실 알고리즘 자체를 구현한것은 Bernstein Polynomial가 먼저였지만, 이를 시각적으로 볼 수 있게 표현한 De Casteljau Algorithm을 먼저 알아보자.
De Casteljau Algorithm
- 점 2 개 Lerp → Linear Bézier Curve
- 점 3 개 Lerp → Quadratic Bézier Curve
- 점 4 개 Lerp → Cubic Bézier Curve
- 점 N 개 Lerp →
-th Bézier Curve
Linear Bézier
Quadratic Bézier
Cubic Bézier
이처럼 De Casteljau Algorithm은
위에서 구현한 것 이상으로 4차, 5차로도 만들 수 있겠지만, 그 이상의 곡선은 거의 3차 곡선(Cubic Bézier) 여러개를 사용해 거의 똑같이 만드는것이 가능함에 더해 계산 효율성마저 떨어지기 때문에 잘 사용하지 않는다.
Bernstein Polynomial
조절점
계산해보면, 위 항들의 합은 항상
관계?
De Casteljau Algorithm에서 3차 곡선의 식을 정리하면 아래의 식으로 Bernstein Polynomial에서