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

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

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

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

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

・・・。なるほど、よくわからん！
とにかくハンドルをいじって曲線を制御します。

他にも曲線を描く手法としてスプライン曲線とか、

それの3DCG版ならNURBS(ナーブス)ってのがあります。

それぞれ曲線を描く計算式は違いますが、どんな曲線も描くことができます！

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

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

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

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

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

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

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

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

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

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

拡張子を「.js」で保存。

イラレで、
ファイル ＞ スクリプト ＞ その他のスクリプト

先程作った.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編)

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

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

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

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

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

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

“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;

これを実行するとこんな感じ↓

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

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

4周期ちゃんと繋がって一連の腺となってますね！

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

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

使えないじゃん！

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

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

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

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

 

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

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

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

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

拡大するとカクカクですね。

ここで、メニューバーより、
オブジェクト ＞ パス ＞ 単純化

お！？
スゴイ！滑らかになった！！

でも少し膨らんだ気が・・・。

オプションで「オリジナルを表示」にチェックを入れましょう。

そうすると「使用前」「使用後」の確認ができます。

これは便利でいいですね！

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

98％がベストな気がしました。(100％だと微妙にカクついたんで)
比較してみましょう！

これでいちいちトレースとかしなくても、
その分作品クオリティーを上げる時間に費やせますね！

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

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

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

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

この場合は一旦スクリプトで生成したサインカーブなどをベースに
ベジェ曲線でトレースしましょう！
トレースしなくても オブジェクト ＞ パス ＞ 単純化 で滑らかにベジェ曲線かできました！
とはいえ、

最後は力技なんです！(｀・ω・´)ｷﾘｯ

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

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

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

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

---