곡선형 도형 변환 - 1. Bezier 곡선 소개

Powerpoint에 삽입되는 도형은 벡터 이미지이며, 그림을 확대하더라도 높은 해상도를 유지할 수 있습니다. 따라서, JPG나 PNG 파일과 같은 그림 파일과 달리 고품질 이미지를 생성할 수 있으면서도 저장 용량이 많이 줄어드는 장점이 있습니다.

직선을 정의하기 위해서는 두 점의 위치만 지정해주고 이들을 연결하도록 선을 그어줄 수 있습니다. 곡선의 경우, 곡선 위의 모든 점에 대한 정보를 갖고 있는 것이 아니라, 특별한 규칙을 따라 선을 그릴 수 있는 정보만 갖고 있습니다.

Powerpoint에서는 Bezier 곡선을 사용하여 곡선을 그립니다. 엄밀히 말하면, B-Spline 곡선으로 연속된 곡선을 그리는 것이며, spline 곡선의 각 segment가 Bezier 곡선으로 구성된다고 생각하시면 되겠습니다. 따라서, Bezier 곡선이 어떻게 그려지는지를 알게 되면, 곡선을 보다 자유롭게 처리할 수 있습니다.

Bezier 곡선은 벡터 그래픽에서 사용되는 기본적인 곡선으로 사용되는데, 폰트 크기를 키우더라도 가장자리가 매끈하게 보이는 글꼴을 디자인할 때에도 사용되며, 그 용도에 따라 3차, 4차, 5차... Bezier 곡선을 사용할 수 있습니다. Powerpoint에서 곡선을 그리기 위해서는 반드시 4개의 점이 필요합니다. 즉 2개의 end point와 2개의 control point로 구성이 되며, 이 점들에 대한 정보를 일련의 숫자 배열로 가지고 있습니다.

한편, powerpoint에서 선을 그리다보면, 직선 구간과 곡선 구간이 혼합되어 있는 경우도 있습니다. 이때에는 각 구간(Segment)를 직선형인지, 곡선형인지 속성을 지정해두게 되는데, shape.Vertices로 추출한 점들의 위치 정보만으로는 직선, 곡선을 구분할 수 없고 shape.Nodes(i).SegmentType 속성을 확인해야 합니다. 만약, 각 선 구간을 곡선형 혹은 직선형으로 변경하고자 한다면, shape.Nodes.SetSegmentType이라는 method로 특정 segment의 속성 변경도 가능합니다.

문제는 각 segment의 속성을 변경하게 되면, Cotrol point의 위치는 powerpoint에서 자동으로 계산해서 변경해버리는데, 사용자가 원하는 위치로 변경되지 않기 때문에 수동으로 조절해야할 뿐만 아니라, node 수가 많아질수록 기하급수적으로 실행 속도가 느려집니다. 또한, control point를 원하는 위치로 배열시켜서 매끄러운 도형으로 변경하기 위해서는 결국 control point를 일일이 수작업으로 고쳐주어야 하는데, 이 작업이 매우 번거롭고, 원하는대로 잘 조절이 되지 않습니다. 따라서, 매크로를 이용하여 control point를 변경하기 위해서는 현재 지정된 end point들로부터 control point 위치를 어떻게 계산할 것인지에 대한 문제가 발생됩니다.

이러한 작업을 위해서는 Bezier 곡선에 대한 정확한 계산식을 이해할 필요가 있습니다. Cubic Bezier 곡선식은 3차 매개함수이긴 하나, 식보다는 그림으로 이해하는 것이 훨씬 도움이 됩니다. 아래에 Powerpoint에서 사용되는 Cubic Bezier curve를 작도하는 방법입니다.

P1과 P4는 End Point이며, 그 사이에 2개의 Control Point P2, P3를 삽입해둡니다. 이렇게 4개의 점이 정의되면, P1과 P4를 연결하는 선은 처음에는 P2를 향하는 선으로 시작해서, 점점 P3쪽으로 꺾였다가, 마지막에는 P4에 도착하는 곡선(검은선)을 생성시키게 됩니다.

도형을 선택한 상태에서 마우스 오른쪽 버튼을 눌러 '점 편집'으로 들어가게 되면, P1과 P4는 곡선상에 찍혀있는 점에 해당하고, P2와 P3는 P1이나 P4를 클릭했을 때 곡선의 모양을 변경할 수 있도록 나타나는 직선의 끝점에 해당합니다.

도형 삽입 템플릿 중 '곡선'을 삽입하게 되면, 사용자가 마우스로 클릭을 할 때마다 곡선을 그리기 위한 점들(end point)이 찍히고, 점들을 찍어나가다 보면 곡선의 모양이 계속 바뀌면서 최대한 매끄러운 곡선이 되도록 변경되는 것을 알 수 있습니다.

만약, 임의의 점들에 대한 정보를 입력해두고, 이 점들을 매끄러운 곡선으로 연결시킬 수 있다면, 다양한 도형을 만들 수 있을 것입니다. 예를 들면, 아래와 같이 Sin 곡선을 만들기 위해 몇 개의 점만 계산하고 나서 직선으로 연결하게 되면, 매끄러운 곡선이 만들어지지 않지만, 이들을 Bezier 곡선으로 변환시키게 되면 오른쪽 그림과 같이 부드러운 Sin 곡선으로 바뀌게 됩니다. 또한, 4각형 모양의 선을 연결한 후 적절하게 control point를 삽입해서 곡선으로 변환하면 나선형 곡선을 얻을 수도 있습니다.

이와 같이 몇 개의 End point 위치를 계산하여 배치시킨 후, 적절한 방법으로 Control point를 삽입해주는 것만으로도 많은 형태의 도형을 생성시킬 수 있습니다. 또한, End point는 계산할 필요없이 자유형 도형을 마우스로 클릭해서 적절하게 배치시킬 수도 있고, 도형 템플릿에 있는 다각형 도형을 조합하거나, 이전글에서 소개해드린 바와 같이 몇 개의 직선을 배치시킨 후 '곡선 결합하기'를 이용하여 원하는 도형이 되도록 End point를 배치시킬 수도 있습니다.

다음 글에서는 이렇게 배열된 End point 위치로부터 Control point를 계산하는 방법들을 소개해드리고자 합니다.