Hatena::ブログ(Diary)

s.h’s page

2016-05-28

new Layer Extension (ver.1.2.4)

以前作ったIllustrator用のエクステンション、new Layer を更新しました。

f:id:shspage:20160528124021p:image


機能は前バージョンと変わりません。

カラーチップのボタンを押すと、その色のレイヤーを追加します。

auto ボタンは、上下のレイヤーの色とカブらない適当な色のレイヤーを追加します。

内部処理的には、RGBHSV に変換して、色相(HUE)を適当にズラしています。

チェックボックスをチェックすると、レイヤーを追加するのではなく、アクティブレイヤーの色を変更します。("auto" はレイヤーを追加するときの色に、その他のボタンはその色に変更します。)

マウスポインタがパネルの外に出ると、チェックボックスのチェックは外されます。


【更新内容】

対応バージョンの設定の上限を更新して、チェックボックスのキャプションに active を追加しました。


download: aicc_ext_newLayer124.zip

※ Illustrator CC 以降で使用できます。CC 2015以降ではインストールに Extension Manager は使用できません。ZXPInstaller などを使ってください。

2016-05-15

voronoi-example.jsx の説明

Gist にアップした、ボロノイ図を描く Illustrator スクリプトについての補足説明です。

(文末に追記:2016.05.30, 2016.06.04)

Gistからのダウンロード

ページ右上の「Download ZIP」ボタンを押すか、「Raw」ボタンを押して、ブラウザのメニューから「ページを別名で保存」を実行してください。


ライブラリのインクルード

Illustratorスクリプトでは、スクリプト中で別のスクリプトファイルの名前を指定して、その内容を読み込むことができます。

掲載のスクリプトで、1行目に

//@include "~/ailib/rhill-voronoi-core.js"

と書いている部分がその指定です。

「 ~ 」はホームディレクトリWindowsの場合、C:\Users\<ユーザー名>)を表すので、ホームディレクトリの下の ailib フォルダの中にある rhill-voronoi-core.js を読み込んでいるというわけです。

CS6 だと、Illustrator のスクリプトフォルダの直下からの相対パスで書けるのですが(例:...スクリプト/lib/abc.js がある場合、"lib/abc.js" と指定できる。)、CS3 だとこの書き方はダメでした。

いずれにしても、上記の指定は古い書き方で、今は

#include "lib/abc.js"

と書くようです。

(今、CS3しか使えないので確認ができませんが。) → CS3でも #include でいけます。パスの問題は同様にダメです。


使い方

ボロノイ図は、平面上の複数の点を元に、どの点に近いかによって平面を分割した図です。

スクリプトでは、選択されたオブジェクトの中心点を元にしています。

ここでの「オブジェクト」は、選択ツール(黒矢印)でクリックしたときに選択されるもののことで、例えばいくつかのパスがグループ化されている場合は、クリックするとグループ全体が選択されますが、この場合はそのグループが1つのオブジェクトということになります。

下の図では外枠の中に5つのオブジェクトがあります。(下の説明のテキストを除く。)

f:id:shspage:20160515125408p:image


これらを選択してスクリプトを実行すると、下の図のように分割する線が描かれます。

f:id:shspage:20160515125409j:image

選択オブジェクト中の最も面積の大きいオブジェクトが、分割線を描く際の外枠として使用されます。このため、実行するときは外枠も含めて選択するようにしてください。

なお、外枠は四角形と見なして上下左右の端の位置を使用するため、丸で囲っても丸の内側に描かれるわけではありません。

描かれた線はグループ化されています。


塗りのある面について

分割された各領域には塗りのあるパスが置かれています。色が白なので見た目には分かりませんが。これらのパスは線とは別にグループ化されています。ダイレクト選択ツールで選んで色分けすることができます。

f:id:shspage:20160515125410p:image


