>  기사  >  웹 프론트엔드  >  베지어 곡선을 간단히 이해해 보세요.

베지어 곡선을 간단히 이해해 보세요.

王林
王林원래의
2024-08-16 11:04:02579검색

직선, 타원, 원만 사용할 수 있다면 부드러운 선과 복잡한 외관을 갖춘 자동차를 디자인하는 것이 어렵지 않을까요?

1962년 프랑스 엔지니어 피에르 베지에(Pierre Bézier)가 처음에 자동차 본체 디자인에 사용했던 베지어 곡선을 발표했습니다.

Simply understanding Bézier curves.

베지어 곡선은 일련의 제어점을 통해 부드러운 곡선을 정의할 수 있습니다. 곡선은 항상 첫 번째 제어점과 마지막 제어점을 통과하며 중간 제어점의 모양에 영향을 받습니다. 또한 베지어 곡선은 볼록 껍질의 특성을 가지고 있습니다.

베지어 곡선은 애니메이션, 글꼴 디자인, 산업 디자인 등 컴퓨터 그래픽과 이미지 모델링에 널리 사용됩니다.

공식

Simply understanding Bézier curves.

이해해 봅시다.

P(t)는 곡선의 t 지점을 나타냅니다(t는 분수이며 값은 0부터 1까지입니다). t에서 곡선 위의 점은 무엇입니까? 일반적인 곡선 설명은 다음과 같습니다: y = f(x). 지금은 P(t)를 f(x)로 이해하겠습니다. 차이점은 P(t)가 파라메트릭 표현(그리고 계산 결과는 [x, y]와 같은 "벡터"임)이라는 점인데, 이에 대해서는 나중에 자세히 설명하겠습니다.

다음으로 Pi는 i번째 제어점(i는 0부터 시작)을 나타냅니다. 위 그림을 예로 들면 P0, P1, P2, P3의 4개 제어점이 있습니다. 수식의 n은 제어점의 마지막 인덱스, 즉 n = 3입니다(제어점의 개수가 아니라 개수에서 1을 뺀 값이라는 점에 유의하세요).

Bi,n(t)는 기저 함수라고도 알려진 Bernstein 기저 함수입니다. 각각의 특정 (i, n)에 대해 이에 해당하는 서로 다른 기본 함수가 있습니다. 가중 관점에서 이해한다면, 기저 함수를 t 위치의 곡선 좌표에 대한 i번째 제어점 Pi의 "기여도"를 나타내는 가중치 함수로 간주할 수 있습니다.

기본함수 공식은 다음과 같습니다.

Simply understanding Bézier curves.

(ni)binom{n}{i} (나는n ) 조합수(n 중에서 i를 선택하는 방법은 몇 가지입니까?)입니다. 기저 함수가 왜 이렇게 생겼는지는 De Casteljau 알고리즘과 연관지어 보면 알 수 있습니다(본문 뒷부분 참조)

P(t) 공식으로 돌아가서, =0nsum_{i=0}^{n} i=0n 는 후속 부분( Bi,n(t)i B_{i,n}(t) cdot P_iBi,n(t) ⋅i )는 i=0에서 i=n까지 합산됩니다.

위 그림을 예로 들어 P(0.1)를 계산한다고 가정하면 어떻게 해야 할까요? 다음과 같이 확장됩니다:

Simply understanding Bézier curves.

Simply understanding Bézier curves.

t=0.1을 사용하여 다음을 얻습니다.

Simply understanding Bézier curves.

곡선의 파라메트릭 표현

한 네티즌의 글을 직접 인용합니다(링크)

Simply understanding Bézier curves.

위 공식에 집중해 보겠습니다.

위 그림에서 볼 수 있듯이, 우리에게 익숙한 직선은 또 다른 관점에서 이해될 수 있습니다: t(즉, 점 P에서 알려진 점(x0,y0)까지의 |AP|의 길이)를 사용하면, 그러면 위의 삼각함수를 통해 점 P를 결정할 수 있습니다.

더 일반적으로는 다음과 같이 쓸 수 있습니다.

Simply understanding Bézier curves.

여기서 P0은 벡터 [x0,y0]이고 v도 벡터입니다. 더하면 P(t)는 벡터 [x,y]가 됩니다.

원을 다시 보면:

Simply understanding Bézier curves.

다이어그램에 표시된 것처럼 원은 중심이 알려진 것으로 볼 수 있으며 원의 모든 점은 회전 각도와 반경에 의해 결정됩니다. 다음과 같이 쓸 수도 있습니다:

Simply understanding Bézier curves.

파라메트릭 방정식은 기하학적 불변성을 유지하며 원과 같은 모양을 나타낼 수 있습니다(여기서 하나의 x는 여러 y 값에 해당함).

드 카스텔자우

De Casteljau 알고리즘은 그리기 및 기타 작업을 위한 베지어 곡선을 평가하고 근사화하기 위해 실제 응용 프로그램에서 사용되는 방법입니다. 기존의 정의 기반 평가 방법에 비해 속도와 안정성이 향상되었으며 베지어 곡선의 특성에 더 가깝습니다.

여기서는 link1과 link2라는 두 개의 기사를 참고합니다

먼저 다음과 같이 정의됩니다.

Simply understanding Bézier curves.

위의 β를 보세요. 위 첨자와 아래 첨자가 약간 혼동스럽습니다. 이해를 위해 다음 삼각 재귀를 사용할 수 있습니다.

Simply understanding Bézier curves.

위 그림에서 삼각형의 빨간색 모서리는 t0으로 나눈 두 세그먼트의 제어점입니다. t0, P(t0)(즉, β0(n)beta_0^{(n)} β 0(n) ), 두 곡선의 제어점은 다음 그림을 참조할 수 있습니다.

Simply understanding Bézier curves.

위 그림은 t=0.5일 때 다양한 점 사이의 관계를 보여줍니다.

'보간'의 관점에서 계산 과정은 다음과 같이 이해될 수도 있습니다.

  1. 각 인접 제어점 쌍의 중간점 찾기(t=0.5이기 때문에), 즉 b01, b11, b21(표기법을 용서해주세요. LaTeX로 작성하는 것은 너무 번거롭습니다)
  2. b01−b11에서 중점 b02를 찾고, b11-b21에서 중점 b12를 찾습니다
  3. b02−b12에서 중간점 b03을 찾습니다. ​ 사실 드 카스텔자우 알고리즘의 핵심은 보간과 반복입니다.

De Casteljau를 기반으로 한 곡선 그리기

현재 2가지 방법이 관찰되고 있습니다.

한 가지 방법은 작은 단계 증분으로 t를 0에서 1로 이동하는 것입니다(예: 0.01). P(t)를 찾을 때마다 재귀 공식을 사용하여 다음을 결정합니다. β0(n)beta_0^{(n)} β 0(n) .

다른 방법은 P(t=0.5)를 구한 다음 두 개의 분할된 곡선에 대해 각각 P(t=0.5)를 구하는 것입니다... 이 세분화는 곡선이 근사될 때까지 계속됩니다.

구현

연습도 안 하고 보기만 하면 늘 비현실적이네요.

그래서 곡선 그리기를 위한 구현 코드를 직접 작성하고 이를 툴킷으로 정리했습니다: Compilelife의 툴킷

해당 핵심코드는 여기

위 내용은 베지어 곡선을 간단히 이해해 보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.