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

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

Reading newsfeeds

GainerでおなじみアカデミーDSPの小林さんがnodeboxワークショップやってる。
DSP

天気情報のrssを取得して表示。webライブラリを使う。
NodeBox | Web

text()メソッドに渡す際にstr()メソッドを使うんだけど、utf-8にdecodeしないとエラーになる。デフォルトのエンコーディングがutf-8になってないから？
3. 形式ばらない Python の紹介

文字コードは常に悩みの種。いつも何となく解決してるので、ちゃんと理解せねばと思う。

web = ximport("web")
fontsize(10)
news = web.newsfeed.parse("http://weather.livedoor.com/forecast/rss/21/40.xml") 
y=0
xoff=10
yoff=10
for i in news.items:
    s = str(i.description).decode('utf-8')
    text(s, xoff, y*30+yoff)
    y+=1

同じことをprocessngでやるとこうかな。もっと泥臭い感じ。
関係ないけど文字表示する場合PFont.list()で一覧とって配列の一番最初のを指定してあげればいちいちメニューからCreate Font...しなくて済む。

import processing.xml.*;
XMLElement xml;
XMLElement[] siteData;
xml = new XMLElement(this, "http://weather.livedoor.com/forecast/rss/21/40.xml");
XMLElement site = xml.getChild(0);
siteData = site.getChildren();
PFont font;
String[] fontlist = PFont.list();
font = createFont(fontlist[0], 10);
textFont(font);
size(400, 400);
int y = 0;
for(int i=0;i<siteData.length;i++) {
  if(siteData[i].getName().equals("item")) {
    XMLElement[] items = siteData[i].getChildren();
    for(int j=0;j<items.length;j++) {
      if(items[j].getName().equals("description")) {
        text(items[j].getContent(), 10, y*30);
        println(items[j].getContent());
        y++;
      }
    }
  }
}

today's glitch 3

この間、youpyさんに教えてもらったOSXで超簡単にglitchする方法で、

cat ファイル名 | sed 's/9/1/g' > ファイル名

てのがある。
sedコマンドで

s/検索文字列/置換文字列/g

って感じで数値を置換してる。数値を変えると結果も変わる。ファイルはmp3とかもいける。

同じようにprocessingでも単純にバイナリ形式で開いて、if文で置換。
数値は色々試さないとできたファイルがうまく開けなかったりする。finderのプレビューで見るのと、アプリケーションのプレビューで見るのと、photoshopで見るので結果が違ってたりする。

byte[] b = loadBytes("hysysk.jpg");
for(int i=0;i<b.length;i++) {
  //println(b[i]);
  if(b[i]==18) {
    b[i]=1;
  } else {
    b[i]=b[i];
  }
}
saveBytes("glitch.jpg", b);

sonic typeface interactive

processingでは、例えばPImage型の変数imgを作って、
img = get();
とすればスクリーンをキャプチャできるので、テキスト入力しながら音を出すことは簡単にできた。
画像はHello worからHello worlになるところ。波形エディタでこれくらいにまで拡大して、再生するとアニメーションみたいなものにもなる。再生ポイントに合わせて動いてくれないと駄目だけど。
hello world.wav

波形エディタはaudacityってソフト使ってます。
フォント変えると音も違う。Helvetica Neue UltraLightとか音も細いよ。

最初気づかなかったけど、波形エディタでみると音の始めにずっと1.0が入ってた(ヘッドフォンしてるとバツッときてあと無音で圧迫感)。なんだろうと思ってたんだけど、setup()メソッドの中でbackgroundを明示的に初期化してなかったせいで、デフォルトの値がマッピングされちゃってた。processingのwindowを目で見ただけではわかんなかったけど、耳ではバツッてのがわかって、波形エディタで確認するとよくわかるのが面白い。

スポイルされちゃう部分もあるから絶対最強最高って訳じゃないし、方向性もぶれちゃったりするけど、とにかくものができると色々発見もあるし考えられる。

