20081228

2008と打つのももう最後かも。

少し部(署の)活動とかがありつつも無事仕事は納まった。働き始めて約半年。実は結構色々やった。案件毎にフォルダを分けて、日付毎に管理してるので、pastのフォルダを見るとそれがわかる。進行中のはongoing。

手を動かしてグラフィックを作る以外にも店舗調査したり企画書書いてみたり。タクシーの乗り方も学んだ。

興味の幅が広がった。サービスデザインやビジネスモデルの提案は、僕自身はあまり深くは関わっていないけれども、同じ部屋で会議してたり、雑談してたりして、色んな単語が勝手に耳に入ってくる。CRM、JITボックス、テキストマイニング、マーケットイン、プロダクトアウト。。。検索すると沢山でてくるけど、今まで全く知らなかった世界。まだまだある。

山口行ってからというもの、週末はどこかに行きたくてしょうがない。今回の山口で行ったspongyとか金子さんの作品が売っている店はナガオカケンメイの「デザイン物産展」にもBRUTASの地方特集にも載ってない。まだまだある。

学生時代よりは気分的に自由になって、割と何でもやるよという感じ。以前は興味と関係ないことはストレスでしかなかったけど、今はそういうものこそが新しい自分を作っていってくれてると思える。

20081206-20081207

12/6
木曜日くらいに中西君から山口行きのお誘いを受ける。いつも週末に持ち越し気味の仕事にキリをつけてprocessing monsterもやって、始発の飛行機(6:40)も予約して準備万端だったのに、目覚めた時には飛行機は飛んでました。

とりあえずシャワーを浴びて、冷静になって、携帯で羽田-山口宇部の空席状況を確認。そのまま予約できるのはもっと後の時間になるので「遅れます」と留守電を入れて羽田行きの電車に乗り込む。

9時過ぎに空港到着。このメンツ、このやり方、この曲でロックし続けるタイミングは多分もうないので、時価だと思ってビジネス特割のチケットを払い戻し、10時のフライト購入。

12時過ぎに宇部到着。雪。バスで新山口へ。雪強い。電車遅れる(そして少ない)。街中を舞台にしたパフォーマンス「山口市営Ｐ」の予約時間には間に合わないので山城に頼んで調整してもらう。

14時山口駅到着。歩いて会場を目指す。14:10の回。ドイツ人家族の3人に割り込ませていただく形になった。20年山口に住んでるそうで、現在は山口大学で教鞭をとられているとのこと。

「山口市営P」は山口市の商店街を舞台にして、様々なイベントを体験する。呉服店から始まり、古いタバコ屋さんの中だったりアーケードの上だったりスナックでおしるこを食べて裏口から出るとか、多分地元の人でも知らなかったり、あそこってどうなってるんだろうと思ってても行けないようなところに行けた。

アーケードの上は、多分僕だけじゃなくて、小さい頃から上ってみたい人はいたんじゃないかと思う。洗濯物などが干してあるため撮影は禁止となっていたが、変わった作りの建築や、都市の作られ方が見えて面白かった。アーケードがある街はアトラクションとして売り出せばいいと思う(広告脳)。

郊外に大型店舗ができ、街の中心部の商店街に活気がなくなって...というのはどの地方都市でも抱えている問題。彦根もそうだし、大垣もそうだった。僕は郊外の大型店舗も大好きなので、それぞれがそれぞれの良さを保ちつつ経済を循環させればいいと思うが、難しいのだろう。ピーターサヴィルがマンチェスターの都市計画クリエイティブ・ディレクターになったような感じで(うまくいってるかどうかはよくわかりませんが)、何かできないものだろうか。

「MASSIVE CHANGE」というブルース・マウの本に、「For most of us, design is invisible. Until it fails.」という言葉がある。多分、僕が信じてるアートも同じようなことで、見えていなかったものを見せてくれる。普段とは違う見方、違う距離感で、対象と向かい合うこと。向かい合わざるを得なくなる状況というか。自分の意識だけじゃなくて、向こうからガツンとくる感じも必要な訳で。

アーケードから屋上をつたって本屋を抜け、細い道の中から空き地を通ってゴール。ここで中西君、ノダモと合流。ひたすら平謝り。そして何故かYCAM関係者はじめ知人の全員が僕の遅刻を知っている。

しばらく歓談した後、秋吉台の芸術村で働いてる服部君の紹介でsponzyのマフラーや帽子を試着しまくる。とても素敵。巻物を購入。あと太いフレームの眼鏡と黒っぽい服と輸入車への興味があればクリエイターになれる。

YCAMへ移動し「minimum interface」。マルちゃんに案内してもらいつつ、takawoやzachの作品を展覧会場によくいる理屈っぽいうぜーやつになりつつ鑑賞。shinchikaの映像がとてもよかった。多分本当に好きなものとかは自分と違うと思うけど、世界の広さのようなものを感じて嬉しかった。

夜御飯の前に「湯田アートプロジェクト」へ。exonemoの毎度ながら気の利きまくった作品、UVAのクリスマスイルミネーション的なインスタレーション、足湯に入りながらのshinchika(すごい制作量)の映像作品、規模としては大きくないが満足度はかなり高い。3という数字のマジックについて話す。

御飯はIAMASのOBOGが揃って仕事の話や恋愛の話、マルちゃんの高校時代の話(実のお姉さんによる)など。2次会では市営Pのスタッフとも合流して突っ込んだ話など。皆それぞれ自分の道を進んだ結果の今ここだなという感じ。

3時頃山城と服部君が住んでるMarumachi Art Center(通称MAC)で就寝。素敵な一軒家。秋吉台で滞在制作している有佐君はお仕事。

12/7
朝8時に起きて温泉かと思いきや余裕で昼まで寝る。服部君に車を出してもらい寿司。14時過ぎ服部君は再び市営Pへ、中西君とノダモと僕は親子3代で来たい感じの温泉「山水園」へ。ウルトラリラックス。

3時半頃YCAMのレストランでコーヒー飲んで、服部君と合流して秋吉台へ。萩焼の作家金子司さんの作品を扱うお店でマグカップ購入。洒落てる。オレオレ日本物産展。

カルスト台地で一通りはしゃいで、商店街の皆に挨拶して僕と中西君は空港まで送ってもらう(本当にありがとうございました)。高速移動と温泉で疲れなし。羽田のアカシアで御飯食べながらこれからの話など。

