곡선을 표현하고 싶을 때 가끔 베지어 커브를 사용합니다.
일러스트레이터에서 그림 그릴 때,
동영상 편집시 키프레임 애니메이션 만질 때,
CSS 넣을 때,
자주 사용되는 곡선입니다.
점 두개를 이으면 그냥 가로선이 될 뿐인데
이걸 곡선으로 바꾸고 싶으면 어떻게 하냐면
상단에 아무데나 점을 하나 추가하고 기존 점들과 선을 이어봅니다.
선 중간에 점을 추가합니다.
그 점 끼리 선을 그은 다음에 또 점을 하나 생성합니다.
실은 중간에 대충 점을 찍는다기 보다는 중간에 있는 점의 위치가 어디인지를 계산해내는 공식이 따로 있는데 그걸 적용해서 점을 찍어줍니다.
공식은 왼쪽점(1-t) + 오른쪽점(t) 이런걸 이용합니다.
t는 0부터 1까지 표현한 왼쪽 점부터 오른쪽 점으로 향하는 진행도라고 생각하면 되겠습니다.
그 다음에 점들을 시간에 따라서 선의 왼쪽 끝에서 오른쪽 끝까지 이동을 시킵니다.
그럼 마지막 점을 따라서 커브가 하나 생기는데
이걸 quadratic (2차) 베지어 커브라고 부릅니다.
궁금하면 아래에서 직접 만져봅시다.
점을 1개가 아니라 2개 생성한 후 똑같은 과정을 거치면
2번 꺾을 수 있는 커브가 생기는데 cubic (3차) 베지어 커브라고 부릅니다.
그건 여기서 실험해봅시다.