applet
テキストエディタ感覚で文字打てる。文字数多いとピッチも上がる。deleteで消せる。領域内をクリックしないと動かないかも。アルファベットのみ。

sonic typeface

先日衝撃を受けたオシロスコープに猫及びポルノ画像。

これはtex/tspの音響生成エンジンに使えるのではと思い試してみた。とりあえず文字の画像データを用意して、そいつを2値化して振幅に変換。とりあえず読めるレベルにはなってるのではないだろうか。詳しい解説はまた後で公開します。このアルゴリズムは多分最終成果物にはしない感じなので...。
Helvetica Neue 75 Boldを240ptで使用。



オシロスコープで出したいなー。

元画像。コード書き換えて反転なしでできるようにしよう。



processingではこんな画像ができる。



音はこんな感じ。ご家庭の波形エディタなどで読めるかどうか試してみて下さい。
ktkr.wav

sketch20070926

itunesのlibraryの一部を視覚化。綺麗に見せる方法はもっと考える必要あり。
この辺参考に。
Yahoo! Design Innovation Team
QQ!'s photosets on Flickr

sketch20070921

図書館で借りた奥村晴彦著『C言語による最新アルゴリズム辞典』読みながらprocessingでsketch。

最新っても8年前のだけど。

lorenzアトラクタを描くアルゴリズムに、色々変な値突っ込んで遊んだ。繰り返しをめちゃめちゃに増やしたり、xとy入れ替えたり。

ドラゴンカーブとかも試したんだけど、どっか間違ってるらしくちゃんと描けてなくておもろい。
いかにもカオス系っぽい感じをなくしつつ、調整すればそれはそれでありなんじゃないかと思いました。視覚効果的には。アルゴリズムグリッチ。

...真面目に勉強します。

python版とかやってる人もいます。
Pythonでアルゴリズム - Konnichiwa, A doumo



これは割と素直な描画のコード。元になってるCのコードみたいに表示位置をうまく指定する関数とか書けなかったので結果見ながら調整してます...。

float a = 10.0;
float b = 28.0;
float c = (8.0/3.0);
float d = 0.01;

float xpen = 0;
float ypen = 0;

int h = 0;
int alp = 0;
int dir = 1;

void setup() {
  size(400, 400);
  background(255);
  smooth();
  strokeWeight(0.05);
  int k;
  float x, y, z, dx, dy, dz;
  
  x = y = z = 1;
  
  scale(14);
  translate(14, -20);
  
  for(k = 0; k < 3000; k++) {
    dx = a * (y - x);
    dy = x * (b - z) -y;
    dz = x * y - c * z;
    x += d * dx;
    y += d * dy;
    z += d * dz;
    if(k > 100) {
      plot(x, z);
    } 
    else {
      move(x, z);
    }
  }
  saveFrame("lorenz.tif");
}
void move(float x, float y) {
  xpen = x;
  ypen = y;
}

void plot(float x, float y) {
  if(alp<0 || alp>100) {
    dir = -dir;
  }
  alp = alp + dir;
  println(alp);
  stroke(0,alp);
  //point(x, y);
  line(xpen, ypen, x, y);
  xpen = x;
  ypen = y;
}

brainf*cksp

bfsp

brainf*ckをp5に移し替えて、tex/tspと混ぜ合わせてちょっと改変。現在オシレータのみ実装。ロジックの部分はbrainf*ckそのまま。while文にあたる[]を()に変えた。+-でポインタ内の数値を上げ下げして、オシレータにはその数値を渡す。ここが迷ってるなぁって感じ。[]でループを作る場合は強制的に矩形波を鳴らしてしまう、という設計にしてもいい気がする。