ここ半年で最高の週末。これからもフットワークは軽めでいきたい。基本的に僕は都内から出たくない症候群(川を渡ればすぐ神奈川)で、インターネット最高主義者だけど、実際に動くことも大事。そのためにも一生懸命仕事して、お金を貯めようと思った。あと誰かが来たときのために自分の住んでる土地にもっと馴染もうとも思った。

「遠くである必要はなく、近くの路地裏にも異世界はあるかも知れない」、みたいな話を石川直樹がしてて、かっこつけ過ぎだろと思うけどあながち嘘でもない。

forward kinematics

関節みたいな動きのプログラミング。
ActionScript 3.0アニメーションからporting。
PVectorクラスを使ってみた。
Processing Monster作りたい。

walking.pde

Segment s1, s2, s3, s4;
float cycle = 0;
float offset = -PI*0.5;

void setup() {
  size(200, 200);
  smooth();
  frameRate(30);
  fill(255);
  s1 = new Segment(width*0.5, height*0.5, 30, 10);
  s2 = new Segment(s1.getPin().x, s1.getPin().y, 30, 10);
  s3 = new Segment(width*0.5, height*0.5, 30, 10);
  s4 = new Segment(s3.getPin().x, s3.getPin().y, 30, 10);
}

void draw() {
  background(255);
  walk(s1, s2, cycle);
  walk(s3, s4, cycle+PI);
  cycle += .2;
}

void walk(Segment segA, Segment segB, float cyc) {
  float angleA = sin(cyc) * HALF_PI*0.25 + HALF_PI;
  float angleB = sin(cyc+offset) * HALF_PI*0.17 + HALF_PI*0.12;
  segA.rotation = angleA;
  segB.rotation = segA.rotation + angleB;
  segB.x = segA.getPin().x;
  segB.y = segA.getPin().y;
  segA.render();
  segB.render();
}

Segment.pde

class Segment {
  float x;
  float y;
  float w;
  float h;
  float rotation;
  PVector v;
  
  Segment(float x, float y, float w, float h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    v = new PVector();
  }
  
  void render() {
    pushMatrix();
    translate(x, y);
    rotate(rotation);
    rect(0, -h*0.5, w, h);
    ellipse(0, 0, 2, 2);
    ellipse(w, 0, 2, 2);
    popMatrix();
  }
  
  PVector getPin() {
    v.x = x + cos(rotation) * w;
    v.y = y + sin(rotation) * w;
    return v;
  }
}

20081110

20081108
make tokyo meeting 02行って来た。案の定同窓会と化して挨拶ばかりしていた。
インターネットでおなじみの人達にも会えて良かった。もっと話したかったけど。
ガセネタリウムは確かに佐竹の言葉通り「make:の精神を見た」。

中西君がエディトリアルしたmaking things talkを買おうと思ったが売り切れ。
学食も終わっていて失われた青春が帰ってくることはなかった。

20081109
食べ過ぎで寝過ぎ。会社で亀の世話をしつつプログラミング。making things talkがないので手で餌をやってぶちまける。natzkeのas3のコードを自分なりの解釈でp5にポーティング。気づいたら妖怪終電逃しに会う。


20081110
今月末メディアリテラシーの授業でprocessingを紹介することになったのでランチがてら打ち合わせ。完璧なプログラミングは教えられないけど、初心者がつまづくところには気づけるかも知れないし、アートとデザインの文脈でそれなりに話せることはあるつもり。人のワークショップの資料読みながらどうするのがいいのかとか考える。

仕事もちゃんとした。芸コマ。

build ribbons

erik natzkeのflash on the beachの発表なのかな。jonathan harrisへのレスポンスと一緒に上げられてた気がするけど。
Untitled Document
Flash on the Beach and “The Jonathan Harris Affair” | THOMAS KRÄFTNER

これのParticlesのソース見て、動かしてみて、この書き方がいいのかどうかは知らないけどprocessingでもループ内でnewしてParticlesを生み出したいと思った。最初に思いついたのが配列を使って実現する方法。サイズの宣言と値を代入する必要があるので、適当に埋めてやってたんだけど、ださい(し、これでは意味がない。最初に決まった数のオブジェクトを作るんじゃなくて、ループの度に増やしたい)。

とりあえずParticleクラス
Particle.pde

class Particle {
  float x;
  float y;
  float vx;
  float vy;
  float rad;
  
  Particle(float x, float y, float vx, float vy, float rad) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.rad = rad;
  }
  void draw() {
    x += vx;
    y += vy;
    ellipse(x, y, rad, rad);
  }
}

実行するメインのコード。
particleTest1.pde

Particle[] p = new Particle[500];
int idx = 0;
float rad = 10;
void setup() {
  size(800, 400);
  fill(0);
  smooth();
  for(int i=0;i<p.length;i++) {
    p[i] = new Particle(0,0,0,0,0);
  }
}

void draw() {
  background(255);
  spawnParticles();
  drawParticles();
}

void spawnParticles() {
  if(idx>p.length-1) {
    idx = 0;
  }
  float vx = random(-1, 1);
  float vy = random(-1, 1);
  p[idx] = new Particle(mouseX, mouseY, vx, vy, rad);
  idx++;
}

void drawParticles() {
  for(int i=0;i<p.length;i++) {
    p[i].draw();
  }
}

actionscript3の場合は描画されるオブジェクトはディスプレイリストで管理されるから、addChildでひたすらオブジェクトを追加しつつ増え過ぎたら削除、みたいな書き方ができる。
processingでもそんな方法はないのかなと思ったらサンプルにあった。
ArrayListClass \ Learning \ Processing 1.0 (BETA)

これはBallクラスにlifeプロパティをもたせてあり、255回ループで呼ばれたらfinished()メソッドがtrueを返して、ballsから削除されるようになってる。

(Example>Topics>Simulate>MultipleParticleSystemsとかもいい。nature of codeでやったVector3DクラスがPVectorクラスとして組み込まれてる。各メソッドについてもサンプルがついてて親切。)

