# 2차 베지어 곡선 ### 2차 베지어 곡선그리기 2차 베지어 곡선은 단지 두개의 1차 베지어 곡선을 혼합한 것입니다. 앞서 배웠던 1차 베지어 곡선에는 t와 1 - t만 있었으며 t제곱은 없었습니다. 여기서는 "2차"라는 의미의 제곱을 볼 수 있을 겁니다. ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-Loo8_hZafdYoVr5ucDh%2F-Loo8qkGEF4lZuJHL4xG%2Fimage.png?alt=media\&token=51fb637d-c46b-4faa-9c67-ab57c440dd4a) A, B, C 라는 세개의 조절점이 있습니다. ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-Loo8_hZafdYoVr5ucDh%2F-Loo8udZR01C86lPeOj1%2Fimage.png?alt=media\&token=124ccad5-9d67-4da6-85df-f45dd392b536) AB와 BC라는 두개의 1차 베지어 곡선도 있죠. ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-Loo8_hZafdYoVr5ucDh%2F-Loo9-GLai7e0x870qyR%2Fimage.png?alt=media\&token=5d6d3dfc-9001-48e3-b427-cca2db1caa2f) 두개의 1차 베지어 곡선 위에서 계산되는 점들은 각각 E, F로 쓰겠습니다.
![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-Loo9HaZ5j4i3Abknhfj%2F-Loo9JlPedE7Yx1fxHpr%2Fimage.png?alt=media\&token=8dbfbf5b-0a35-47f9-9609-739d101c6b7f) 손잡이를 돌려 AB 를 따라 E를 보간 합니다.\ 마찬가지로 손잡이를 돌려 BC 를 따라 F를 보간 합니다.\ "t"값 하나로 E 와 F를 동시에 계산한다고 생각하면 됩니다. ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-Loo9HaZ5j4i3Abknhfj%2F-Loo9Ub_ihqg4Dyj_cNV%2Fimage.png?alt=media\&token=7ccfa6d5-adf7-4ba0-9420-58fc13666de6) ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-Loo9HaZ5j4i3Abknhfj%2F-Loo9Ve4vp__79deM8y6%2Fimage.png?alt=media\&token=810546cf-17b8-4d38-872b-2bda10355e82) ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-Loo9HaZ5j4i3Abknhfj%2F-Loo9WhmEljoIS2m5M5z%2Fimage.png?alt=media\&token=ccb72eb5-3082-41cd-8e89-98badc6e04c3) ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-Loo9HaZ5j4i3Abknhfj%2F-Loo9Yzihz0FueO_wPnS%2Fimage.png?alt=media\&token=feecdc8a-4071-45e4-ba03-c7de8f1c6f35) 이제 E와 F 사이에 선을 그어보면서 다시 손잡이를 돌려 봅시다.\ t=0에서 1까지 입니다. ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-Loo9fcljlsQgZPLlhvw%2F-Loo9gaMiFm6RzoOHMRG%2Fimage.png?alt=media\&token=2348e383-376d-41a6-a811-20fddf415203) ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-Loo9fcljlsQgZPLlhvw%2F-Loo9hgE2sUIq1IxnQ0b%2Fimage.png?alt=media\&token=20db4ad5-cfce-422c-89a4-a787e5aec4f3) ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-Loo9fcljlsQgZPLlhvw%2F-Loo9iiWNSxl3tKx2-y1%2Fimage.png?alt=media\&token=5c22b41e-21e4-4784-bbf7-33589b1916b3) ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-Loo9fcljlsQgZPLlhvw%2F-Loo9jmdYrxSe3Na8mBA%2Fimage.png?alt=media\&token=420773d9-e6a4-449f-aede-be3370f067ee) ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-Loo9fcljlsQgZPLlhvw%2F-Loo9lYs0T21jEW1b1VY%2Fimage.png?alt=media\&token=e2eabc37-cb02-43d6-a97f-ab3f0f2f1e5e) 이제 E에서 F로 가는 점 P를 보간해 볼것인데요, 아까 E와 F를 보간할 때 사용했던 "t"값을 그대로 사용할 것입니다. P가 어디로 이동해 가는지 확인해 보세요! ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-Loo9fcljlsQgZPLlhvw%2F-Loo9rpmroSbWJ-PBiAY%2Fimage.png?alt=media\&token=7df4fb8b-ba0e-4d03-9b21-2649730cc68c) ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-Loo9fcljlsQgZPLlhvw%2F-Loo9tR2Gx4yk4A71X5m%2Fimage.png?alt=media\&token=53983fc3-df08-4f84-89b3-06f32980a8e6) ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-Loo9fcljlsQgZPLlhvw%2F-Loo9uruPT6WxG6Xs_C7%2Fimage.png?alt=media\&token=ef82c0b6-89db-4618-bd7a-26aed43b236a) ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-Loo9fcljlsQgZPLlhvw%2F-Loo9wDffv9QbCBzHLK9%2Fimage.png?alt=media\&token=52c9a5b0-6c3a-438a-a1cf-a8e91569acd1) ### 가이드 포인트 ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-LooAIc4YwAb7W_cZ7J2%2F-LooAS_dH4JIAK7SkXRu%2Fimage.png?alt=media\&token=2e3adde5-1a5e-4c13-a083-511bc3d9d6bc) 수학자들은 A, B, C 대신에 P0, P1, P2를 쓰지만 저는 깔끔하고 단순하게 쓰기 위해 A, B, C로 쓰겠습니다. 앞서 그려봤던 2차 베지어 곡선을 떠올려 보면 점 P가 A에서 시작하고 C에서 끝난다는것을 알 수 있습니다. 하지만 B에는 절대 닿지 않는다는것도 알 수 있죠.\ B는 곡선에서 가이드 역할을 합니다. 곡선의 형태를 변경하려면 B를 이리저리 이동시키면 됩니다. ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-LooA_IgYnG3J4Fp_0Ir%2F-LooArh9qaq0RFUMkl81%2Fimage.png?alt=media\&token=3c98745e-f1e7-46c5-adef-64e806d153d9) ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-LooAtJcF7VZQtMhHoqb%2F-LooAxUl4ndXuE_fnbzZ%2Fimage.png?alt=media\&token=9aa468d6-d0de-4a39-b2f1-bb4ea030864f) ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-LooAtJcF7VZQtMhHoqb%2F-LooAygnTWYdhj-pDZ_6%2Fimage.png?alt=media\&token=5ff3aa16-7520-4972-8629-3f041e34b9d6) 중학교 시절에 이런거 많이 그렸었죠? ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-LooAtJcF7VZQtMhHoqb%2F-LooB2Jpfc4DH-I2S9U5%2Fimage.png?alt=media\&token=5e3c579b-10bf-4b70-8b3e-3ef14bb7bbc6) 트루타입 폰트의 아름다운 곡선을 그리는데에도 베지어 곡선이 사용됩니다. {% hint style="info" %} 2차 베지어 곡선은 단지 두개의 1차 베지어 곡선을 혼합한 것 뿐입니다.\ 그렇기 때문에 수학적인 내용은 매우 간단하죠.\ (단지, 두개의 1차 베지어 방정식을 혼합한 것이니까요.) {% endhint %} ### 2차 베지어 곡선의 방정식 지금까지 2차 베지어 곡선이 그려지는 원리에 대해서 알아 봤습니다. 이제 수식과 함께 설명 드리겠습니다. 여기서 "**2차**"의 의미를 뜻하는 제곱이 어디에 나타나는지 알 수 있을 겁니다. ![](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-LooBST7DbjtFHm37l0M%2F-LooBZ9fErOQTNO_xy-y%2Fimage.png?alt=media\&token=27816fcc-431c-4dc2-acea-bd5d40f30ec7) 각 점 E, F, P에 대한 수식을 다시 한번 나타내 보겠습니다. $$ E(t) = (s \* A) + (t \* B) $$ $$ F(t) = (s \* B) + (t \* C) $$ $$ P(t) = (s \* E) + (t \* F) $$ 곱셈 기호를 생략해서 써 보면 이렇게 됩니다. $$ E(t) = sA + tB $$ $$ F(t) = sB + tC $$ $$ P(t) = sE + tF $$ 여기에서 P(t)는 E 에서 F까지 보간되는 값입니다.\ 이제 E와 F자리에 해당 수식을 직접 대입해 보겠습니다. $$ P(t) = s( sA + tB ) + t( sB + tC ) $$ 아래처럼 풀어서 쓸 수도 있죠. $$ P(t) = (s^2)A + (st)B + (st)B + (t^2)C $$ (st)B가 두개이니 하나로 줄이면 아래와 같은 수식이 됩니다. $$ P(t) = (s^2)A + 2(st)B + (t^2)C $$ 여기에 t제곱이 들어있군요.\ 그럼 이제 이 수식을 갖고 t를 바꿔가며 직접 계산해 보겠습니다. 만약에 t = 0이라면 결과값은 A가 되어야 합니다. 조절점이 0이라는것은 시작점을 의미하기 때문이죠. $$ P(t) = (s^2)A + 2(st)B + (t^2)C $$ 방금 구한 방정식에 t = 0값을 대입해 봅시다.\ t = 0이니까 s = 1이 되죠(s = 1 - t 이므로). $$ P(t) = (1^2)A + 2(1\*0)B + (0^2)C $$ 계산해 보면 이렇게 됩니다. $$ P(t) = (1)A + 2(0)B + (0)C $$ 최종 결과값은 A가 나옵니다. P(t) = A 아주 정확하군요. 이제는 t = 1인 경우를 계산해 보겠습니다. 결과값은 C가 되어야 합니다. 조절점이 1이라는것은 끝점을 의미하기 때문이죠. $$ P(t) = (s^2)A + 2(st)B + (t^2)C $$ 앞에서 계산한 것과 마찬가지로 방정식에 t = 1값을 대입해 봅시다.\ t = 1이니까 s = 0이 되죠(s = 1 - t 이므로). $$ P(t) = (0^2)A + 2(0\*1)B + (1^2)C $$ 계산해 보면 이렇게 됩니다. $$ P(t) = (0)A + 2(0)B + (1)C $$ 최종 결과값은 C가 나옵니다. P(t) = C ### 비균일 대부분의 곡선은 균일 하지 않습니다. 즉, 밀도 또는 속력이 변한다는 뜻이죠.\ (일정한게 좋을것 같지만 오히려 이 특징이 장점이 되는 경우도 있습니다!) ![비균일 = 각 구간별로 밀도가 다르다](https://3665878343-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LngmcDPWb1XA1VNz9ii%2F-LooF9zXXD9GFQqft8wx%2F-LooFPhbNjtjqy7fEkaS%2Fimage.png?alt=media\&token=dcc45bc0-e3fa-4c8a-9cc7-c0f01f409850)