これらの線や面は、アクティブレイヤー(レイヤーパレットで選択されているレイヤー)に描画されます。このため、選択オブジェクト群より上のレイヤーをアクティブにして実行した場合、塗りの面が手前に描かれて選択オブジェクトが隠れてしまいます。

この場合は、必要に応じて塗り面のグループを移動か削除してください。

スクリプト冒頭の「var DRAW_POLYGONS = true;」の truefalse にすると、塗りのパスは作成されません。


作例

より多くのオブジェクトを元にすると、下のような図が描けます。

f:id:shspage:20160515125411p:image


上の例では、分割後に塗りの部分を選択して、Github に載せている noiseFill.jsx で色分けしています。noiseFill.jsx も、パーリンノイズを生成するライブラリを include しています。

追記:2016.05.30

rhill-voronoi-core.js を include して Illustrator でボロノイ図を描くスクリプトは、もう何年も前に Github で fabiantheblind さんが公開してました!

https://github.com/fabiantheblind/Illustrator-Javascript-Voronoi

さらに、どうやら私が何年も前にこのリポジトリに★をつけてました。

正直まったく忘れていました。

フォークするのが筋かとも思いましたが、中でやってることが結構違うので、これはこれで、このまま置いておくことにします。

追記:2016.06.04

それから fabian さんとやりとりがあったりして、フォークして改めて up しました。

https://github.com/shspage/Illustrator-Javascript-Voronoi

2015-07-18

plainCanvas

f:id:shspage:20150718230543p:image:w360

前の記事の、Illustratorのextensionパネル上にpaper.jsで描画するextensionを、GitHubアップロードしました。

https://github.com/shspage/plainCanvas

README_ja.md が、日本語のREADMEになります。


scripts フォルダの中にサンプルスクリプトがあります。

ほとんどが昔Scriptographerのサイトに投稿したものの移植版です。

今後いろんなタイプのものを増やしていく予定です。

2015-07-11

Illustrator の extension パネル上に paper.js で描画する extension の進捗

f:id:shspage:20150711105633p:image

out ボタンを押すと、アートボード上に反映します。

paper.js 用スクリプトファイルを読み込む機能をつける予定なので、オプション設定値の見出しと入力欄の表示/非表示は、スクリプトの初期化 function で動的に変更しています。

これだけだと、ブラウザで描画して paper.js のメソッドで export してイラレに取り込むのとあんまり変わりませんが、in ボタンでイラレのオブジェクトを取り込むようにすると、extension ならではの使い道が色々出てきそうです。

2015-07-07

イラレスクリプト詰め合わせ他の更新

イラレのスクリプトUIのお話。

スライダーって適当に調整するのには便利だけど、微調整とか、目的の数値に合わせるには面倒だなあと思って、イラレのスクリプト詰め合わせ(http://shspage.com/aijs)のうち、いくつか(メタボール、メタボール(円弧)、角を丸くするplus)で数値を入力できるようにしました。

f:id:shspage:20150707205909p:image

入力値をとりあえず確定(スライダーやプレビューに反映)したい場合は、ENTER を押すと OK ボタンが反応してしまうので、TAB とかを使ってください。できれば ENTER にしたいところですね、これは。


入力値が変わったらスライダーに反映し、スライダーを変えたら入力欄に反映し、とやらないといけないのですが、

edittext.onChange → slider.onChange → edittext.onChange ... で無限ループになるかと思ったけど大丈夫みたい。


問題は、スライダーの上限が固定できないケースで、「角を丸くするplus」では上限を入力できるようにしていたんですけど、これでスライダーの数値も入力できるようにすると、UIがごちゃごちゃするので、スライダーは取っ払ってしまいました。

ただ、スクリプトの中のコメントを外すと、スライダーも復活できるようにしています。

いずれにしても、今は標準機能を使ったほうが便利ですが。


あと Github (https://github.com/shspage/illustrator-scripts) の softgel.jsx も同様に更新しました。