for (int i = balls.size()-1; i >= 0; i--) { 

は毎回balls.size()を参照しなくてもいいようにするかっこいい書き方。

というのを参考にしつつ、一定数超えたら削除していく方法で書き直したのがこれ。前出のParticleクラスはそのまま使える。
ArrayList使った思い通りの方法。
particleTest1_2.pde

ArrayList particles;
float rad = 10;
void setup() {
  size(800, 400);
  fill(0);
  smooth();
  particles = new ArrayList();
}

void draw() {
  background(255);
  spawnParticles();
  drawParticles();
}

void spawnParticles() {
  float vx = random(-1, 1);
  float vy = random(-1, 1);
  particles.add(new Particle(mouseX, mouseY, vx, vy, rad));
  if (particles.size()>500) {
    particles.remove(0);
  }
}

void drawParticles() {
  for(int i=particles.size()-1; i >= 0; i--) {
    Particle p = (Particle)particles.get(i);
    p.draw();
  }
}

(11/7修正)重力のための変数gravityを削除。まだ関係ないので。

non-formatize

六本木のTSUTAYAでお洒落なデザイン本などを眺めていたら発見したnon-formatの作品集。
これの左上。
で大体やりたいことはわかると思うけど、やってみました。

輝度が低い、暗いとこは振幅を大きくして、線が重なることで濃くしてある。だけ。
オリジナルに近づけるにはもうちょっと詰める必要あるな。元画像の作り方にも左右されると思うけど。

モナリザの画像探してる時に見つけたこんなんもある。錯視とかもっと勉強したい。

トラック毎に切り分けて音で聴けるようにしたいところだけど、それはまたいずれ。
最新版(0154)だとminim音鳴らないし。
Processing 1.0 (BETA) - Minim problem... I can't hear ANYTHING

flashでもできるな。BitmapDataクラスでgetPixel()して、値をSampleDataEventに渡す感じだろうか(地味に昨日flashでsine wave鳴らすの直した)。ファイル書き出しもできるからwaveファイルとかも作れるし(miztにソースいただきました)。

ビジュアルからインスパイアされて誰にでも説明できる方法で音作りに持っていけるようになったのはよかったよね。

scriptographerでやりたい。

PImage img;
int x = 0;
int y = 0;
int imgW;
int imgH;
float val;
float amp;

background(255);
colorMode(HSB, 255);
img = loadImage("lisa.jpg");
imgW = img.width;
imgH = img.height;
size(imgW*2, imgH);
image(img, 0, 0);

loadPixels();
for(y = 0; y < imgH; y++) {
  for(x = 0; x < imgW; x+=5) {  
    val = brightness(pixels[y*imgW*2+x]);
    amp = (255-val)*0.05;
    stroke(100, amp+100);
    line(imgW+x-amp, y, imgW+x+amp, y);
  }
}
saveFrame("nonformatize.jpg");

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

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

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」参照)まぁでもその程度のレベルでもこれだけのことができるってのがポイントだと思うので、あんまり堅く考え過ぎないようにしよう。

Vectors

nature of codeをちゃんとやろうと思った。何となく読んだりコード書き換えてみたりはしてたんだけど、いくつか勉強しておきたい項目を取り上げて書くつもり。まずはVectorsから。実はVector3Dクラスが何をしてるのかとかよく理解してなかった。

motion 101のメインになる部分(hellomotion.pde)とThingクラスの余計なところを削って円の動きだけに注目。Vector3Dクラスを使うにはVector3D.javaをAdd File...でスケッチフォルダに追加するかライブラリを入れてimport noc.*;と書いておく必要がある。

vec3dmotion.pde

Thing t;
void setup() {
  t = new Thing(new Vector3D(0.01, 0.01), new Vector3D(0, 0), new Vector3D(0, 0));
}

void draw() {
  background(204);
  t.go();
}

Thing.pde

class Thing {
  Vector3D loc;
  Vector3D vel;
  Vector3D acc;
  
  Thing(Vector3D a, Vector3D v, Vector3D l) {
    this.acc = a.copy();
    this.vel = v.copy();
    this.loc = l.copy();
  }
  
  void go() {
    update();
    borders();
    render();
  }
  
  void update() {
    vel.add(acc);
    loc.add(vel);
  }
  
  void borders() {
    if(loc.x > width) {
      loc.x = 0;
    }
    if(loc.x < 0) {
      loc.x = width;
    }
    if(loc.y > height) {
      loc.y = 0;
    }
    if(loc.y < 0) {
      loc.y = height;
    }
  }
  
  void render() {
    ellipse(loc.x, loc.y, 10, 10);
  }
}

位置は点(Points)であり、速度/加速度はベクトル(Vectors)。コーディングをシンプルにするために、これらを全てベクトル(大きさと方向)として扱う。

setup()メソッドの中でThingクラスのインスタンスを作る時に、Vector3Dのインスタンスを生成して値を渡してるんだけど、この時の引数が2つ(new Vector3D(x,y))だと2次元、3つ(new Vector3D(x,y,z))だと3次元になる。実際には2つの場合はzに0が入るというだけなのでVector3Dのインスタンスは常にx,y,zで3次元の値を持ってるんだけど。

Thingクラスのコンストラクタではcopy()メソッドを使って、先ほど生成されたVector3Dクラスのインスタンス変数からThingクラスのインスタンス変数に値をコピーして格納してる。

加速度から速度を導いて、速度から位置を導く、という流れ。

Vector3D使わないとすればこうなる。
normalmotion.pde

Thing t;
void setup() {
  t = new Thing(0.01, 0.01, 0, 0, 0, 0);
}

void draw() {
  background(204);
  t.go();
}

Thing.pde

class Thing {
  float x;
  float y;
  float vx;
  float vy;
  float ax;
  float ay;
  
  Thing(float ax, float ay, float vx, float vy, float x, float y) {
    this.ax = ax;
    this.ay = ay;
    this.vx = vx;
    this.vy = vy;
    this.x = x;
    this.y = y;
  }
  
  void go() {
    update();
    borders();
    render();
  }
  
  void update() {
    vx += ax;
    vy += ay;
    x += vx;
    y += vy;
  }
  
  void borders() {
    if(x > width) {
      x = 0;
    }
    if(x < 0) {
      x = width;
    }
    if(y > height) {
      y = 0;
    }
    if(y < 0) {
      y = height;
    }
  }
  
  void render() {
    ellipse(x, y, 10, 10);
  }
}

これはこれでわかりやすい。けど多分後々Vector3Dが効いてくるんだと思う。

