sketch20081012

ドキュメントの左下(0, 0)から選択したオブジェクトのパスにアンカーポイントを追加して線を引く。curvesToPoints()の第二引数がよくわからない。

var sel = document.getMatchingItems(Path, { selected: true });
for(var i=0; i<sel.length; i++) {
 var art = sel[i];
 art.curvesToPoints(10, 1);
 for(var j=0; j<art.curves.length; j++) {
  var p = new Path();
  p.moveTo(art.curves[j].point1);
  p.lineTo(0,0);
 }
}

scriptographer Timer class

Helpより。
1秒毎に円を描いてx位置が500pixelを超えたら止まる。
timerTest.js

var x = 0;
var timer = new Timer(1, true);
timer.start();
timer.onExecute = function() {
 document.createCircle(x, 100, 10);
 
 if(x>500) {
  timer.stop();
 }
 x+=10;
}

sketch20080924

Actionscript3.0アニメーションを参考にしたscriptographerでの3Dのスケッチ。
flは焦点距離で、vpX、vpYは消失点(vanishing point)。
ball3D.js

//A4 size
var w = 596;
var h = 842;
var back = document.createRectangle(new Rectangle(0, 0, w, h));
back.style.fill.color = new RGBColor(0, 0, 0);
var fl = 250;
var vpX = w/2;
var vpY = h/2;
var numBalls = 1000;
function drawBall(x, y, z, rad) {
 if(z > -fl) {
  var scale = fl / (fl+z);
  x = vpX + x * scale;
  y = vpY + y * scale;
  rad = rad * scale;
 }
 var b = document.createCircle(x, y, rad);
 b.style.fill.color = new RGBColor(255, 255, 255);
 b.opacity = scale * 0.7 + 0.3;
}

for(var i=0; i < numBalls; i++) {
 drawBall(Math.random() * w - w/2, Math.random() * h - h/2, numBalls - i, 10);
}

drawCircles

scriptographerで円を描く。Documentクラスが持ってる関数を使う。

document.createCircle(x, y, radius);

xとyを中心点とした半径radiusの円が描かれる。
他にも興味深い関数がいくつかあるのでまた試す。

ランダムに色を選びつつ透明度と線の太さを変更。
こういうのは手作業やブレンドツールでやろうとしても難しいのではないかと思う。

drawCircles.js

var radius=10;
var xOff=250;
var yOff=450;
for(var i=0; i<10; i++) {
 for(var j=0; j<10; j++) {
  var circle = document.createCircle(xOff+i*radius*2, yOff+j*radius*2, radius);
  circle.style.fill.color = new RGBColor(Math.random(),Math.random(),Math.random());
  circle.style.stroke.color = new RGBColor(Math.random(),Math.random(),Math.random());
  circle.style.stroke.width = (i+j)/2;
  circle.opacity = (i+j)/20;
 }
}

再びscriptographerに興味を持ち出したのはjonathan puckeyのDelaunay Rasterがかっこよすぎたからで、これこのままvjできるっていうか、昔illustratorでプレゼンやって怒られたり怒られなかったりしたんだけど、illustratorで絵を描くことがそのままパフォーマンスになる。scriptographer0.5だと他のオブジェクトに跳ね返りながらパスを描いていくスクリプトがあって、それも同じような面白さがあった。Timerクラスが変わったみたいで実装方法がわからない。

今のところforumを読むのが一番勉強になりそう。
来年jonathanが授業でscriptographerやるって言ってるのが楽しみ。

情報少ないけど、その分キレキレで純度が高いアウトプットに出会える。

getting started with scriptographer

scriptographer、色々エフェクトを試す分にはいいけど、自分で一からコードを書く場合どこから始めればわからなかったので、ちょっと調べた。環境はCS3。

General Scriptsに分類される、三角のPlayボタンを押して実行するタイプのものから。scriptsフォルダのscripts以下に入るやつ。

illustratorを起動して、書類のアイコンをクリック。drawline.jsという名前をつけて、scriptsフォルダの中に保存。Mainのコンソールのscriptsの中にdrawline.jsが出来ているはず。ダブルクリックすると何かしらのエディタが立ち上がる。

色々と他のソースを読むと、線を描くにはどうやらPathクラスを使えばよさそう。
Pathクラスのインスタンスを作る。

var p = new Path();

actionscriptと同じように、描画する点へ移動する場合moveTo(x, y)を使う。ペンを置くイメージ。

p.moveTo(0, 0);

目的の点まで線を引くのはlineTo(x, y)。ここが次の線の開始点にもなる。置いたペンを動かすイメージ。

p.lineTo(100, 100);

この3行を書いて保存。Reloadボタン(矢印が2つ回転してるやつ)を押して、Playボタンを押す。
アートボードの左下から右上に向かって線が引かれたはず。

3行目を少し書き換えてみる。

for(var i=0;i<100;i++) {
 p.lineTo(i*5, Math.random()*100);
}

とか。
オブジェクトに対して「フィルタ>パスの変形>ラフ」でギザギザ選ぶのと同じような感じ。コードと手作業でうまく行き来ができると嬉しい。

ちなみに多分scriptographer入れたせいで、illustratorで印刷をするとconsoleにエラーが表示されて、tabを2回押さないとアクティブにならなくなりました...。

moco.js

新しいマシンだとScriptographerのversion 2.0.023 for Illustrator CSが無事動いたのでこれから勉強しようと思う。何故動いたかは謎。問題とされてるはずの「プラグイン」は日本語のままだし。

p5とかで定番のマウスドラッグに合わせて円が大きくなったり小さくなったりするやつ。toolsフォルダに入れて、//のモード(tool 1)で使う。こいつらがパスで一括管理できるなんて素晴らしすぎる！

javascript載っけられなかったのでup。
moco.js

sketch20070414

sketch20070413

sketch20070315

sketch20070314

scriptographer

Hector:などでおなじみJürg Lehni(ヨーグ・レーニ)が公開してるillustratorのプラグイン。javascriptで書けるってのに、なんでもっと情報がないんだろ。学校とかでも教えてくれないかな。存在は知ってたものの、openstudioで初めて使ってみて、その絶大な効果を思い知らされました。


僕の環境だと古いバージョン(0.5)でしか使えなかった(新しいバージョンだと起動できない)んだけど、見よう見まねでコードを書いて作ってみた。simple.jsをちょっと書き換えただけ。誰でもできるし、Math.sin()とかにどんな値が渡されてるかとか全然気にしてない...。もうちょっとちゃんとドキュメント読んで研究します。

Scriptographer.com

適当なテキストファイルに下のソースコードをコピー&ペーストして拡張子を.jsにして保存してtoolsフォルダに入れて使ってみて下さい。

art.pointsToCurves(tolerance, thresh, 10.0, 10.0);
の行頭に//つけてコメントアウトしたりするとカチッとした線になったり。

function init() {
    size = 50;
    tolerance = 25;
    thresh = 10;
}

function options() {
    values = prompt("Radius:", 
        {type: "number", value: size, 
         title: "size", width: 50},
        {type: "number", value: tolerance, 
         title: "tolerance", width: 50},
        {type: "number", value: thresh, 
         title: "thresh", width: 50}
    );
    if (values != null) {
        size = values[0];
        tolerance = values[1];
        thresh = values[2];
    }
}

function mouseDown(event) {
    art = new Art("path");
}

function mouseUp(event) {
    art.pointsToCurves(tolerance, thresh, 10.0, 10.0);
}

function mouseDrag(event) {
    var point = event.point;
    art.segments.push(point.add(size * 
    (Math.cos(point.x)), size * Math.sin(point.y)));
}