2円をつなぐ線を描く
図形を描く系のコードでやっている計算を図解するシリーズ。
を、ときどき書いていこうと思います。
(Illustrator用のJavaScript script編)
math なんていうタグまでつけていますが。
数学とは私にとって高校のころに唯一、赤点を取った科目です。
逆にだからこそこういう、中学か高校の図形の練習問題みたいなものでも、
ちょっとしたパズルを解くような感じでいまだに楽しめているのではないかと思います。
という言い訳をしたためたうえで、
本題
こんなふうに2円 をつなぐ線をたくさん描いたら面白い形になるかなと思って、 書いてみた処理の話。 *1
とりあえず、分かっている部分を描いて計算方法を考えます。
Illustratorなので、円の中心と半径はそれぞれのパスの属性からわかります。
*2
(2017.03.31 脚注2の中心と半径の求め方を修正しました。)
こうやって図で描くと図形問題そのものですね。
大人になってからこんなものが役に立つとは思ってもいませんでしたし、
こんなものに悩まされるとも思っていませんでした。
それはさておき、接線を引くには接点 P1, P2 の位置が知りたい。
円の中心(O1)と接点(P1)を結んだ線の角度は、
「2円の中心を結んだ線の角度 + t 」です。
角度 t を知りたい。
円の接線は接点と中心を結んだ線と直角に交わるので、
中心と接点を結んだ2本の線 (R1, R2) は、錯角が等しいため平行ということも分かります。
R2 を R1 の隣にコピーしてやると、O1-O2'-O2 という直角三角形ができます。
つまり cos(t) = (R1 + R2) / d
角度 t = arccos((R1 + R2) / d)
ここまでわかったところで、とりあえずIllustratorで動くコードにまとめてみます。
ちなみに円の外側で接線を引く場合は下の図のようになります。
考え方は同じようなもので、
角度 t の値は Math.acos((R1 - R2) / d) で求められます。
で、
さらにたくさんつなげるようにしてみた結果。
あんまり面白くない。
もう少し工夫が必要。
*1:Illustratorの楕円ツールで描いた円は誤差があって厳密には正円ではないですが、 今回の用途では問題になる誤差ではないので円として扱います。
*2:後述の例の geometricBounds を使う方法のほかにこれでもよいです。 var w = 0; if(path.stroked) w = path.strokeWidth / 2; (中心=) ver x = path.left + w + path.width / 2; var y = path.top - w - path.height / 2; (半径=) var radius = path.width / 2;
Adobe Illustrator SDK メモ (1)
Visual Studio 2015 Community で Adobe Illustrator CC 2017 SDK を使ってのプラグイン作成、についてのメモです。
サンプルコードのビルド
全部はビルドしてみていないですが、
afxres.h がないというエラーが出た場合は
resource.rc の afxres.h を winres.h に変更すると通ります。
Template の導入
テンプレートを適切な場所に置いてやると、新規プロジェクト作成の一覧の中に IllustratorSDK というのが出てきます。
Windows用テンプレートの関連ファイルは以下のフォルダにあります。
samplecode\Templates\Win
INSTALL.txt に従ってファイルを配置する前に、
Illustrator.vsz をエディタで開いて1行目と2行目を以下のように書き換え。
VSWIZARD 7.0
Wizard=VsWizard.VsWizardEngine.14.0
前述の afxres.h がないなら resource.rc も修正。
あとはINSTALL.txt に従います。
ただし INSTALL.txt の1行目Visual Studio 11.0はVisual Studio 14.0 に読み替え。
“5.” の copy the folder IllustratorSDK.vsdir は copy the file IllustratorSDK.vsdir の間違いでしょう。
“12.” にあるように、プロジェクト作成時には Create Directory For Solution をチェックしないように注意です。
つづく
現時点で近々具体的に何か作る予定はないです。あればまた。
OBJ形式のファイルを読み込むスクリプト
3D座標操作の練習として、OBJ形式のファイルを読み込んで Illustrator 上に描画するスクリプトを作りました。 実用になるかわかりませんが、気分転換にアートボードの片隅で立体をくるくる動かしてみると癒されることもあるのではないでしょうか。
基本的な使い方
- OBJ読み込み ボタンで obj ファイルを選択する
(読み込んだ形状は書類の原点(0,0)を中心として作成されます) - 向きを変えたいときはダイアログ上部のパネル上でドラッグする
- ダイアログを閉じる
補足
- ドラッグ操作においては、ドラッグの開始点が原点(視点の中心)になります。(パネルの中心が原点ではありません。)
パネルの外までドラッグしてマウスボタンを離した場合、ドラッグ継続中と見なされます。この場合、パネル上でクリックするなどしてマウスの状態を認識させてください。
(どうもScriptUIがmouseleaveを検出してくれないのです。)
→ mouseoutで解決- マテリアルはディフューズ色のみ反映されます。データを読み込むごとに、スウォッチにRGBのスポットカラーがマテリアル数分だけ追加されます。
進んだ使い方
- 光源位置設定 にチェックをつけると、パネル上のドラッグで光源の位置を変更できます。
チェックはドラッグ終了時に外れます。 - オプション ボタンを押して設定を変更できます(詳細後述)
オプションのデフォルト値を変更するにはスクリプトの冒頭部分を編集してください。 - 影をつける ボタンを押して影をつけられます。
(影がついている状態で回転はできません。改めて回転させるには 影を削除 ボタンを押して影を削除してください。)
影は面ごとに作成しています。影が重なった部分は、追ってパスファインダで合体するなどしてください。
オプションの補足
- ドラッグ中は簡易的なZ座標補正を行う:「Z座標補正」は面の前後の並べ替え処理で、データ量が多いと時間がかかります。ドラッグ中は簡易的な並べ替えを行うよう設定できます。簡易処理を行っている際は前後関係が正しく表示されないことがあります。必要に応じてメインダイアログの「Z座標補正」ボタンを押してください。影をつける時にはここでの設定にかかわらず簡易的でない並べ替え処理が行われます。
- 終了時に裏面を残す:既定では視線方向と反対側を向いた面は終了時に削除されます。この設定をチェックすると、これらの面はグループ化され、読み込みで作成したパスの最背面に置かれます。
- チント下限:面の明るさはスポットカラーのチントで設定しています。下限は最も明るい部分の濃度です。
- 大きいデータと見なす閾値:設定した面数以上のデータを読み込んだ場合、警告などを表示します。
点光源:光の減衰はありません。
スクリプトの冒頭部に、パネルで設定できないオプションがいくつかあります。たとえば既定ではx座標またはy座標が原点から1000ポイント以上離れた点をもつパスは描画されません。用途に合わない場合は _MAX_COORD_VALUE の値を変更してください。
既知の問題
OBJファイル読み込み完了直後にパネル上でドラッグするとエラーが表示される場合があります。前後の並べ替え中にドラッグするとイラレごと落ちる場合があります。
→ たぶん解決
ダウンロード
illustrator_obj_loader.zip -> http://shspage.com/ex/files.html
- 読み込みテスト用のサンプルデータが同梱されています。
【変更点】
ver.1.0.1: 未使用変数削除、コメント修正
ver.1.0.2: UI(メッセージ)を一部変更
ver.1.0.4: 一部処理を簡略化
ver.1.0.5: mouseoutのeventListenerを追加
ver.1.1.0: mouseUp時のz座標補正を廃止。z座標補正ボタンを追加
ver.1.1.1: 冒頭の説明文を現バージョンに合わせて変更
その他
TODO
ダイアログを閉じたあとのundoで実行前に戻るようにする
スクリプトを実行したあとundoしたら実行前に戻るのが期待される挙動だと思うのですが、このスクリプトの場合はタイミング的に難しくてですね、むやみにundoしてスクリプト実行前の操作がundoされるのは避けたいというのもあって、ダイアログを閉じてからundoで開く前の状態に戻るためには2,3回では済まない場合があります。
CMYKColorの対応?
ドキュメントカラーモードにかかわらず、色はRGBColorで作成しています。(影はGrayColor。) OBJファイルのマテリアルが持っているカラーがRGBで、CMYKに変換すると変な色になることがあると思われるのですが、オプションで変換するか選べるようにしようと考えています。
開発環境
Adobe Illustrator CC 2017.0.2 (Windows10 / 64bit)
ライセンス
Copyright(c) 2017 Hiroyuki Sato
https://github.com/shspage
MITライセンスのフリーウェアです。
詳細は同梱のLICENSE.txtをご覧ください。