ベクトルとかの数学的な概念とか、コード使ったアニメーションで勉強になるのは『ActionScript 3.0 アニメーション』。
スクリプトだけで全部やるからflash持ってなくても動くものが作れる。flex環境のセットアップとかも丁寧に書いてあるしその辺は検索すれば出てくる。値段は高いけど、夏休み(もう大分過ぎてますが)にこれ1冊やると思えばどっか遊びに行くより楽めるし安い。続編も出るらしいし。

processingとActionscript3.0の行き来はそれほど苦ではないと思うので、両方読み書きできるといいと思う。既に使えるソースコードが沢山公開されてる訳だし。

今までは使えそうなコードを集めて勘でプログラミングしてたんだけど、細かい調整できるようにそろそろスクラッチでも色々ちゃんと書けるようになりたい。DJからトラックメイカーへ。

自前のblog環境整えないとな、と思う。かゆいところに手が届かないストレスで投稿が減ってるってのもあるから、何とかしたい。

20080727

昨日はボ会というボードゲームをする会に参加させてもらって、朝までボードゲームやってた。大人数で時間とってゲームやる機会なんてあんまりない(1プレイ半日かかるやつとかもあるらしい)し、色んなゲームができたのが単純にすげーよかった。相当好きな人達が集まってるので、ゲームの由来だとかコンセプトの話聞くだけでも相当楽しい。

最後のゲームで1位になって、賞品としてStone Ageというゲームを頂きました。ありがとうございます。

会社の先輩に誘われて行ったんだけど、主催が佐々木さんっていうIAMASの先輩だった。大橋さんもいた。この二人はIAMAS入学前にめちゃwebみてた。佐々木さんのインタラクティブなアニメとか、大橋さんのコマドリ兄弟とか倉橋ヨエ子のPVとかすげー覚えてる。ご活躍されてます。

ショーケンとかもそうだけど遊び方がうまい人っているなぁと思う。基本的にはコミュニティの作り方だと思うけど。

皆で人狼やりたい。diamantsも盛り上がるし、小物が洒落てる。Cash'n Gunsとかごきぶりポーカーも良かったな。
昔は割と親が人呼ぶの好きで、結構大人数でボードゲームとかカードゲームやったりした記憶がある。今生きてるモチベーションの大半はそういうのをまたやること。

なんだけど、遊ぶと罪悪感が生まれてくる性格なので会社で少し仕事した。毎日一つくらいは何か新しいこと覚えたい。

using flickr api 01

flickrから画像を取得する方法。提供されてるAPIを使う。使用の際に必要となるAPIキーはここで取得。
http://www.flickr.com/services/api/keys/

よく使われてるのはこのライブラリらしい。
as3flickrlib - Google Code

ライブラリ使わなくてもある程度は自分でできる。
[Think IT] 第4回：外部API（Flickr）を試す！ (1/3)

MVCモデルを使ってとか、僕にはまだわかりません。
下にあるコードは手っ取り早く使う場合とか、前段階として。
慣れだと思うけど、一回散らかさないと片付け方がわからない。

とりあえず、ブラウザに直接URLを入力してみると、xmlが返ってくる。
例えば、「test」というキーワードで全文検索して10件取得した1ページ目だったらこんな感じ(見やすいように改行入れてますが本来は一行です)。

http://api.flickr.com/services/rest/
?method=flickr.photos.search&api_key=取得したAPIキー
&text=test&page=1&per_page=10

結果。


他のを試したければここに出てるargumentsから選んで&でつないで=で代入すればいい。
&tags=music
とか。
Flickr Services: Flickr API: flickr.photos.search

ここまでくれば、あとは普通にxmlの処理するのと一緒。
SSAW07 » 第5回：ActionScript 3.0応用 I - 外部イメージの読み込み

Make your own Flickr search engine with Flash and AS3 | The Tech Labs

thinkitにも書かれているように、crossdomain.xmlをロードするのを忘れずに。

さらに、flash CS3とかで動かしてるブルジョアは大丈夫かも知れませんが、普通にflash player落としてXcodeとかで開発してる場合、セキュリティのエラーが出ると思う。

FlashPlayerTrustというフォルダを作り、Macintosh HD/Library/Application Support/Macromedia/に保存。その中にcfgファイルを作る(名前は何でもいいそうです。とりあえずmm.cfgとかにしておく)。
cfgファイルに目的のswfやフォルダのパスを設定する。こういう話題はどこに書いてあるかというと、ここからダウンロードできるpdfです。そんなん知らんよね。
Adobe - Developer Center : White paper: Adobe Flash Player 9 security

これもどうやって辿り着けたのか思い出せないが、とにかくここのドキュメントはダウンロードしていつでも参照できるようにしておく。
Adobe Flex resources

testで全文検索した結果から10枚表示。マウスクリックで表示順変更。
YOUR API KEYの部分を取得したAPIキーと差し替えないと実行した時にエラーが出て表示されません。

package {
 import flash.display.MovieClip;
 import flash.display.Stage;
 import flash.display.StageScaleMode;
 import flash.display.StageAlign;
 import flash.display.Bitmap;
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.text.TextField;
 import flash.net.URLRequest;
 import flash.net.URLLoader;
 import flash.display.Loader;
 import flash.system.LoaderContext;

  public class TestFlickr extends MovieClip {
  private var APIkey:String;
  private var text:String;
  private var searchURL:String;
  private var startPage:uint = 1;
  private var pageValue:uint = 10;
  
  public function TestFlickr() {
   stage.scaleMode = StageScaleMode.NO_SCALE;
   stage.align = StageAlign.TOP_LEFT;
   stage.addEventListener(MouseEvent.CLICK, onMouseClick);
   init();
  }
  
  private function init():void {
   //your API key
   APIkey= "YOUR API KEY";
   //search word
   text = "test";
   
   search();
  }
  
  private function search():void {
   while(this.numChildren > 0){
    this.removeChildAt(this.numChildren-1);
   }
   setSearchURLString();
  }
  
  private function setSearchURLString():void {
   var baseURL:String = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=" + APIkey;
   searchURL = baseURL + "&text="+ text + "&page=" +startPage + "&per_page=" + pageValue;
   trace(searchURL);
   startXMLLoad();
  }
  
  private function startXMLLoad():void {
   var req:URLRequest = new URLRequest(searchURL);
   var XMLLoader:URLLoader = new URLLoader();
   XMLLoader.addEventListener(Event.COMPLETE, onXMLLoadComplete);
   XMLLoader.load(req);
  }
  
  private function onXMLLoadComplete(e:Event):void {
   var imgLoader:URLLoader = URLLoader(e.target);
   var xmlData:XML = XML(imgLoader.data);
   
   var xmlList:XMLList = xmlData.photos.photo;
   for(var i:uint = 0; i < pageValue; i++) {
    var farm:String = xmlList[i].@farm;
    var server:String = xmlList[i].@server;
    var id:String = xmlList[i].@id;
    var secret:String = xmlList[i].@secret;
    var imgURL:String = "http://farm" + farm + ".static.flickr.com/" + server + "/" + id + "_" + secret +".jpg";
    trace("URL:" + imgURL);
    var imgReq:URLRequest = new URLRequest(imgURL);
    var loader:Loader = new Loader();
    
    loader.contentLoaderInfo.addEventListener(Event.INIT, loadImageInit);
    loader.load(imgReq, new LoaderContext(true));
   }
  }
  
  private function loadImageInit(e:Event):void {
   var bitmap:Bitmap = e.target.content;
   addChild(bitmap);
  }
  
  private function onMouseClick(e:MouseEvent):void {
   setChildIndex(getChildAt(0), numChildren - 1);
  }
 }
}

