クロソイド式 角丸長方形を作るスクリプト

クロソイド曲線と円弧を組み合わせた曲線を使って、長方形の角を丸めたものを作図するIllustartor用スクリプトです。
角丸長方形の角丸具合にこだわりたい人にオススメです。

BOOTHにて販売中（500円）

クロソイド曲線とは

「曲率が曲線の始点からの長さに比例する曲線」をクロソイド曲線（オイラー螺旋、コルニュ螺旋）と呼びます。
曲率とは曲線上の各点での曲線の曲がり具合のことで、詳しく言うと「曲線の接線の角度を曲線長で微分したもの」です。さらに言い換えれば「曲線に沿って進むとき、単位長さあたりどれだけ曲線の向きが変化するか」を表した値です。

ちなみに曲率が常に0なのが直線であり、曲率が0でない一定値なのが円です。

何に使うの？

Illustratorで使われている角丸長方形は、1/4円弧と直線を組み合わせたものです。
Illustratorの角丸長方形を見て、円弧と直線の接続部分が、いまいちなめらかにつながってないような印象を受けることはないでしょうか。
実際、とがった角があるわけではないので、なめらかでないとは言えないのですが、このような印象を受けてしまう理由は、「曲率が連続でないから」であると考えられます。

下図（Ａ）は、Illustratorの角丸長方形ツールで作った角丸長方形の１つの角と、前後の直線部分を切り出したものです。
直線の曲率は0、円弧の曲率は一定値ですから、角丸長方形の線上での曲率はこのように飛び飛びに変化していることになります。

このような不連続性をなくすため、直線と円弧の間にクロソイド曲線をはさんで、

あるいは円弧を使わずクロソイド曲線だけで

のようにしてやることで、直線と優しくつながった曲線にしようというのが当スクリプトの目的です。

※Illustratorのパスで表現できる曲線は3次ベジェ曲線だけなので、正確にはクロソイド曲線ではなく、『クロソイド曲線を3次ベジェ曲線で近似したもの』です。

円弧の割合を変えられます

当スクリプトでは円弧部分の角度を0°～90°の範囲で変更できます。
0°のとき上図（Ｃ）のように２本のクロソイド曲線で角を丸めます。
1°～89°のとき上図（Ｂ）のようなクロソイド曲線と円弧を組み合わせた曲線になります。
90°のときは通常の角丸長方形ツールで作ったものと同じです。

スクリプトの使い方

使い方１：クロソイド式角丸長方形を作る

1. ドキュメント上で何も選択していない状態にします。
2. ファイルメニューからスクリプト＞その他のスクリプトを実行し、『クロソイド式 角丸長方形.jsx』を選択します。
3. 横幅、高さ、角丸の半径、円弧部分の角度を指定して、OKを押します。

使い方２：既存のパスをクロソイド式角丸長方形に変換する

1. ドキュメント上でパスを選択します。（複数選択可。複合パスやグループは不可）
2. ファイルメニューからスクリプト＞その他のスクリプトを実行し、『クロソイド式 角丸長方形.jsx』を選択します。
3. 角丸の半径、円弧部分の角度を指定して、OKを押します。（横幅、高さは元のパスのものが使われます）

※何も選択していない状態と、パスを選択している状態とで動作が異なりますのでご注意ください。幅、高さを入力する欄がないのが「既存のパスをクロソイド式角丸長方形に変換する」ダイアログです。

スクリプトを素早く実行するには

毎回『その他のスクリプト』からjsxファイルを選択するのは大変なので、以下のいずれかで素早く実行できるようにしておくと便利です。

★メニューに表示されるようにする

jsxファイルを所定のスクリプトフォルダに入れておくと、ファイルメニューの『スクリプト』内にメニューとして表示されます。

スクリプトフォルダは、標準では以下の場所にあります。
◇Macの場合
/アプリケーション/Adobe Illustrator CC 2019/プリセット/ja_JP/スクリプト
◇Windowsの場合
C:\Program Files\Adobe\Adobe Illustrator CC 2019\Presets\ja_JP\スクリプト

※"CC 2019"の部分は使用するIllustratorのバージョンによって変わります。複数のバージョンで使いたい場合はそれぞれの場所にコピーする必要があります。

★ツールを使う

スクリプトを便利に使うための様々なツールが有志の方々により開発されています。私も『Sppy』という、キーボードショートカットでスクリプトを実行できるソフトを作っていますのでWindowsの方は使ってみてください。

・SPAi（Mac用、ものかの氏作）
　　http://tama-san.com/spai/

・Sppy（Windows用）
　　http://sysys.zouri.jp/sppy/

その他の機能

・４つの角それぞれについて、角を丸めるかどうかのON/OFFを設定できます。

・『半径』に長方形の短い方の辺の半分より大きい値を指定した場合、自動的に長方形の短い方の辺の半分の長さに変更されます。

まめちしき

自動車が一定の速度で進みながら、ハンドルを一定の速さで回したときの軌跡はクロソイド曲線になります。
この性質から、クロソイド曲線は道路の設計にも利用されています。

円弧のカーブと直線との接続部分にクロソイド曲線を使うことにより、ドライバーはカーブにさしかかると一定の速さでハンドルを回し（クロソイド部分）、しばらくハンドルを固定し（円弧部分）、また一定の速さでハンドルを戻す（クロソイド部分）というふうに、自然な操作で曲がり切ることができるわけですね。以下のリンク先に詳しく書かれています。

ジャンクションに使われている「人体に優しい曲線」とは？ | Park blog
http://jafmate.jp/blog/edison/post-9.html

このスクリプトを利用して発生したいかなる損害についても、作者は一切の責任を負いません。
お問い合わせはブログのコメント欄かツイッターへどうぞ。
ぷろぐばこ top