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