20080721

本当はデザインに時間は関係ない。

py-appscript

面白そうなのでやってみた。
py-appscriptでiTunesで再生中の曲を取得する

sh setuptools-0.6c8-py2.5.eggのとこでzlibがなくてinstallできない。ここで少しはまった。

zipimport.ZipImportError: can't decompress data; zlib not available

わざわざzlibをインストールしたけど、pythonをコンパイルし直すとかよくわからず。
もういいやと思ってpythonのバイナリ入れ直そうかと思ったけどエラーでインストールできない。

macportsでpythonを入れてあるのが原因ぽく、Python macports zlib で検索。
» ( ﾟ∀ﾟ)o彡° Python! Python! easy_install! MacPorts!　| ヲゾゾ wozozo blog

ということで、terminalから

sudo port install py25-zlib

すればうまくいって、

sh setuptools-0.6c8-py2.5.egg

も無事できた。

わからないことだらけ。

>>> import appscript
>>> itunes = appscript.app('iTunes')
>>> print itunes.current_track.album.get()
Baby cruising Love/マカロニ

でも安心できるの(一応動いたので)。
いまさらながらtwitter自動ポストとかもできるな。やらないけど。これとあれを組み合わせればできるなとか、別の言語でやる場合はこれに似た何かを探せば(できることなら作れば)いいんだなとかがわかれば収穫。やった気になって何もしないのは駄目だと思うけど。

これやりたい。
pachube :: connecting environments, patching the planet - Map of feeds

ipod、通勤中聴くけど、朝と夜ではあんまり意識してないけどボリュームが違ってて、朝に聴くと音量でかかったりして、前の日の夜の気分とかテンションみたいなものが音量として残ってる感じがして、何となく世界中の人々の音量を知りたいと思った。

bloggerの話だけど、preタグのline-heightとか日によって変わるの何で？

20080620

東京で働き始めました。肩書きはデザイナーです。
まだ僕自身は何もできてないんだけど、今まで普通に目にしてたようなものを作ってる現場。
3週間経ってちょっとずつ仕事が回ってきて、楽しい。

仕事してて一番勉強になるのは制作中のものを見られることで、大体の場合においてラフの段階が一番かっこいい。というのはデザイナーの癖みたいな部分がやっぱりかなり出ていて、そこから色んな制約とかクライアントからの要求によってバランスがとられていく。最終的にはいい感じに落ち着いて、それはそれでいいものになる。

今まではデザイン好きだけどデザイナーになれるかどうかわからなかったのであんまり本気出してない風でいたし、実際プログラミングしたり音楽作ったりして心の中で「僕はデザイナーじゃないし」みたいな言い訳してた。

ありがたいことに今の職場ではそういう色々やってるところを買ってもらえた訳だけど、変な話、やっとデザインに対して本気出せると言うか、自分が生きていく上で本気を出すことが一番重要な手段になった。一口にデザイナーと言ってもまたこれはこれで細かく種類があるんだけど、とにかく「デザインの仕事」という枠の中でうまく機能するように、ある程度方向性を絞り込んで取り組むようになるだけで以前とは随分違う。

まぁ、偉そうなこと言ってても電話の受け答えから書類の作り方まで、うまくできない。コピー用紙の取り替えとかお弁当の買い出しとか、下っ端だからやるんじゃなくて、そういうのも仕事のうちってことに気づくため。

6年前くらいにネットラジオとして聴いてたプログラムが、今は作業中のbgmとして隣の隣から聴こえてくるっていう状況には人生の機微を感じる。

adobe made some noise

BIT-101のコード試してもSamplesCallbackEventがどこにあるのかわからず発狂しかけた。
Astro Dynamic Sound! » BIT-101 Blog
Joa Ebertがフルコードをzipでくれ！てるからそれ参考にした。
Simple Astro synthesizer at blog.je2050.de - Blog of Joa Ebert

最新のsdkをダウンロードしてパスを通す。
Download Flex 3 - Flex SDK - Confluence

flex-config.xmlも書き換えておくこと。
Targeting Flash Player 10 Beta with Flex SDK 3.0.x
osxのスタンドアローンのflash playerはないのかな。
コンパイルしたらとりあえずブラウザにdrag & dropしてる。
SDKの中にruntime/playerフォルダがあって、各OS毎のflash playerインストーラーがある。

そのうち環境構築も含めてまとまった記事を書く。

(11/1)書き直しました。不要なimportをなくして、akihiro kamijo: Flash Player 10 の動的サウンド生成機能 （Sound クラス）を参考にサンプル数を増やした。

さて、イベントハンドラ内では 2048 以上 8192 以下のサンプルデータを書き込みます。パフォーマンス上はできるだけ多くのサンプルデータを （つまり 8192 個） 書くのが有利と考えられます。

