곡선형 도형 변환 - 2. Powerpoint에서 사용되는 Bezier 곡선과 B-Spline

Bezier 곡선에 대해 조금만 더 부연설명드리려고 합니다. Bezier 곡선은 시작점(P1)과 출발 방향을 조절하는 1번 제어점 (P2), 도착점(P4)과 도착 방향을 조절하는 2번 제어점(P3)으로 구성됩니다. P1~P4가 결정되면, 이들 점 사이를 연결하는 곡선은 3차 식으로 표현할 수 있으며, (X,Y)는 0~1까지 연속으로 변하는 매개변수로 표현되며, (X, Y) = (1-t)^3*P1+P2*3*(1-t)^2*t+P3*3*(1-t)*t^3+P4*t^3 식으로 나타냅니다. 

출발점 P1에서 처음 출발하는 방향은 P1-P2를 연결하는 직선과 평행한 방향이며, P4에 도착하는 방향은 P3-P4를 연결하는 선과 평행한 방향입니다. 따라서, P4 다음에 P3-P4와 반대 방향의 위치에 새로운 control point를 두면 P4는 매끄러운 곡선으로 연결됩니다.

P1~P4 곡선 상의 임의 위치를 구하고 싶다면, t 값을 0~1 사이의 값을 넣어 계산하면 됩니다만, t값이 등간격이라 하더라도, 곡선상의 점 간격은 다른 값을 가집니다. 위의 그림에서 빨간 색 점들은 t값이 0~1까지 0.1씩 증가시켜서 생성된 점의 위치이며, 시작점과 끝점에서는 간격이 넓지만, 중간 부분은 간격이 좁아지는 것을 볼 수 있습니다.

이러한 경향은 P1-P2 길이, P2-P3 길이, P3-P4 길이에 따라 경향이 달라집니다. 만약, P1, P2, P3, P4가 일직선 상에 있다면, 생성된 Bezier 곡선도 직선으로 나타나게 됩니다만, P2, P3의 위치를 다르게 두었을 때 t에 따라 곡선상의 점들의 간격은 아래와 같이 달라집니다.

만약, P1, P2, P3, P4의 간격이 동일한 경우(C/L=1/3), t값이 등간격이라면 직선상의 점들의 간격도 등간격이 됩니다. 그러나, P1-P2, P3-P4 간격이 좁고, P2-P3 간격이 넓다면, 중앙 부분의 점들이 넓어지고, 반대로, P2-P3 간격이 넓어지면, 점들의 간격도 넓어지게 됩니다. 또한, 아래 그림과 같이, 각 점들이 직선에 있지 않은 곡선이라 해도 마찬가지 경향을 가집니다. 뿐만 아니라, 그림에서 확인되는 것처럼 End point-Cotrol Point 간 거리가 멀어질수록, 곡선은 크게 꺽인 형태로 변하며, Control point 길이가 짧아질수록 P1-P4를 연결하는 직선에 가까워지는 것을 알 수 있습니다.

Powerpoint에서 그리는 곡선은 단일한 Bezier 곡선이 아니라, Bezier 곡선이 연결된 B-Spline입니다. 여러개의 Bezier 곡선이 end point를 공유하면서 연결되어있다고 생각하시면 되는데, 단일 Bezier 곡선 구간을 Segment라고 하고, 각 segment를 연결하는 점을 knot이라고 표현합니다. 그러나 powerpoint 매크로를 작성할 때에 knot이라는 속성은 없고, 'Nodes'라는 속성으로 표현됩니다.

곡선 구간의 경우에는 1개 segment를 표현할 때, 양끝의 End point에 해당하는 2개의 knot과 곡선의 모양을 결정하는 2개의 control point로 표현이 됩니다. 그러나, 직선 구간의 segment는 segment 자체를 직선 구간으로 정의한 후, 2개의 knot만 지정해줍니다.

한편, msoFreedom 속성을 가진 도형에서 Shape.Vertices 속성에 knot과 contol point가 일련의 배열로 저장되어 있는데, 직선과 곡선 구간이 섞여있다면 Segment의 특성을 확인하지 않으면 Vertices 배열만으로는 곡선 구간인지, 직선 구간인지 구분할 수 없습니다. 

• 곡선형 Vertices : K1 - CP2 - CP3 - K4 - CP5 - CP6 - K7 - ... 
• 직선형 Vertices : K1 - K2 - K3 - K4 - ...
• 혼합형 Vertices : K1 - CP2 - CP3 - K4 - K5 - CP6 - CP7 - K8 - ...

따라서, 이전 글에서 GetVertices 함수를 만들어, knot만 추출하거나, 직선 구간에도 control point를 강제로 삽입하여 모든 구간을 곡선화하도록 했던 것입니다.

Powerpoint에서 Knot 또는 End point는 도형 템플릿 중 자유 곡선 그리기로 그릴 때 마우스로 클릭하는 점이 되며, 다각형 도형 등으로 그릴 때에는 꼭지점들에 해당하는 점이 됩니다. Control point는 powerpoint에서 자동으로 계산해주며, 굳이 변경하고자 한다면, 도형을 선택한 상태에서 마우스 오른쪽 버튼을 클릭하여 '점 편집'을 선택하면 각 점들의 위치를 조절할 수 있습니다. 그러나, '점 편집'을 이용해서 도형 모양을 조절하는 것은 매우 번거로울 뿐만 아니라, 원하는대로 도형이 조절되지 않는다는 문제가 있습니다. 약간 세밀한 작업이 필요하다면 Powerpoint에서 그림 그리기는 포기하고 별도의 소프트웨어를 선택하게 됩니다.

만약, 도형의 Knot들만 적당히 조절한 상태에서 control point를 자동으로 조절해준다면 어떨까요? 기본적으로 Powerpoint에서는 곡선 그리기를 할 때, control point를 아래와 같은 방식으로 삽입해줍니다. K1, K2, K3에 마우스를 클릭해서 점을 찍게 되면, K2에 삽입되는 control point는 K1-K3를 연결하는 두 선과 나란하고, control point간 길이는 K1-K3 길이의 1/3이 되도록, 즉 Control point-K2 길이를 K1-K3 길이의 1/6이 되도록 2개의 control point를 삽입해줍니다. 만약, 연속해서 K4, K5, ... 를 그리게 되면 K3-K4-K5 위치, K4-K5-K6 위치로부터 각각 control point를 삽입해줍니다. 이때, K2 점의 control point는 K1과 K3의 위치에만 영향을 받고, K4 이후의 점들에는 영향받지 않습니다.

여러가지 도형을 그리다보면, Powerpoint에서 자동으로 계산해주는 control point보다는 새로운 방법으로 control point를 그리고 싶을 수 있습니다. 예를 들어, 위 그림의 아래쪽 예시와 같이, K2의 control point를 K1-K2-K3가 이루는 각도를 2분할한 방향에 수직선, 다시말해 K1→K2 방향과 K2→K3 방향이 거울 반사가 되도록 control point를 삽입해주는 방법입니다. 이렇게 하면, 오른쪽의 4개의 Knot을 입력했을 때, Powerpoint에서 자동으로 그려주는 것보다 K2, K3를 통과하는 곡선이 조금더 둥근 형태로 바뀌는 것을 알 수 있습니다.

이외에도, K1, K2, K3를 입력하면 K1, K2, K3를 통과하는 원이 되도록 control point를 삽입할 수도 있으며, 이러한 경우에는 knot을 통과하는 곡선이 더욱 둥근 형태가 될 수 있습니다.