베 지어 곡선으로 신경을 쓰다

지난 며칠 동안 저는 저만의 작은 JavaScript 애니메이션 라이브러리를 작성하려고 노력해 왔습니다. 나는 아무도 새로운 애니메이션 라이브러리에 대해 정말로 관심이 없다는 것을 알고 있지만 요점은 내가 Bezier 곡선을 우연히 발견했다는 것입니다. 나는 몇 시간을 연구하면서 그것들을 이해하기 위해 노력했고, 그 동안이 새로운 기사 인“베 지어 곡선 뒤의 수학적 직관”을 발견했습니다.이 기사는이 기사의 영감이기도합니다. 수학적이고 똑똑한 사람들을 겨냥한 것 같아서 개념에 대해 머리를 감싸는 데 어려움을 겪었습니다. 하지만 다행히도 결국 제가 그렇게했고 이로 인해 Bezier 곡선에 대한 여러 가지 멋진 새로운 내용을 배우게되었습니다. 여러분과 공유하게되어 매우 기쁩니다.

배우게 될 것

곡선에 대한 소개부터 시작하겠습니다. 곡선이 무엇인지, 왜 멋진 지, 수학적 표현을 사용합니다. 하지만 수학에 대해서는 걱정하지 마세요. 솔직히 말해서 저는 수학을 좀 짜증이납니다. 그래서 나 자신에게 그것을 설명 할 방법을 찾아야하고 "방법"이 당신에게도 효과가있을 것이라고 확신합니다. :).

다음으로 베 지어 곡선으로 이동합니다. 그들이 무엇이며 무엇이 다른지. 그들의 수학 공식.

마지막으로 우리는 JavaScript와 SVG로 우리만의 작은 Bezier 곡선 그리기 엔진을 만들 것입니다. 얼마나 멋진가요?

곡선

여기서 곡선에 대한 공식적인 정의를 할 필요는 없죠? 이 모든 선은 곡선입니다.

곡선은 매우 달콤하며 여러 가지를 나타낼 수 있습니다. 예를 들어 아래 곡선은 시간에 따른 내 트위터 팔로워 수를 보여줍니다.

알겠습니다. 무작위로 그린 선처럼 보입니다. 몇 가지 맥락을 추가하겠습니다.

이제 그것이 무엇을 나타내는 지 더 나은 아이디어를 제공 할 것입니다. 가로축은 제가 트위터에 가입 한 이후의 일수이고 세로축은 제가 얻은 팔로워 수입니다.

트위터 첫날에는 팔로워가 0 명이었다가 천천히 증가하고 일부를 잃고 일부를 얻었고 후반에는 새로운 팔로워를 많이 얻었습니다. 이것이 우리가이 곡선에서 해독 할 수있는 유일한 정보는 아닙니다. 또한 특정 날짜에 내가 보유한 정확한 팔로워 수를 확인할 수 있습니다. 두 선을 그리는 문제입니다.

60 일에 내가 가진 팔로워 수를 알고 싶다고 가정 해 봅시다.

가로축의 60 에서 세로선을 그린 다음이 선이 곡선과 교차하는 지점에서 가로선을 그립니다. 이 수평선은 한 지점에서 수직 축 (팔로어 수가있는 축)과 교차합니다. 세로축의 해당 지점 값은 60 일에 내가 보유한 정확한 팔로워 수 (126)를 제공합니다.

이제 두 개의 빨간색 선이 교차하는 지점을 점 이라고합니다 . Twitter 팔로워 그래프와 같은 2 차원 플롯에서 포인트는 수평 좌표 ( x )와 수직 좌표 ( y )의 두 값으로 고유하게 식별됩니다 . 따라서 (x, y)를 쓰는 것만으로 포인트를 표현할 수 있습니다. 우리의 경우 두 개의 빨간색 선이 교차하는 빨간색 점은 (60, 126) 으로 쓸 수 있습니다 .