package {
 import flash.display.Sprite;
 import flash.media.Sound;
 import flash.events.Event;
 import flash.events.SampleDataEvent;
 
 public class SoundTest extends Sprite{
  private var sound:Sound;
  private var freq:Number = 440;
  private var rate:Number = 44100;
  private var phase:Number = 0;
  
  public function SoundTest() {
   init();
  }
  
  private function init():void {
   sound = new Sound();
   sound.addEventListener(SampleDataEvent.SAMPLE_DATA, sineWaveGenerator);
   sound.play();
  }
  
  private function sineWaveGenerator(event:SampleDataEvent):void {
   for(var i:int = 0; i < 8192; i++) {
    phase += freq / rate;
    var phaseAngle:Number = phase * Math.PI * 2;
    var sample:Number = Math.sin(phaseAngle)*0.25;
    event.data.writeFloat(sample);
    event.data.writeFloat(sample);
   }
  }
 }
}

richard paul lohse remix

tumblr見てたらコードにしやすそうなグラフィックを見かけたのでコードにしてみた。
元ネタはこれ。Richard Paul Lohse

元画像から色情報とって描画したりするのが正確なんだろうけど、自分の目でどれくらい色を数値に置き換えられるか試してみた。印刷に長けてる人は色を見てCMYKがそれぞれ何%か言えるらしい。

色空間はHSBで、最初は全部真ん中の列の明度(Brightness)だけが下がってるのかなと思ってたんだけど、どうもそれではうまくいかないので、黄色の行だけ明度はそのままで彩度(Saturation)を下げたらそれっぽくなった。

元画像をPhotoshopで調べてみたら、青色の行も黄色と同じで、明度は変わらず彩度が下がっていた。
あと全部の行の真ん中の列は色相(Hue)も微妙に変化してた。思ってたよりかは単純じゃなかった。

何かIAMASでこういうプロジェクトあったな。芸術情報アーカイブだっけ？こんなぬるいのではないけど、昔の人の作品の特徴を解析するやつ。特定の画家のジェネレータをつくったりするとか何とか。

コードは結構無駄なことしてる。上から下に実行って感じ。色のおかしいところは直してない。

PFont font;

size(500, 710);
background(255);
noStroke();
font = loadFont("HelveticaNeue-Light-48.vlw");
textFont(font, 21);
colorMode(HSB, 360);
smooth();

int rectSize = 156;
int offY = 16;
int offX = 16;

background(340);
for(int i=0;i<3;i++) {
  int h;
  int s;
  int b;
  for(int j=0;j<3;j++) {
    if(i==1) {
      b = 250;
    } 
    else {
      b = 280;
    }
    if(j==0) {
      h = 322;
      s = 290;
    } 
    else if(j==1) {
      h = 224;
      s = 300;
    } 
    else {
      h = 55;
      s = 360;
      b = 360;
      if(i==1) {
        h = 44;
      }
    }
    fill(h, s, b);
    rect(offX+i*rectSize, offY+j*rectSize, rectSize, rectSize);
  }
}
fill(0);
text("Richard Paul Lohse Remix\n5. May 2008\nHayashi Yosuke, Processing", 
      offX+rectSize, rectSize*4-10);
saveFrame("richard remix.tiff");

golden rectangle

Balance in Design読みながらprocessingで黄金長方形のコーディング。作図法を参照しながら、コードは自分で考えるというのがちょうどいい。

スクリーンのサイズ、背景色、塗りなどを設定。

size(400, 250);
background(255);
smooth();
noFill();

正方形を描く。

int square = 200;
rect(0, 0, square, square);

一辺の中点aから相対する角bまで斜線を引く。

float[] a = {square/2, square};
float[] b = {square, 0};
line(a[0], b[0], a[1], b[1]);

斜線abを半径とする弧を描く。
abの長さは三平方の定理で求められる。
dist(a[0], a[1], b[0], b[1])でも同じだけど、数学的な考え方を確認。
傾きはatan2(y, x)で求められる。

float ab = sqrt(pow(b[0] - a[0], 2) + pow(b[1] - a[1], 2));
arc(a[0], a[1], ab*2, ab*2, atan2(b[1] - a[1], b[0] - a[0]), 0);

正方形の伸ばした線と弧が交わる点をもつ小さな長方形。

rect(b[0], b[1], ab-a[0], square);

この小さな長方形と正方形で黄金長方形。
整理してまとめておく。

int square = 200;
float[] a = {square/2, square};
float[] b = {square, 0};
float ab = sqrt(pow(b[0] - a[0], 2) + pow(b[1] - a[1], 2));

size(400, 250);
background(255);
smooth();
noFill();

rect(0, 0, square, square);
line(a[0], b[0], a[1], b[1]);
arc(a[0], a[1], ab*2, ab*2, atan2(b[1] - a[1], b[0] - a[0]), 0);
rect(b[0], b[1], ab-a[0], square);

20080409

実家で今受けている会社の課題と論文の続きをしてます。

まぁ、のんびりなもんで、地元は今が桜満開。一足先に都へ行った皆がもう次に向かって進んでる頃、花見だの何だの。
だから流行とかも遅れるのかもしれない。

朝に親を見送って犬の散歩、昼はウキウキウォッチンしながら御飯食べて、夜に親が帰ってくる頃また散歩して、残りは勉強。高3みたいなライフサイクル。

今日は久しぶりに登校して、前林さんと面談。少しずついい方向に進んでる。今月で一気に仕上げたい。

「今読むと混乱するから、時期が来たら教える」と言われてた参考文献。時期が来た。
Amazon.co.jp： 芸術の設計—見る/作ることのアプリケーション: 岡崎 乾二郎: 本

少しコピーして、読ませてもらった。

コンピュータを使って、誰でも簡単に音楽とかグラフィックが作れるようになった。僕もできるようになったけど、他の人もできるようになった。コンピュータを表現のツールとして使うことで、一般化するものと、しないものは何か。

一部を引用すると、

少なくとも、ほとんどのミュージシャンたちと同じように先ほどあなたが行った、ガレージバンドのようなDAWソフト上で、素材をフィーリングにまかせていじくり回すというやり方だけでは、先へ進めないことは確かだ。自明のものとして取り扱っていた記録システムやインターフェースなどの技術をいったん表面化させ、その組み立て方を解明し、さらにはそれらの組み替えを行うこと。すなわちプリセットの技術をカスタマイズする手段を会得しなければ、前に立ちふさがる壁を突き破ることはできないだろう。DAWは単一のソフトウェアに見えるものの、実は複数の技術が一つに束ねられることで成立しているからだ。

