paper.js で筆圧描画とSVGデータ生成


wacomプラグインを使うとjavascriptで筆圧などを取得できるってのを、昨日知りました。ちょうどpaper.jsで筆圧が使えないのを残念に思ってたところだったので、早速組み合わせてみました。微妙な書き味などは、これからチューニングが必要ですが、とりあえず。
あとSVGデータ生成機能も、まだ完全ではないのですがつけてみました。generate svg をクリックするとテキストエリアが出てくるので、コピーしてファイルを作ってください。


paper.jsで筆圧描画とSVGデータ生成サンプル
※ 私の環境のInternet Exprolerでは今のところ使えてません。ごめんなさい


…描けるでしょうか?
webtabletプラグインは、最近のドライバを入れると同時に入るらしいです。らしい、っていうのは、私も最初うまく動かず、ドライバを入れ直したりしてるうちに動いたという感じなのです。wacomのデモページでも動かない場合は、導入方法を工夫してみてください。


javascriptで筆圧を使える件は、調べたらもう1年近く前から話題になっているんですね。Web関係は進化についていけないので近寄らないようにしていたのですが、こんなことが簡単にできるとなったら、これを活用しない手はないです。今後は自分の興味の範囲で取り組んでみたいです。


SVGデータ生成機能については、テキストとグラデーションは未対応です。他にも細かい属性でフォローできてない部分があります。paper.jsのメーリングリストを見たら、SVG生成機能は今後の計画にはあるようなので、それが実装されれば一番よいのですが。それにしても、IllustratorInkscapeでもちゃんと開けるデータを作ろうとすると、色々大変でした。このへんはまた別の機会に。現状、Illustratorでは、symbolのサイズがおかしくなるのが未解決です。

paper.js->svg


いまさらながらHTML5Canvasなどと戯れている。イラレ風のドローツールとか、あっても良さそうなものだけど、ちょっと探した限りでは見つからなかったので、作ってみようとしている。

画像は、paper.jsのexampleの中のArcs.htmlから生成したsvgデータをInkscapeで編集の図。


これはSpiralRaster.html。

とりあえずsvgで書き出すだけでも有用かもしれない。スマートな実装がまとまってきたら公開したいです。

connect_centers_nearest_modified

前回作った、選択オブジェクトの中心点をつなぐパスを作るスクリプトで、つなぐオブジェクト群をどうやってつくろうかと思って、Voronoi Stippler*1というプログラムがあったのを思い出しました。これを使って画像から上の点群を作り、connect_centers_nearest を実行すると… setEntirePath でつなげられる点の数の上限(数千個)にひっかかってエラーになります。なので、下のように書き換えて、再度実行。

  //path.setEntirePath(points);
  for(i=0; i<points.length; i++){
    with(path.pathPoints.add()){
        anchor = points[i];
        rightDirection = anchor;
        leftDirection = anchor;
    }
  }

これはこれで、面白いかもしれないけど、糸がからまってるみたいでちょっとみっともない。ので、つなぐ距離の上限を設けることにしてみました。距離が上限より遠い場合、いったんパスを区切ります。

なんか、よい感じ? 変更したスクリプトを置いておきます。同梱の .js は windows、.jsx は mac 用のつもりです。
実行すると上限の距離(ポイント)を聞いてきます。
中身のことを書くと、パスを区切るところで、座標の配列 [x, y] の代わりに 0 を入れています。

download: aics_script_connect_centers_nearest_modified2.zip -> http://shspage.com/ex/files.html

追記:そういえば上のスクリプトで距離を調べるときは、距離の二乗で比べているんだった! なので、設定する上限は、距離の二乗の上限ということになります。。
追記:(6.12) 距離の上限を設定するように修正しました。

*1:現在はダウンロードできなくなっている模様。少し探した範囲で代替になるお手軽なものは見つからなかったですが、ボロノイ系のスクリプトなどがいくつかあったので、そのうち何か考えてみたいと思います。

オブジェクトの中心をつなぐパスを作成

リクエストがあったので、スクリプトを書いてみました。選択したオブジェクトの中心を結ぶパスを作る、というもの。以前、アンカーポイントにオブジェクトを配置するスクリプトを作りましたが、その逆ですね。

問題は、どういう順番で繋げるか、で、ユーザーが頭で考えてることを推理できたらクールだろうなあ、とは思ってみたのですが、実際ちょっと難しくて断念。とりあえず、いくつかのスクリプトに分ける形にしました。つなげ方のオプションを選ぶようにする手もあるけど、メニューから選んで即実行、の方が、使い勝手は良さそうな気がします。この辺は好みの問題になってきますが。

