【基本-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 % ベジエ曲線を描く

【オペレータの説明】

x1 y1 x2 y2 x3 y3 curveto絶対座標でベジエ3次曲線を描く。 四角形の線分の長さ(サンプルの赤線)は各端点におけるパスのベロシティを表しています。
ベロシティとは方向性を持った強弱の度合いです。
dx1 dy1 dx2 dy2 dx3 dy3 rcurveto相対座標でベジエ3次曲線を描く。relative curvetoの略。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次