吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【Illustrator×JS】矩形、ひし形、楕円を描画してみる

2014年11月9日 / category : illustrator×js

以前、Photoshopの拡張パネルを作成してました。
http://tsudoi.org/weblog/?cat=16
こんな感じの。

それでillustratorも作ってみたいな~っと思っていました。
で、ようやく最近、色々と触り始めてます。

illustratorの拡張パネルの作り方は未だわからず、断念していますが、
JavaScriptで操作できます。

「ファイル」→「スクリプト」→「その他のスクリプト」

を選択すると、ダイアログが展開され、jsファイルを選択できます。
ということで、今はまだ触り始めたばかりですごいことはできていませんが、とりあえず作ったものを紹介してみます。

【Download】
http://tsudoi.org/illustrator_js/illustrator_js_0.zip

このzipの中には、

■矩形.js
■ひし形.js
■楕円.js
■ランダム_正方形.js
■ランダム_正円.js

のjsファイルが格納されています。
全てillustratorで実行できます。これらを簡単に紹介してみます。

矩形.js

矩形.jsを実行すると上の画像のように、ステージに矩形が敷き詰められます。
矩形.jsの2行目のソースを見ると、

draw( 400,400,12 )

となっています。
draw関数を実行することで、ステージに描画されます。
この関数の引数ですが、

draw( w,h,len )

となっており、

w : 新規ドキュメントの横幅
h : 新規ドキュメントの高さ
len : 縦横に配置される矩形の数( len × len )

となります。
この引数の値を変更することで、描画される矩形の数やサイズは調整できます。(矩形の色はランダムにしています。)
既存でドキュメントを生成している場合は、そのドキュメントサイズに応じて矩形が成形されます。

ひし形.js

矩形.jsと仕様は同じ。矩形ではなく、ひし形にしたパターンです。

楕円.js

矩形.jsと仕様は同じ。矩形ではなく、楕円にしたパターンです。

ランダム_正方形.js

正方形をランダムに敷き詰めるパターンです。
こちらは少々仕様に制限があります。
ランダム_正方形.jsの2行目のソースを見ます。

draw( 400,400,20 );

となっています。
矩形.jsと引数の数は同じですが、内容が少し違います。

draw( w,h,min )

となっており、

w : 新規ドキュメントの横幅
h : 新規ドキュメントの高さ
min : 正方形の最小サイズ

となっています。
w,hは同じですが、最後の引数minが異なります。

また、正方形をランダムに敷き詰めているので、ステージサイズとも関係してきます。
正方形が敷き詰められるステージサイズが必要です。

例えば、

draw( 210,297,20 );

とすると、横幅210mm,高さ297mmのステージサイズに、最小サイズが20mmの正方形は敷き詰められません。

ランダム_正円.js

ランダム_正方形.jsの正方形を正円にしたパターンです。
仕様は、ランダム_正方形.jsと同じです。

以上がzipに格納されているjsファイルの内容です。
まだまだ触り始めたばかりですので、これから面白い描画ができるjsファイルを作っていこうと思います!

ちなみに、検証環境はwindowsのillustratorCCのみです・・・
CC以前のillustratorで正しく動作するかは・・・保障できません、、、