イラレでもサインカーブなど数学的な曲線を描きたい!JSでできるじゃん!!

illustrator-sine-curve-top

(※2015-03-21追記:拡大してカクカクが気になる場合はトレースの力技と言っていましたが簡単にベジェかする方法が分かりましたんで追記しました!)

ど~も~、数学は好きだけど数学の成績はそれほどあまりよくなかった、なんちゃって理系男子の dice(@dice_dDtea)です。

曲線に強い、ベクター系最強画像ソフトであるAdobe Illustrator。通称“イラレ”。
イラレで使われている曲線ってのは「ベジェ曲線」と言って

ベジエ曲線とは、N 個の制御点から得られる N – 1 次曲線である。
出典: ベジェ曲線 – Wikipedia

・・・。なるほど、よくわからん!
とにかくハンドルをいじって曲線を制御します。
illustrator-sine-curve1
他にも曲線を描く手法としてスプライン曲線とか、
illustrator-sine-curve3
それの3DCG版ならNURBS(ナーブス)ってのがあります。
illustrator-sine-curve2
それぞれ曲線を描く計算式は違いますが、どんな曲線も描くことができます!

さて、正弦曲線~サインカーブを描きたい時ってどうするんだ?
結論から言えば
ベジェ曲線では正確なサインカーブは描けません

参考になる画像をおいて、トレースすればそれらしきものは見よう見まねで描けなくもないんですが、正確に、厳密に描けないですね。

数式を入力して曲線を描画できたらいいなぁ

そんな時、数式をブチ込んで描いてくれたらいいですよね?

3DCGだったら必ず何かしらスクリプトがあります、MAYA なら“MEL”とか“Python”だとか。
それ以外にもFLASHだったら“ActionScript”とか、
After Effects だって“エクスプレッション(JavaScript)”で数学的な制御ができます。

サマ・ウーマン

イラレにもそういうのあったらいいなぁ・・・、
・・・。

dice

AE(After Effects)だってJSが使えるんですから・・・、
当然同じAdobeなんだから・・・、

JavaScriptがイラレで使えます!

スポンサード リンク

イラレでもスクリプトを使って数学的な曲線を描こう

盲点でしたよ。
マクロみたいな便利機能をスクリプトでできるのは自覚してましたが・・・、

まさか、イラレでエクスプレッション的に数式で曲線を描こうなんて・・・。

イラレで(というかAdobe系共通か!?)スクリプトを使うには

メモ帳とか秀丸とかテキストエディタで
描きたい曲線の式をJavaScriptを書き、
illustrator-sine-curve4

拡張子を「.js」で保存。
illustrator-sine-curve5

イラレで、
ファイル > スクリプト > その他のスクリプト
illustrator-sine-curve6

先程作った.jsファイルを指定すればOK!

さて中身です。

サインカーブをイラレで描きたい

sinθ


w = 1;
h = 100; //波の高さ
step = 5;
startP = 0; //開始角度
endP = 360; //終了角度(1周期360、2周期なら720・・・。)
passData = [];
count = 0;
for (i=startP; i<=endP; i+=step){
	rad = i * Math.PI / 180; //度からラジアンへの変換
	y = Math.sin(rad) * h;
	x = i * w;
	passData[count++]= [x, y];
}
docObj = activeDocument;
pObj = docObj.pathItems.add();
pObj.setEntirePath(passData);
pObj.filled = false;
pObj.stroked = true;
pObj.strokeWidth = 3;

これを実行するとこんな感じ↓
illustrator-sine-curve7

参考記事:『クリエイター手抜きプロジェクト (Illustrator編)

他にも幾つかスクリプトはあったが、バラバラになってしまうものとかあって使いづらい、
これは「一つの線」なので扱いやすいと思います。

三角関数を扱う時頻出角度→ラジアン変換

角度ってのはそもそも、10進法ではなく60進法
というわけで、プログラミングでは角度は都合が悪く、そのまんま使えない。
なので10進法である ラジアン というものに変換してから三角関数に代入しないといけない。


【ラジアン】 = 【角度】 * Math.PI / 180;