(60 = x / 수평 좌표, 126 = y / 수직 좌표)

요점이 무엇인지 충분히 알았습니다. 이미 알고있었습니다. 실제로 그러한 많은 점 들의 집합 인 곡선에 대해 이야기 해 봅시다 .

0 일 0 팔로워, 1 일 50 팔로어… 10 일 76 팔로워 ... 100 일 500 팔로어… 등과 같은 데이터를 수집합니다. 이 데이터를 점 (0, 0) (1, 50)… (10, 76)… (100, 500) ... 그래프의 점으로 연결하면 곡선이 생깁니다.

따라서 곡선의 경우 점이 필요하고 점의 경우 해당 x 및 y 값이 필요합니다. 따라서 이제 여기에서 세심한주의를 기울이십시오. 곡선은 우리를 위해 x 및 또는 y 값을 뱉어 낼 수있는 것으로 고유하게 표현 될 수 있습니다. 그“무언가”는 우리가 수학에서 함수 라고 부르는 것입니다 .

수학에는 많은 표준 함수가 있습니다. 사인 함수를 고려하십시오 .

이와 같은 함수에서 x의 선택은 우리의 것입니다. 우리는 그에게 줄 X를 가 우리에게 제공, y로 . 그리고 함께 우리는 점 (x, y)을 형성합니다. 우리는 또 다른 x를 주면 또 다른 y가 주어집니다. 그래서 우리는 점들의 집합으로 끝나고 그것들을 플로팅하고 독특한 모양을 얻습니다.

함수는 파라 메트릭 형식 으로 표현 될 수도 있습니다 . 파라 메트릭 형식에서는 이전 예제에서 (x)처럼 점 좌표의 일부를 제공 할 필요가 없습니다. 대신 우리는 일반적으로 t로 쓰여진 매개 변수 / 변수를 제공하고 모든 t에 대해 xy 좌표를 모두 얻 습니다. 간단히 말해서 t 를 제공하면 점을 얻습니다.

베 지어 곡선 뒤에있는 수학에 대해 이야기 할 때 매개 변수 형식이 무엇인지 알고 싶을 것입니다.

베 지어 곡선

베 지어 곡선은 매우 특별한 곡선입니다. 수학과 그 뒤에 숨은 아이디어가 나를 날려 버렸고 당신도 날아갈 준비를해야합니다.

이 글을 읽고 계시기 때문에 저는 당신이 디자이너 또는 개발자라고 가정하고 이전에 베 지어 곡선, 특히 큐빅 베 지어 곡선을 다뤘다 고 가정합니다. 이제 이러한 곡선은 제어 가 매우 쉽기 때문에 벡터 그래픽, 애니메이션 경로, 애니메이션 여유 곡선 등을 만들기 위해 다양한 위치에서 사용됩니다 . 수학을 많이 알 필요는 없으며, 이러한 곡선을 마음대로 구부리기 위해 전혀 알 필요가 없습니다. 베 지어 곡선이 존재하지 않았고 사람들이 예를 들어 글꼴과 같은 벡터 그래픽을 그리기 위해 곡선에 대한 고유 한 수학적 함수를 생각해 내야 만했다고 생각해보십시오.

수학?

좋습니다. 수학 시간입니다. 베 지어 곡선에 대한 일반 공식부터 시작하겠습니다. 처음에는 상당히 힘들지만, 우리는 계속 진행할 것입니다.

“와! 우와! 우와! 아인슈타인!”. 잠깐, 클릭하지 마세요. 쉬워요, 봐요, 너무 화려하게 만들었어요?.

공식을 분해 해 보겠습니다. 이미 알고있는 부분은 건너 뛸 수 있습니다.

B (t)

