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;
}

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

trash0003

pegは楽しかったまたやりたい。

ndl talk

適当に書いてる人がタイでちゃんとやってるプロジェクトのフライヤー作りました。

sketch20070727

sketch20070706

フライヤー作ってる。写真にハーフトーンかけるみたいなやつを作りたくって、photoshopでやればいいんだけどわざわざprocessingでやった。最初は写真の加工に使おうと思ったんだけど、最終的には装飾用の素材に使うことにした。svg書き出しして、illustratorで作ってたやつにそのままのっけたら意外と合った。mash upの気持ち良さ。微調整。

built with processngのカメラ画像をピクセレートするサンプルと同じようなもの。実行速度より使いやすさ優先でget()メソッド使ってる。彩度を半径にしたのはそれが一番いい感じだったから。あと、変数jiggleに乱数入れてちょっと揺らしてみたり。illustratorで開いた時に、見えないけどちっこい円ができてしまってて邪魔だったので、閾値以下の円は作らないようにした。

processing、ちゃんと生活に役立ってる。

import prosvg.*;

void setup() {
  PImage p;

  int imageWidth; 
  int imageHeight;
  p = loadImage("web.jpg");
  imageWidth = p.width;
  imageHeight = p.height;
  //size(p.width, p.height);
  size(p.width, p.height, "prosvg.SVGOut");
  noStroke();
  smooth();
  colorMode(HSB, 255);
  ellipseMode(CENTER);
  background(255);
  for(int i=0; i < imageWidth; i += 8) {
    for(int j = 0; j < imageHeight; j += 8) {
      color c = p.get(i, j);
      float rad = 30 * saturation(c)/255;
      if(hue(c)<220 && rad > 2) {
        fill(c, 100);
        float jiggle = random(5);
        ellipse(i+jiggle, j+jiggle, rad, rad);
      }
    }
  }
  //saveFrame("dots-####.jpg");
  saveFrame("dots-####.svg");
  saveFrame("dots-####.tiff");
}

sketch20070611_3

tutorialそのままでgoogleのhtmlをpathとって加工。Export as PDF...で普通にillustratorでpathの編集ができる。

from urllib import *
page = urlopen('http://www.google.com/')
data = page.read()
size(400, 800)

fontsize(9)
path = textpath(data, 0, 10, WIDTH)
points = []
for point in path:
    if point.cmd == CURVETO:
        point.ctrl2.x += 5
        point.ctrl2.y -= 10
        point.y += 5
    points.append(point)
drawpath(points)

page.close()

prosvg

tex/tspで出した音の波形を印刷したいんだけど、解像度とか編集のしやすさのことも考えるとillustratorのパスで扱えるようにしたい。てな訳でproSVGを使ってみた。

素直にここのを落としてlibrariesに入れてexample実行すればいけるかと思いきや、

Exception in thread "Thread-2" java.lang.NoClassDefFoundError:

で、forum見たら同じエラーで困ってる同じく初心者でよくわかりませーんという人がいて、どうやらエラーの内容はSVGOut.javaとSVGGraphics.javaがコンパイルされてない(.classファイルがない)ってことなんだけど、僕も彼もコンパイルの方法がわかんない。terminalから素直にjavacしただけでは駄目みたい。

で、スレッドの2ページ目でflorian jenettって人が代わりにコンパイルしてくれてます。日本では神と呼ばれる行為ですね。僕の環境は0124ですが、問題なく動いてます。thanks florian!

音響界のhello worldことサインウェーブ。100*100で書き出して適当にillustrator上で拡大。最高。頂点結ぶのがスマートっぽいけど、とりあえずこれで。.tifファイルも書き出しとくとプレビューできていい感じ。

import prosvg.*;
void setup(){
  size(100,100,"prosvg.SVGOut");
  strokeCap(ROUND); 
  stroke(0,100);
  smooth();
  background(255);
  strokeWeight(0.5); 
}

void draw(){
  float a = 0.0;
  float inc = TWO_PI/100.0;

  for(int i=0; i<100; i++) {
    line(i, 50, i, 50+sin(a)*40.0);
    a = a + inc;
  }
  saveFrame("testFlowers-####.tif");
  saveFrame("testFlowers-####.svg");
  noLoop();
}

sketch20070517

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)));
}