サイクロイドをイラレで描きたい

サイクロイド、日本語では擺線(はいせん)って言うらしいよ。
円を転がして描く図形。
こんなの↓

Cycloid animated.gif
Cycloid animated“. Licensed under CC 表示-継承 3.0 via ウィキメディア・コモンズ.

たしかdiceは高3のときの微分積分辺りで習ったんだったっけ!?


r = 100; //半径
step = 5;
startP = 0; //開始角度
endP = 360; //終了角度(1周期360、2周期なら720・・・。)
passData = [];
count = 0;
for (i=startP; i<=endP; i+=step){
	rad = i * Math.PI / 180; //度からラジアンへの変換
	y = (1-Math.cos(rad)) * r;
	x = (rad-Math.sin(rad)) * r;
	passData[count++]= [x, y];
}
docObj = activeDocument;
pObj = docObj.pathItems.add();
pObj.setEntirePath(passData);
pObj.filled = false;
pObj.stroked = true;
pObj.strokeWidth = 3;

これを実行するとこんな感じ↓
illustrator-sine-curve8

前述のサインカーブのスクリプトをサイクロイド版に変換してみた。

ちなみに、「endP」を360ではなく4倍の「1440」としてみた結果・・・。

illustrator-sine-curve9
illustrator-sine-curve10
4周期ちゃんと繋がって一連の腺となってますね!

拡大すれば多角形ですが無問題

これらのスクリプトで生成された曲線は拡大すると実はカクカクです。
というわけでぶっちゃけ曲線ではなく直線の集合体。

使えないじゃん!

と思われますが、
実際にプロットしている制御点は、計算式に基づく正確な数字です。

思い出してください!
これって、デジタルの考えと全く同じなんで無問題なんです。

だって、
いくらベジェで描いても最終出力はモニターなんでモニター解像度のピクセルに変換され拡大すればカクカク。
印刷だってdpiがいくら大きくても、拡大しまくれば網点が見えます。
これがデジタルのからくりなんです。

荒さが嫌な人はプロットする点の数を増やしましょう。
「step」を減らせばいいんです。
但し制御点が増えるので重くなるという代償を払わなくてはなりませんが・・・。

 

カクカクを簡単にスムーズにする方法
(追記:2015-03-21)

おい、トレースは不要だぞ!!

2015-03-20 に頂いた visitor さんからのコメントにて有力な情報提供がありましたので試してみました!

まずは前述の手順でJSからサインカーブを生成します。
ai-sin-obj-simplize1

拡大するとカクカクですね。
ai-sin-obj-simplize2

ここで、メニューバーより、
オブジェクト > パス > 単純化
ai-sin-obj-simplize3

お!?
スゴイ!滑らかになった!!
ai-sin-obj-simplize4
でも少し膨らんだ気が・・・。

オプションで「オリジナルを表示」にチェックを入れましょう。
ai-sin-obj-simplize5
そうすると「使用前」「使用後」の確認ができます。
ai-sin-obj-simplize6
これは便利でいいですね!

あとは表現者のさじ加減ですが、
厳密なサインカーブに近づけたいならば、
「曲線の精度」を100%に近づけましょう!
ai-sin-obj-simplize7

98%がベストな気がしました。(100%だと微妙にカクついたんで)
ai-sin-obj-simplize8比較してみましょう!
ai-sin-obj-simplize9
これでいちいちトレースとかしなくても、
その分作品クオリティーを上げる時間に費やせますね!

visitor さん ありがとうございました m(__)m

AEとかでモーグラ制作時に拡縮したい場合

しかしAfterEffectsでモーショングラフィックを制作する場合、
前述の話は都合が悪いですね・・・。

拡縮しても粗が出ないからイラレでベジェ描いてるんですから。

この場合は一旦スクリプトで生成したサインカーブなどをベースに
ベジェ曲線でトレースしましょう!

トレースしなくても オブジェクト > パス > 単純化 で滑らかにベジェ曲線かできました!
とはいえ、