B는 그것은 때문에 B의 ezier 곡선. 파라 메트릭 형태의 곡선에 대한 기사에서 앞서 언급했듯이 t 는 매개 변수입니다. t를 꽂으면 xy 가 나온다 . 위의 방정식이 어떻게 작동하는지 곧 알게 될 것입니다. 여기에서 Bezier 곡선의 경우 t 값은 모두 포함 된 0과 1 사이 여야한다는 점을 언급하는 것이 좋습니다 .

Σ / 시그마

수학에서이 기호 Σ를 합산 연산자라고합니다. 작동 방식은 다음과 같습니다.이 기호의 오른쪽에는 변수 i가있는 표현식이 있으며 i는 정수 값만 보유 할 수 있습니다. 기호의 상단과 하단에 i의 한계를 씁니다. i의 각 값에 대해 오른쪽에있는 표현식이 평가되고 i가 n에 도달 할 때까지 합계에 추가됩니다.

여기 예시들이 있습니다.

더 긴 것에 대한 짧은 표기법입니다.

알겠습니다. 시그마가 분명한 것 같습니다.

nCi

C 이곳은 순열과의 C이다 C ombinations. 즉흥적으로 콤비네이션 레슨을합시다. 이제 공식에서이 부분을 이항 계수라고합니다. nCi를 읽는 방법은 다음과 같습니다. n i를 선택하십시오 . 즉, n 개의 항목이 얼마나 많은 방법으로 i 개의 항목을 선택할 수 있는지를 말합니다 (n은 항상 i보다 크거나 같음). 네, 그다지 이해가되지 않았을 수도 있습니다.이 예를 고려해보십시오. 원, 정사각형, 삼각형의 3 개 항목이 있습니다. 따라서 여기에서 n = 3. 3 중에서 2 (i = 2) 항목을 얼마나 많이 선택할 수 있습니까? 답은 3입니다.

비슷하게,

그리고 i가 0 일 때, n, 1 중에서 0 개 항목을 선택하는 한 가지 방법이 있습니다.

스케치를 그리고 주어진 조합 식에 대한 답을 찾는 대신이 일반화 된 공식이 있습니다.

P sub i

이것은 중요한 부분입니다. 베 지어 곡선의 일반 공식에는 t, i 및 n이 있습니다. 우리는 n이 무엇인지 실제로 다루지 않았습니다. n은 베 지어 곡선의 정도라고하는 것입니다. n은 베 지어 곡선이 선형인지, 2 차 또는 3 차인지 또는 다른 것인지를 결정합니다.

이전에 펜 도구를 사용한 적이 있다면 두 개의 다른 위치를 클릭하여 두 개의 다른 점을 만든 다음 핸들을 사용하여 두 점 사이에 형성되는 곡선을 제어합니다. 베 지어 곡선에는 항상 두 개 이상의 앵커 포인트가 있으며 나머지는 곡선의 모양을 제어하는 ​​데 사용되는 제어 포인트입니다. 또한 핸들이라고 부르는 것은 선으로 앵커 포인트에 연결된 제어점 일 뿐이며 더 나은 멘탈 모델을 제공하기 위해 존재합니다. 따라서 핸들을 조정할 때 실제로는 제어점의 좌표를 변경하는 것입니다.

모든 액세서리를 제거하고 핵심에 집중합시다.

위 이미지 에서 보이는 곡선은 3 차 베 지어 곡선입니다. 즉, 위에 표시된 베 지어 곡선의 각도는 3이거나, 베 지어 곡선의 일반 공식에서 n = 3을 연결합니다.

n = 1은 두 개의 앵커 포인트 P0과 P1이 있고 제어점이없는 선형 베 지어 곡선을 제공하므로 본질적으로 직선이됩니다.

n = 2는 두 개의 앵커 포인트 P0 및 P2와 하나의 제어 포인트 P1이있는 2 차 베 지어 곡선을 제공합니다.

마찬가지로 n = 3은 두 개의 앵커 포인트 P0 및 P3와 두 개의 제어 포인트 P1 및 P2가있는 큐빅 베 지어 곡선을 제공합니다. n이 높을수록 더 복잡한 모양을 그릴 수 있습니다.

