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やるって言ってるのが楽しみ。

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

20080914

この3ヶ月は仕事でコードを書くことはほとんどなく、ひたすらillustratorとphotoshopだった。
やってたのは主にカンプとかポンチ絵とか呼ばれるプレゼン用のイメージ作りで、学生時代は馬鹿にしてたhow toものがすげー役に立った。というか、こういう用途で使うために存在してるんだね。
Photoshop Tutorials - PSDTUTS
Illustrator & Vector Tutorials - VECTORTUTS

USBとか作ってどうすんの？とか思うだろうけど、何かしらプレゼントとかグッズとかの企画を考える人がいて、それを絵に起こす仕事がある訳です。見せられないのが残念だけど、変なところに凝ってたりして結構笑える。合成とか参考にするための写真をflickrから探したりするのもautopagerizeとかldrizeのお陰で相当助かってます。

探すイメージはネットだけじゃなくて本とか雑誌もあるので、本屋で本当に片っ端から開いて「使う」視点で見る。「あの写真の手をこの写真の手にしよう」とか。何か新しいチャンネルが開いた。そんでいかに先輩がちゃんと今のファッション誌とかの流れに乗っかってタイポグラフィ選んだりグラフィック作ってるかってのがわかった。

ycamでのopenframeworksのworkshopに会社から参加させてもらえることになった。半人前なのに個人的な作家活動も応援してもらっていて(どちらかというとさぼってるから怒られてるくらいで)、そういう投資的な、明日から現場で即使えるようなものじゃなくても面白がってもらえる環境というのはありがたい。

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回押さないとアクティブにならなくなりました...。

Encapsulation

前回の続き。短いけど。
何でメインになるプログラムのところでt.x++とかして値を代入しないのか、という話。
tを動かすには速度を代入すればいいから、普通の感覚だとt.x += vx;って感じにすると思う。

これはEncapsulation(カプセル化)というやつで、オブジェクト指向プログラミングの基本のひとつ。クラスの外から値を変えたりできないようにする。単純に言うと「オブジェクトのデータに直接アクセスするのではなく、メソッドを使え」ということらしい。
つまりt.go()で動くようにThingクラスを作っておくという訳。

なんだけど、Vectorクラスについては変数をパブリックにしておくと何かと便利なので、今回は例外にして、別のクラスでちゃんとやろうとのこと。Actionscript3.0アニメーションもそんな感じだったな...(13ページの「クラスとOOP」参照)まぁでもその程度のレベルでもこれだけのことができるってのがポイントだと思うので、あんまり堅く考え過ぎないようにしよう。