【基本-12】ベジエ曲線について

3次ベジエ曲線は始点(x0,y0)、始点の制御点(x1,y1)、終点の制御点(x2,y2)、終点(x3,y3)の4つの点で定義されます。
Adobe Illustratorなら制御点がビジュアルに操作できるので簡単ですが、手書きプログラムでは制御点をどこに置けば、求める曲線が得られるのかは難しいのでトライアンドエラーで置いていくしかありません。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
%!PS-Adobe-3.0 EPSF-3.0

%%BoundingBox: 0 0 240 240

%!PS-Adobe-3.0 EPSF-3.0

%%BoundingBox: 0 0 240 240

%%Title:ベジエ曲線

% 参考の赤い線・文字等は省略



/a { -100 0 } def % 開始点

/b { -100 100 } def % 制御点

/c { 100 100 } def % 制御点

/d { 100 0 } def % 終了点



/DeviceRGB setcolorspace % 色空間設定

0 0 0 setcolor  % 黒

0 0 240 240 rectstroke % 黒枠で囲む

120 120 translate % 座標の原点を中央に移動



newpath % パスの初期化

2 setlinewidth % 線幅2ポイント

a moveto % 始点をaに置く

b c d  curveto  stroke % ベジエ曲線を描く

1
2
3
4
5
% ベジエ曲線2

/a { -100 0 } def % 開始点 (x0,y0)

/b { 30 100 } def % 制御点 (x1,y1)

/c { 80 80 } def % 制御点 (x2,y2) 

/d { 100 0 } def % 終了点 (x2,y2)

1
2
3
4
5
% ベジエ曲線3

/a { -100 0 } def % 開始点 (x0,y0)

/b { 0 100 } def % 制御点 (x1,y1)

/c { 0 -100 } def % 制御点 (x2,y2)

/d { 100 0 } def % 終了点 (x3,y3)

1
2
3
4
5
% ベジエ曲線4

/a { -50 0 } def % 開始点(x0,y0)

/b { 70 100 } def % 制御点(x1,y1)

/c { -70 100 } def % 制御点 (x2,y2)

/d { 50 0 } def % 終了点 (x3,y3)

Adobe Illustratorの円もベジエ曲線の近似円です。
Illustratorで制御点を測ったら0.5525あたりまでは分かったのですが、正確ではないため
円の制御点の近似値については下記のサイトを参考にしました。

A Primer on Bézier Curves

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
%!PS-Adobe-3.0 EPSF-3.0

%%BoundingBox: 0 0 240 240

%%Title:ベジエ曲線で円を描く



/s 0.55228 def  % 円の制御点の近似値

/r 100 def % 円の半径

/ctp { r s mul } def % 制御点の長さ 半径× 近似点値

/a { r neg  0 } def % 開始点

/b { r neg  ctp} def  % 制御点

/c { ctp neg  r } def  % 制御点

/d { 0  r } def % 終了点

/e { ctp  r } def

/f { r  ctp } def

/g { r  0 } def

/h { r  ctp neg } def

/i { ctp  r neg } def

/j { 0  r neg } def

/k { ctp neg  r neg } def

/l { r neg   ctp neg } def



/DeviceRGB setcolorspace % 色空間設定

0 0 0 setcolor  % 黒

0 0 240 240 rectstroke % 黒枠で囲む

120 120 translate % 座標の原点を中央に移動



newpath % パスの初期化

2 setlinewidth 線幅2ポイント

a moveto % 始点をaに置く

b c d  curveto % 左上の円弧（1/4円）

e f g curveto % 右上の円弧

h i j curveto % 右下の円弧

k l a curveto % 左下の円弧

closepath % 線を繋ぐ

stroke % ベジエ曲線を描く

【オペレータの説明】