ベジエのつづき

急に寒さが戻ってくると体調を崩してしまいがちです。今日もほら、鼻水がw
まあ、それはおいておいて、しつこいようですが今日もベジエ曲線です。
今回は、scriptからellipseを使わず先日のファンクションを利用して半径1単位の正円を描いてみます。円ですから1/4の円弧をミラー処理して生成できますのでこの円弧を正確に生成する事から考えましょう。

B(t) = (1-t)²P0 + 2t(1-t)P1 + t²P2 (0<=t<=1)

上記の3次のやつを使います。

enko.png

円弧の中央の点(1/2)について、
斜辺^2=垂辺^2+底辺^2で、中点自体はy=xの直線上に存在しますから

r^2=x^2+y^2=2x^2

となります。r=1ですから、

x=(√2)/2

となるわけです。これはB(1/2)にあたります。
ではあてはめていきます。ちなみにx軸に付いて処理しますね。

B(1/2) = 1/8P0 + 3/8P1 + 3/8P2 + 1/8P3 = (√2)/2

P0=0, P2=P3=1

3/8P1 + 3/8 + 1/8 = (√2)/2

3/8P1 + 4/8 = (√2)/2

3/4P1 + 4/4 = (√2)

3/4P1 + 1 = (√2)

3/4P1 =(√2)-1

P1 = 4((√2)-1)/3

ということで、rightDirectionの座標1単位100ptで計算すると

55.2284749830794

となります。
では円弧を描いてみましょう。

var lnColor = new GrayColor;
lnColor.gray = 100;

var ln = app.activeDocument.pathItems.add ();
ln.stroke = true;
ln.strokeColor = lnColor;
ln.strokeWidth = 0.3;
ln.filled =false;

var pt = ln.pathPoints.add()
pt.anchor = Array(0, 100);
pt.rightDirection = Array((((Math.sqrt (2)-1)/3*4)*100), 100);
pt = ln.pathPoints.add();
pt.anchor = Array(100, 0);
pt.leftDirection = Array(100, (((Math.sqrt (2)-1)/3*4)*100));

次に以下のスクリプトで数値を確認します。

alert ( app.activeDocument.pathItems[0].pathPoints[0].rightDirection);

結果は…

55.228515625,100

計算した数値と違いますね…
次に生成した曲線を保存してみましょう。贅肉をそぎ落としたファイル内容は下のようなモノ。

%!PS-Adobe-3.0
%%Creator: Adobe Illustrator(R) 15.0
%%AI8_CreatorVersion: 15.0.2
%%For: (********) ()
%%Title: (bezier_test.ai)
%%CreationDate: **/**/** **:**
%%Canvassize: 16383
%%BoundingBox: 0 0 101 101
%%HiResBoundingBox: 0 0 100.1499 100.1499
%%DocumentProcessColors: Black
%AI5_FileFormat 11.0
%AI12_BuildNumber: 399
%AI3_ColorUsage: Color
%AI7_ImageSettings: 0
%%CMYKProcessColor: 1 1 1 1 ([レジストレーション])
%AI3_Cropmarks: 0 -841.8896 595.2803 0
%AI3_TemplateBox: 298.5 -421.5 298.5 -421.5
%AI3_TileBox: 18.1401 -800.9453 577.1406 -17.9448
%AI3_DocumentPreview: None
%AI5_ArtSize: 14400 14400
%AI5_RulerUnits: 1
%AI9_ColorModel: 2
%AI5_ArtFlags: 0 0 0 1 0 0 1 0 0
%AI5_TargetResolution: 800
%AI5_NumLayers: 1
%AI9_OpenToView: -947 70 1 1369 970 18 0 0 43 96 0 0 0 1 1 0 1 1 0 1
%AI5_OpenViewLayers: 7
%%PageOrigin:-8 -817
%AI7_GridSettings: 28.3465 10 28.3465 10 1 0 0.8 0.8 0.8 0.9 0.9 0.9
%AI9_Flatten: 1
%AI12_CMSettings: 00.MS
%%EndComments
%%BeginProlog
%%EndProlog
%%BeginSetup
%%EndSetup
%AI5_BeginLayer
1 1 1 1 0 0 1 0 79 128 255 0 50 0 Lb
(レイヤー 1) Ln
%_/ArtDictionary :
%_/XMLUID : (レイヤー_1) ; (AI10_ArtUID) ,
%_;
%_
0 A
0 Xw
0 R
0 G
0 1 0 0 0 Xy
0 J 0 j 0.3 w 10 M []0 d
0 XR
0 100 m
55.2285 100 100 55.2285 100 0 C
S
LB
%AI5_EndLayer–
%%PageTrailer
gsave annotatepage grestore showpage
%%Trailer
%%EOF

mオペレータで基準点を(0,100)に移動してCオペーレータによって曲線を生成しています。Cオペレータのパラメータは予測がつくとは思いますが、頭からdirection1(x,y)、direction2(x,y)、anchor(x,y)となっています。3次ベジエ曲線のP1〜P3に相当するものです。P0はmオペレータの引数が相当します。
ご覧の通りパラメータは小数第4位までしか存在しません。見事にラウンドされている訳ですが、この状態のファイルを(テキストエディタで)保存して再度開いてみましょう。
次にスクリプトを走らせて確認します。

alert(app.activeDocument.pathItems[0].pathPoints[0].rightDirection);

結果は

55.228515625

5桁目以降は何処から来たのでしょうか?
まあ、出力機の解像度2400dpiでの1ドットは0.01mm程度ですから、picoオーダーの事はどうでも良いってのはあるんですがね。
…円弧で終わってるな、まあいいか。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中