書き方は
>　ポインタを1進める
<　ポインタを1戻す
+ ポインタの指す要素の値を1増やす(インクリメント)
- ポインタの指す要素の値を1減らす(デクリメント)
. ポインタの指す要素の値を外に出力、音を鳴らす
( ポインタの指す要素の値が0であれば対応する次の)までジャンプ
) ポインタの指す要素の値が0でなければ対応する前の(までジャンプ
~ サイン波を生成
/ ノコギリ波を生成
^ 三角波を生成
[ または ] 矩形波を生成

440Hzのサイン波を鳴らすには
++++++++++++++++++++++(>++++++++++++++++++++<-)>~.
とすればいい。簡単に説明すると(の前の+の数だけ()の中を繰り返している。
以下、詳しい説明(本当に自分がわかってるか確認用)。

ソースコードのmがポインタ、mpがポインタの要素の値。初期値は0。

左から右に処理が流れる。
m[0]の要素の値mpがどんどん+で増やされていく。
+は22個なのでm[0]=22。
(にぶつかる。m[0]の要素の値は22で0ではないので、そのまま進む。
>でポインタをインクリメントしm[1]にする。以後の+はm[1]の要素の値に対して行われる。初期値は0。
+が20個。m[1]=20になったところで
<でポインタを1戻してm[0]に。
-でm[0]の数値をデクリメント。
m[0]=21
)にぶつかる。m[0]=21で0でないので(に戻る。
>でポインタがm[1]になる。
+が20個。m[1]=40になるまでインクリメント。
<でまたポインタがm[0]に戻る。
-でm[0]の数値をデクリメント。
m[0]=20
という感じで、20足すループを22回繰り返す。m[0]=0の時は)を通り抜ける。
<でポインタをm[1]にし、その数値440を~に渡してあげて、.で出力すれば440Hzのサイン波が鳴る。ついでにｸという字もコンソールに出力される。

適当なエディタに上記のコードを書いて保存(拡張子はbとかtxtとか)し、processingのコードを実行してみて下さい。ウィンドウが出るので、クリックして、ファイルを選びます。
うまくいけば実行されます。元々のbrainf*ckは,でコンソールからの入力とかもとれるのですが、processingではちょっと面倒だったので実装してません。eclipseとかで動かしてれば別ですが。

音を鳴らすにはminimライブラリが必要です。
Code Log » Minim

brainf*ck参考リンク。
彼のInterpreterをほぼそのまま使ってます。
UMMO Letters » The Java Brainfuck Compiler
brainf*ckのコーディングについて参考にしたページ。
Brainf*ck
Brainfuck - Wikipedia, the free encyclopedia

もうちょっと使いながら何ができるか考えていこう...。
こういうのも面白いかもしれない。
西尾泰和のブログ: GRINEditを使ってソースコードの可視化


インタプリタ部分のライセンスです。僕のとこに関してはpublic domainで。
Copyright (C) 2002 Petter E. Stokke

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

sketch20070727

sketch20070722

マイクの入力とりつつ動かしてみる。minimで何故かマイク入力のエラーが出るのでessで。どっちがどうとか調べてまたまとめるつもり。

sketch20070719

今回はFFT使って周波数帯域毎に分けるsketch。

FFTクラスのインスタンスにgetBand()メソッドを送り、引数にインデックスを与えてその周波数帯の値を得る。
サンプリングレートが44100HzでFFTサイズ(timeSize)を512にしているので、帯域幅は44100/512≒86Hz。つまりgetBand(0)は86*0=0Hz、getBand(1)は86*1=86Hz、getBand(2)は86*2=172Hz...という風に86Hz毎に周波数のエネルギーを解析する。0から20までのインデックスをfor文で回す。さらにその中でif文を使って高域・中域・低域に分けている。やっとMax/MSPでやってたことがコードになってきた。

fftstudy : Built with Processing

マウスの位置をサイン波の周波数にマッピングしたものも作った(processingIDEで実行すると周波数がprintされてます)。

mousine : Built with Processing

sketch20070712

minimで音響解析(といってもfftは関係なく、AudioPlayerのインスタンスからget()メソッドで音量取ってるだけです)。最終的にはこういう感じにしたい。

動いてる様子。
sketch20070712

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

sketch20070627

tex/tspをfileから読めるようにした時に出て来た人。横山裕一みたい。

minim用に書き直したやつとか何となく考えてる方向だとDasherみたいな入力方式が面白いのかも。
Inference Group: Dasher Project: Home

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()

sketch20070611_tsp

sketch20070611_tex

sketch20070607

NodeBox、まだ何するかは決めてないけど何となく役に立ちそうと思ったのは、当たり前かもしれないけど普通にpythonが動くこと。「初めてのPython」読みながらちょっと試す。

urllibモジュール使ったりすれば簡単にネットからデータを取得できる。google.co.jpのトップページ。wordscountのとこで適当な言葉を指定して、使われてる回数分四角を表示する。

from urllib import *
page = urlopen('http://www.google.co.jp')
data = page.read()
size(400, 800)
wordscount = data.count('google')
for i in range(wordscount):
rect(i*15, 0, 10, 10)
fontsize(9)
text(data, 0, 10, WIDTH)
page.close()

こういうのをもっと洗練させていけば色々面白い視覚化ができそう。pythonとかネットワークの勉強にもなるし。pdfとquicktimeムービーが書き出せるのもいい。mail用のモジュールもある訳だし、スパムメールの視覚化とか。こういうの。もうちょいポップなやつ作りたい。

他パラパラとめくりながら試してたやつ。

word = 'xo'
z = eval("word*10")
text(z, 0, 13, None)

とか。便利。

import os
print os.listdir(os.getcwd())

とかでカレントディレクトリにあるディレクトリのリスト出したり。os.mkdir('filename')でディレクトリ作ったりもできる。まだコンソールに出してるだけだけど、グラフィックにすぐ反映させられるはずで、それはやっぱ面白い。

こういうのは結構無駄っぽいけど、無駄な分あんまり人がやらない感じで、それによってあんまり見たことないようなグラフィックなりサウンドが生成できたらいいなぁと思う。同時にアルゴリズムとかコンピュータのコアな部分の勉強にもなりつつ。

あと、processingだとこれは多分こんなに簡単にはできないってのは、NodeBoxのfiles()メソッド使ってマウスダウンしてる間指定したフォルダ(絶対パス)内のjpgファイルをランダム表示。結構脳にくる。

size(600, 600)
speed(30)
def setup():
global f
f = files("/Users/poki_j/Documents/downloads/clipping/*.jpg")

def draw():
global f
if mousedown:
image(choice(f), 0, 0)

processingだと基本的にはスケッチフォルダ内にdataってフォルダ作ってそこに画像ファイル入れて読み込むし、読み込むファイルも拡張子だけの指定な場合、多分javaから何かしらをimportしないといけなさそう。そういう方法も知っといた方がいいような気はするけど。

tex/tsp20070604

ゼミでの発表と現状。新奇性だとか何がしたいかとか一番苦手なとこを突っ込まれる。苦手克服のためにやってるので我慢。
音響的に面白くなるだけでは厳しいようだ。テーマになり得るとすれば「どこまで人間が操作して、どこから計算機に任せるか」とかその辺らしい。もっと他の作品を分析せよとのこと。何故こんなことをする必要があるのか。作曲なのかツールなのか落としどころをはっきりさせる。
改善すべき場所は自分でも分かってるし続けてくうちにブレイクスルーはあると思ってるから別に焦ることもないんだけど。

snapshot20070604

とりあえずタイポ作ってみた。クラス化してある。ていうとことか割と新奇性につながりそうなんだけど。ちゃんと説明してなかったのが悪いのかな。あとFFTして音量出してる。

to do
アルゴリズム見直し。
制御構造。
minim(1.1出た)に乗り換え。

音響的な部分以外での面白さって何だろう。それ追求するのに色々試しやすい環境としてはやっぱprocessing素晴らしいな。