最後は力技なんです!(`・ω・´)キリッ

一見華やかな映像制作に見えますが、地味な作業の積み重ねなんですから。
トレースしたら厳密な意味で正確な正弦曲線とはいえないんですが、
演出のためにグリグリ動かしてるモーグラに「厳密的な正確さ」はナンセンスです。
カッコよくて、ディレクターの意図に沿っていれば無問題なんです。

適当にやってください。
テキトーじゃないですよ!
めんどくさいからテキトーじゃなくて、制作費・制作期間を念頭において目標を達成できるのであれば手を抜くべきところは手を抜くべきです。

ゲームとかでよくある能力の配分みたいなモンです。割り振れる合計は決まってて増えないんです。
120%とか200%とか平気な顔して言うやつが嫌いです。そののこり20~100%はどこから来てるんですか?魔法使いですか?いずれ疲弊して再起不能になります。100%と限りあるものを効率的に効果的に割り振って最高の仕事をしましょう!

あ゛~最後に説教臭くてスイマセンでしたm(__)m


コメント

Facebookコメント

※コメントしたけど表示されてない方へ

パーマリンクを変えてしまったおかげで表示されなくなってしまいました。
折角コメントいただいたのにスイマセンm(__)m
パーマリンク変更しても何とか表示できる方法を現在模索中です。

“Facebookコメント”じゃないコメントを残す

このコメント欄は一時的に且つ試験的に復活させ実装させています。スパムが増加すると廃止します。なのでできるだけFacebookのコメントでコメントをお願いします。m(__)m
なお、メールアドレスは公開されることはありません。

  1. たか さんのコメント

    とても参考になりました。ありがとうございます。
    カーブがカクカクになっちゃうんですね。
    なんと言いますか、地味な作業の集合体が、華やかな映像制作の
    カラクリ、というのは、たぶん別の業界も一緒ですよ(^_^)

    • dice さんのコメント

      カクカクを回避したければサンプル数(分割数)を増やせばOKです。(アナログデジタル変換の理論と同じです) でも効率的じゃないんで場合によってはトレースが望ましい場合もあります。完成形イメージして一番いい方法を選択するのが吉ですね。
      そうですね。ものづくり全般地味な作業の積み重ねですね。その積み重ねが作品のクオリティーをあげるわけですね。

  2. visitor さんのコメント

    とても参考になりました。ありがとうございます。
    補足と言ってはなんですが、線がカクカクになる点に関しては、生成されたサインカーブを選択後、

    オブジェクト→パス→単純化

    を使用することで近似的ではありますがベジエ曲線化することができました。

    • dice さんのコメント

      なるほど、パスの単純化ですか!今度試してみます。
      こちらこそ有益な情報ありがとうございます!

    • dice さんのコメント

      単純化、早速試しました!いい感じですね。98%辺りが良い感じでした。
      この情報を元に記事本文に単純化を追記しました。

  3. maenary さんのコメント

    ベジェ曲線-sine曲線-イラストレータで検索して辿りつきました。特許関係の技術資料作成で制御装置の特性曲線を描くのに苦労していました。sine曲線をベジェ曲線で似たような曲線にしたものの、似て異なるものに違和感を覚えていました。正にやりたいことが丁寧に書かれており、非常に参考になりました。霧が晴れた感じです。ありがとうございました。

    • dice さんのコメント

      参考になれてよかったです。
      (以下、釈迦に説法になるかもしれませんが気になりましたので記します。)
      「参考イメージ」程度でしたらいいと思いますが、申請書類や正式な手続きに使う書類などで「厳密さ」が要求される書類に使えるかどうかわかりかねます。
      プロットされた点は数式どおりですが、
      そのプロットされた点を「補完する線」は数式と異なることだけは頭の片隅において置いてください。

  4. maenary さんのコメント

    「厳密な」特性曲線については、技術担当者がMATLABや数式処理ソフトあるいはCADソフトで作成しています。それらからコピペで特性曲線を拾うこともできますが、私の作成する図面には、ここでの作図方法にある「のようなもの」で十分なのです。ご助言ありがとうございました。

コメントを残す