이제 우리는 일반 방정식에서 n = 3을 대체하는 것을 포함하는 Cubic Bezier 곡선의 방정식을 일반 방정식으로부터 형성 할 것입니다. 우리가 얻을 방정식 은 앞서 언급했듯이 값이 0과 1 사이의 변수 인 변수 t 에있을 것입니다 . 또한 방정식의 경우 4 Pis (읽기 : Pee eyes) P0, P1, P2 및 P3이 필요합니다. 이 점의 선택은 우리에게 달려 있습니다. 결국 벡터 그래픽을 그릴 때 펜 도구를 사용하여 앵커 포인트의 위치를 ​​선택하고 제어점을 선택하지 않습니까? 변경 후 Cubic Bezier 곡선에 대한 방정식은 다음과 같습니다.

우리는 여기서 약간의 간결함을 사용하고 있습니다. 실제로 각 점 (P)에는 두 개의 좌표 x와 y가 있으며 또한 t를 일반 방정식에 전달할 때 x 및 y 좌표도있는 점을 가져야합니다. 따라서 위의 방정식을 다음과 같이 쓸 수 있습니다.

이 방정식에 대해 매우 특별한 것을 목격하려고합니다.

요약하자면, 언급 된 방정식은 0에서 1 사이의 값을 보유 할 수 있는 매개 변수 t 가있는 베 지어 곡선의 매개 변수 형식입니다. 곡선은 점의 모음입니다. B에 전달하는 고유 한 각 t 는 전체 베 지어 곡선을 구성하는 고유 한 점을 제공합니다.

방정식에 대한 마술적인 점은 t = 0, B (0) = P0이고 t = 1 일 때 B (1) = P3이므로 t, 0 및 1의 극단 값은 물론 앵커 포인트 인 곡선입니다. 이는 n 차 B (0) = P0 및 B (1) = Pn의 곡선에 대한 3 차 베 지어 곡선에만 해당되지 않습니다.

0과 1 사이 의 다른 t 값 (예 : 위 그림에서 t = 0.2)에 대해 곡선을 구성하는 점을 얻습니다.

전체 방정식은 Pis (Pee eyes)의 위치에 따라 다르기 때문에 위치를 변경하면 곡선의 모양이 변경됩니다. 이것이 베 지어 곡선이 작동하는 방식입니다.

이제 베 지어 곡선 뒤에있는 수학을 알았으니이 지식을 활용 해 보겠습니다.

큐빅 베 지어 곡선을 렌더링하는 간단한 JavaScript 프로그램을 만들었습니다. 모든 UI 코드에서 로직이 사라지는 것을 원하지 않았고 게으 르기 때문에 상호 작용할 UI가 없습니다. 그러나 그것이 당신이 그것과 상호 작용할 수 없다는 것을 의미하지는 않습니다 :).

받아들이 기엔 너무 많았나요? 우리는 커브가 무엇인지 정의하는 것으로 시작했고, 거기에서 점으로 이동했고, 그것이 커브의 빌딩 블록이되는 방법을 설명했습니다. 그런 다음 베 지어 곡선을 살펴보고 수학을 이해하여 베 지어 곡선을 위로 만드는 점을 찾았습니다. 나는 당신이 무언가를 배우고이 기사를 읽기 시작했을 때보 다 더 현명하게 떠나기를 바랍니다.

작은 맞춤 Cubic Bezier 엔진의 코드는이 GitHub 저장소에서 찾을 수 있습니다.

업데이트 : 생성기는 이제 큐빅 베 지어 곡선뿐만 아니라 모든 각도의 베 지어 곡선을 생성 할 수 있습니다. :).

더 많은 것을 찾고 계십니까? nashvail.me의 블로그에 정기적으로 게시합니다. 거기에서 뵙겠습니다.