ちょうどこの内容と対応していて、僕が論文で一番言いたいことが、久保田さんの「消えゆくコンピュータ」に書かれている(10年前の本だよ)。

システム工学的な、マン・マシン・インターフェイスのイメージでもなく、また、見えない情報や知識に形や色を与えていく、というプロダクト/グラフィック・デザイン的なイメージでもなく、それは「言語の経験」であり、同時に「経験の言語」をデザインすることでもある。そのために、トップダウンで決められた、定型的な構造や仕組みは必要ない。むしろ、インターネットと同じように、最小限の単純なガイドラインでつくられた、ゆるやかな場の中で、さまざまなインターフェイスが、同時多発的に生まれ、それらが相互に干渉し合いながら、並列的に変化し続けるイメージこそが、インターフェイスというランゲージのデザインの、一つのありようではないだろうか？

sonicodeでは画像を音に変換した訳だけど、文字を入力する機能、画像を表示する機能、画像を解析する機能、数値を元に音響を生成する機能、それらを操作するツマミやボタン、といったような要素の組み合わせから成り立っている。これらは最初から一緒だった訳ではなくて、既存のものを解体して、組み替えて、再びパッケージングしている。
僕は、この作業が久保田さんの「インターフェイスというランゲージのデザイン」に対する一つの答えになっているんじゃないかと思っている。

既にある、沢山の技術の断片をうまく組み替えて自分のツールを作ること。作品やアプリケーションでは既に多くの先行例もあるし、自分もずっとそうやってきた。初めてコンピュータを触って何かを作る、というのではなく、一通りのリテラシーを身につけた人がどういうアプローチを取り得るか、という方法論。これをどこまできちんと検証可能な言葉で説明できるようになるか、が課題。

jquery loading test

jqueryでファイル読み込みする時に、load()メソッドそのまま使うとローディングしながら中身が表示されてしまうので何か方法ないかと思って見つけた。

早い話が、読み込ませるdivにCSSでdisplay:noneを指定しておけばいいってことだった。
非同期通信されるとajaxSendとajaxCompleteが呼び出される。

コールバック関数ってのがよくわかってなかったんだけど、イベントリスナみたいなものだと言われたらちょっとわかった。というか、こういう使い方してもいいんだろうなと。

$(this).fadeOut("fast", function() {
 $("#content").show();
});

fadeOutした後に読み込んだファイルの中身を表示してる。dtをクリックしたらddが表示される。これやる前は普通にチェーンでつないでたんだけど、フェードアウトが終わる前に読み込みが始まってださいことになってた。
動作サンプル
read fileをクリックするとファイル読み込み開始。

sonicode by st44100

sound file

s o n i c o d e 
s o n i c o d e 
s o n i c o d e 
s o n i c o d e 
s o n i c o d e 
s o n i c o d e 
電子音楽
電子　楽
　子音　
電子音楽
電　音楽
　子音　
電子fdさfdさfdさ　楽
　子　楽
電子音楽
電子音楽

電子音楽
電子音楽

電子音楽
電子音楽

S
S O
SON
SONI
CODE
 ODE
  DE
   E
C             /
  O         /
    D    /
      E /
C  C
  O O
    D D
      E  E

S 
S O/
SON/
SONI/
CODE/
 ODE/
  DE/
   E/

S O N I C O D E 

S O N I C O D E 

S O N I C O D E 

S O N I C O D E 

S O N I C O D E 
SONIC♪
     CODE ♬
SONIC♪♪
     CODE ♬ ♬
SONIC♪♪/
     CODE ♬ ♬ / 
S O N I C O D E /
S O N I C O D E / /
S O N I C O D E / / /
S O N I C O D E / / / /
S O N I C O D E / / / / /
S O N I C O D E / / / / / /
S O N I C O D E / / / / / / /

㍿　㍿　㍿　㍿
 ㍿　㍿　㍿　㍿
㍿　㍿　㍿　㍿
 ㍿　㍿　㍿　㍿
㍿　㍿　㍿　㍿
 ㍿　㍿　㍿　㍿
 ㍿　㍿　㍿　㍿
  ㍿　㍿　㍿　㍿
㍿　㍿　㍿　㍿
 ㍿　㍿　㍿　㍿
  ㍿　㍿　㍿　㍿
   ㍿　㍿　㍿　㍿
㈱
㈱　㌕
㈱　㌕　㌖
へへへへへへへへへへへへへ
へへ　へへ　へへ　へへ
　へ　　へ　　へ　　へ

wwwwwwwwwwwww
wwwwwwwwwwwww
wwwwwwwwwwwww
IAMAS
IAMAS
IAMAS
IAMAS
IAMAS
IAMAS
I
I
I
I
I
A
A
A
A
M
M
M
M
A
A
A
A
M
M
M
M
A
A
A
A
M
M
M
M
 S
 S
 S
 S
 S
２
２
２
０
０
０
０
０
０
８
８
８
２００８
　　　８
　　０８
　００８
２００８
　　　８
　　０８
　００８
２００８

wodcast

wodcast.org
Adrian ShaughnessyとかPeter Savilleとか有名なデザイナーのインタビュー集。
このままではpodcastに登録できないので、yahoo pipes使ってmp3のとこだけ抜き出した。
http://pipes.yahoo.com/pipes/pipe.run?_id=HCgD5pbp3BGhaZYI8jxBKg&_render=rss
リンク先をクリックして購読に使用するフィードリーダーをitunesにするか、itunesから「詳細...」>「Podcastを登録...」にこのURLを入力すればいけるはず。pipes実行しただけだとuntitledにしかならないけど、itunesではちゃんとタイトルなど表示されるのでこれでいいや。

環境が変わることもあって、携帯音楽プレーヤーで常に英語を聴いてるようにしたい。けどいわゆる語学学習用のって話が面白くなかったりするので、できるだけ興味を持って聴けるやつがいい。

wnycのradio labは編集とかも凝ってて、内容だけでなく音声ならではの試みが面白い。
WNYC - Radiolab

glitch (alike) for vjs 2

画像と合わせるのは簡単。

PImage型の変数を宣言(imgは合わせる画像、capはノイズをキャプチャした画像のために使う)

PImage img, cap;

して、setup()の中で画像を読み込む。background()にPImageのインスタンスを入れる場合は画像とウィンドウのサイズを合わせなければならないことに注意。