horizontalとverticalは、1つのスクリプトにまとめて、選択範囲の縦横のサイズが大きい方の向きにつなぐようにしてみました。
オブジェクトが円形に配置してある場合は、一番近い点をつないでいくようにしたら良さそう。でも、試しに逆に一番遠い点をつなぐようにしてみたら、これはこれで面白い形になって目からウロコ。ユーザーの意向を推測するのも良いけど、別の方法を提示するというのも、スクリプトならではの方法なのではないかと、今回は逃げることにいたします。

download: b_aics_script_connect_centers.zip -> http://shspage.com/ex/files.html

Macの方は同梱のjsx_lfフォルダの中のものを使ってください。

あと、
最近、MacBook Proを買いました。イラレはまだありません。まずはXcodeに慣れなければ!

Tree-Like 改造版

ドイツ(たぶん)のイラレ関連の雑誌を作っている人から、拙作のスクリプトを記事に載せるので承諾が欲しいとのメールが来て、ついては これを差し上げよう、とのことで、Christoph Goetz さんが「木みたいなものを描く」スクリプトを改造したものを、頂きました。

はっぱがついてるよ、はっぱ! とても樹木っぽくなった。
こんなインターフェイスも作れるんだね。すごい。

いずれスクリプト集に混ぜるけど、とりあえず単独で掲載させて頂きます。

download: Tree-like_modified.zip -> http://shspage.com/ex/files.html

Spiral Sphere (転載)

今回掲載する Illustrator スクリプトは、渦巻の球を描くもので、パスのグループを2つ(前面と背面)と、輪郭線となる円を1つ生成します。


球の中心はアートボードの原点、3次元座標では(x, y, z) = (0, 0, 0) 、そして球を見る視点は (0, 0, ∞) に設定されています。つまり、ここでの視点は球を見下ろしているのではなく、球が視点に向かって傾いているような格好です。


この設定は球上の座標が球の前面にあるか背面にあるかの判定をとてもシンプルにします。
具体的には、 z 座標が 0 より大きいか小さいかをチェックするだけでよいというわけです。


download: b_aics_script_spiral_sphere.zip -> http://shspage.com/ex/files.html


元記事:2009.06.21

イラレJavaScript - デフォルト原点とマルチアートボードへの対応案

イラレスクリプトで CS5 のデフォルト原点変更に対応する方法を考えてみた。
最初に原点をアクティブなアートボードの左下に移し、最後に元に戻すというもの。
CS3 以前では、特に原点の位置を変更しない。

Win 版 Illustrator CS, CS3, CS4, CS5 で動作確認。
※ 21:25 少し修正しました。(this.activeDocument となってた箇所を app.activeDocument に訂正)
※ 2013.02.11:〔修正〕this にする必要がないところは var にしました。

// ---------------------------------------------------------
// A fix for the change of the document origin in CS5,
// and for the multi-artboard in CS4 or later.
// This function locates the active artboard's origin on the
// bottom left at first, and restores it at the end.
//
// USAGE:
// var g_origin = Origin();
// ... (do something in legacy style)
// g_origin.restore();

function Origin(){
    var ver15_or_later = (parseFloat(version.substr(0, 2)) >= 15); // CS5 or later
    var ver14 = (version.substr(0, 2) == "14"); // CS4
  
    if(ver15_or_later){
        var saved_coord_system = app.coordinateSystem;
        app.coordinateSystem = CoordinateSystem.ARTBOARDCOORDINATESYSTEM;

        var idx  = app.activeDocument.artboards.getActiveArtboardIndex();
        var ab  = app.activeDocument.artboards[idx];
        
        var o   = ab.rulerOrigin;
        var r   = ab.artboardRect;
        var saved_origin = [o[0], o[1]];
        ab.rulerOrigin = [0, r[1] - r[3]];

    } else if(ver14){
        var o = app.activeDocument.rulerOrigin;
        var saved_origin = [o[0], o[1]];
        app.activeDocument.rulerOrigin = [0, 0];
    }

    this.restore = function(){
        if(ver15_or_later){
            ab.rulerOrigin = saved_origin;
            app.coordinateSystem = saved_coord_system;

        } else if(ver14){
            app.activeDocument.rulerOrigin = saved_origin;
        }
    };

    return this;
}
// ---------------------------------------------------------
var g_origin = Origin();

main();

g_origin.restore();

作ってる最中に、現在公開中のスクリプトは CS4 のマルチアートボードに対応してなかったんだとわかった。
CS4 を入手したのが最近なもので。近いうちに CS5 対応と併せて更新します。