void setup() {
  size(200, 200);
  img = loadImage("mkk.jpg");
  noiser = new Noiser(colNumber, rowNumber);
}

draw()はこんな感じ。

void draw() {
  noiser.drawNoise();
  cap = get();
  background(img);
  blend(cap, 0, 0, width, height, 0, 0, width, height, ADD);
}

noiser.drawNoise()でノイズを作った後、capに代入。
背景をimgで塗りつぶして、blend()使ってcapと合成。

blend()のシンタックス
blend(srcImg, x, y, width, height, dx, dy, dwidth, dheight, MODE)
x, y, width, heightは読み込む画像のx座標、y座標、幅、高さ
dx, dy, dwidth, dheightは書き出し先のx座標、y座標、幅、高さ
MODEはADDの他にも色々あるけどビットシフトはない。イラストレーターとかフォトショップのエフェクトと同じようなもの。試してみると面白い。

ということで、今後この辺は使いそうな気がする。
勿論pixels使って1ピクセル単位で操作することもできるし、ビットシフトはblend()じゃできないからいずれ使うことになるけど、とりあえず簡単な方法から。

glitch (alike) for vjs

vade » Blog Archive » Real World Max/MSP/Jitter 1 - Glitch (alike) for VJs

glitchっぽい映像を、jitterで作るチュートリアル。
glitchの特徴はfragmentation, repetition, linearity and complexityだそう。
随分前にブックマークしておいたんだけど、今になってprocessingでやってみようと思った。

まずイメージと、ブロックノイズを組み合わせてるんだけど、ブロックノイズの作り方。
2通り思いつく。

普通にrect()で作る。

Noiser noiser;
int colNumber = 5;
int rowNumber = 5;

void setup() {
  size(200, 200);
  noiser = new Noiser(colNumber, rowNumber);
}

void draw() {
  noiser.drawNoise();
}

class Noiser {
  int col;
  int row;
  public Noiser(int col, int row) {
    this.col = col;
    this.row = row;
  }
  void drawNoise() {
    for(int j=0; j<height; j+=height/row) {
      for(int i=0;i<width;i+=width/col) {
        noStroke();
        fill(random(255),random(255),random(255));
        rect(i, j, width/col, height/row);
      }
    }
  }
}

pixels使う。widthをcolで割った数が整数にならなかったりした時とかに今後の展開感じる。

Noiser noiser;
color[][] colorTable;
int colIndex = 0;
int rowIndex = 0;
int colNumber = 5;
int rowNumber = 5;

void setup() {
  size(200, 200);
  noiser = new Noiser(colNumber, rowNumber);
  colorTable = new color[colNumber][rowNumber];
}

void draw() {
  noiser.drawNoise();
}

class Noiser {
  int col;
  int row;
  public Noiser(int col, int row) {
    this.col = col;
    this.row = row;
  }
  
  void drawNoise() {
    for(int j=0; j<height; j+=height/row) {
      for(int i=0; i<width; i+=width/col) {
        if(colIndex>=col) {
          colIndex = 0;
        }
        if(rowIndex>=row) {
          rowIndex = 0;
        }
        colorTable[colIndex][rowIndex] = color(random(255), random(255), random(255));
        colIndex++;
      }
      rowIndex++;
    }

    loadPixels();
    for(int j=0; j<height; j++) {
      for(int i=0; i        int pos = i+j*width;
        if(pos%(width/col)==0) {
          colIndex++;
        }
        if(pos%(width*height/row)==0){
          rowIndex++;
        }
        if(colIndex>=col) {
          colIndex = 0;
        }
        if(rowIndex>=row) {
          rowIndex = 0;
        }
        pixels[pos] = colorTable[colIndex][rowIndex];
      }
    }
    updatePixels();
  }
}

次回、画像と合わせる。

MAX_FLOAT, MIN_FLOAT

visualizing data読み始めて、知った。
最小値とか最大値を比べて取得する場合、初期値を代入する時に

float dataMax = MIN_FLOAT;
float dataMin = MAX_FLOAT;

としておく。
読んで字のごとくMIN_FLOATはfloatで一番小さい値で、MAX_FLOATはfloatで一番大きい値。
どんな数値もこれより小さくて大きい。

sonicodeでは文字をビットマップにして黒いところに順番に番号つけて、縦のセルで大きさを比べて最大値と最小値を出してるんだけど、最大値を入れるための変数の初期値を0にしてた。これだと負の値がきたときに動かない。
設計上負の値がくることはないからいいや、と思ってたけど、気持ち悪かったんだよね。
MIN_INT, MAX_INTもある。

0126から追加されたみたい。

recursion

it's hoba
シンプルなコードで、視覚的に強い。

血が滴るみたいなやつ。
it's hoba: Processing 13

再帰を使って書き直してみた。

//based on hoba's code(http://hobagoogle.blogspot.com/2007/12/processing-13.html)
//rewrite by using recursion
void setup() {
  size(800, 450);
  background(152);
  noStroke();
  smooth();
  colorMode(HSB);
}

float e, r, var, posx, posy, a, dex, lengh, bri;
int cnt;

void draw() {
}

void mousePressed() {
  e = HALF_PI/180*30;
  a = 1-sin(e);
  r = random(30, 150);
  var = random(0.6, 0.9);
  dex = random(-0.15, 0.15);
  lengh = random(0.8, 1.2);
  bri = random(0, 1);
  posx = mouseX;
  posy = mouseY;
  cnt = int(random(30, 200));
  fill(2, 247, 80+50*bri);
  ellipse(posx, posy+r*HALF_PI/180*var, r/20+r, r/20+r);
  blood(posx, posy, r, var, dex, lengh, bri, cnt);
}

void blood(float posxU, float posyU, float rU, float varU, 
           float dexU, float lenghU, float briU, int cnt) {
  fill(2, 247, 80+50*briU, 100-100*a);
  ellipse(posxU+dexU*rU, posyU+rU*e*varU, rU/20+rU*a*a, rU/20+rU*a*a);
  e += HALF_PI/180;
  a = 1-sin(e);
  if(cnt>0 && e<=HALF_PI*lenghU) {
    blood(posx, posy, r, var, dex, lengh, bri, cnt-1);
  }
}

void keyPressed() {
  if (key == 'r' || key == 'R') {
    background(152);
  }
}