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

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

次回、画像と合わせる。

circle1

pointメソッドで円を描く。
processingにはellipse(x,y,width,height)で円を描くメソッドが存在するが、点線の円が描けない。

radians(angle)で度数法から弧度法に変換。その値をxはcosメソッド、yはsinメソッドに渡す。iの値を1ずつ増やす(つまり1度ずつ増やしていく)ことで点が集まり円になる。

size(200, 200);
smooth();
for(int i=0; i<360; i++) {
  point(cos(radians(i))*50 + width/2, 
        sin(radians(i))*50 + height/2);
}

変数などを利用して円を描く構造をよりわかりやすくしたもの。
for文の中のupdate(繰り返しの度に評価される式)の値を変えること(今回は5ずつ増やしている)で点線を実現。

size(200, 200);
int x_offset = width/2;
int y_offset = height/2;
int radius = 50;
smooth();
for(int i=0; i<360; i+=5) {
  point(cos(radians(i))*radius + x_offset, 
        sin(radians(i))*radius + y_offset);
}

code composition

プログラミングに興味を持った頃から効率的なコーディングというよりは言語としての面白さに惹かれてきたような気がしている。修士論文もあることだし、ちょっと最近考えている事をとっかかりにしてcode compositionというカテゴリーで主にprocessing(p5)のコードによるスケッチをしていこうと思う。

まずきっかけとなるのはcasey readsの
{software}structures
sol lewittというアーティストが紹介されてるんだけど、彼は指示だけを与えて、実際の絵は製図家に描かせていた。指示は時として曖昧で、「それほど長くない線、まっすぐでなく、互いに触れ合わない、4つの色をランダムに使って描き、一定に散らばって、最大の濃さで壁の表面全体を覆う」とかそんな感じ。訳あってんのかな。

つまりは実装の方法が人によって異なるということ。絵にしても音にしても、効率的なコーディング(って何だと言われると厳しいが)と実際の出力の結果は必ずしも一致しないということから、機械に任せる部分と自分で判断する部分の境界を探ろうと思っている。codeによる計算結果をどうcompositionするか、というところ。ここには結構難しい問題があって、アルゴリズムを用いて作り出されたものを作家が恣意的に選んで並べ替えるとなると、アルゴリズムを使っている意味がない、とか旧来の手法と何が違うのか、という議論になる。ただこれは三輪先生の方法主義や渋谷さんの第三項音楽みたいに手法や新奇性、独自性にフォーカスした時の話であって、僕がやりたいのはそれをデザインとして機能させること。

永原先生の授業でコンピュータを使ったデッサンというテーマのワークショップをしたことがあって、アスキーアートで写真みたいな絵を描くだとか、何種類かのルールに基づいて絵をプロットするjava appletで絵を描くとかいうものがあった。processingなどの簡単な言語が使えるようになった今は、そのルール自体を自分で考えるべきだと思う。バウハウスがデザインを誰でも「使える」ようにしたように、code compositionを「使える」ように。design by numbersがかなり理想に近い。

で、このcode compositionという言葉と概念は久保田先生の「コード・コンポジション入門」というテキストに非常に影響を受けている。supercollider3を使い、素材として点(click)・線(sine wave)・面(white noise)を用いた作曲法で、現在更新が止まっているのが残念だが、多摩美のSSAW05にも一部その考えが紹介されているので参照されたい。SSAWは他にも興味深い話題が多数扱われているので要チェック。日本語だし。

あとはブルーノ・ムナーリの「デザインとヴィジュアル・コミュニケーション」という本を読んでいて思ったことで、単に物理現象や視覚的な美しさ、面白さを追求するだけでなく、最終的に意思や情報の伝達にどう活かすのかということを考えたい。

他にもitpのnature of codeとか。

ちょっとずれるけどホワイの(感動的)Rubyガイドとか。とにかくプログラミング言語が「言語である」というところに何かひっかかるものを感じているのかもしれない。

まだまだ漠然としていてまとまっていないし、今言っていることと全然違うようになる気もするけど、書き進めていくうちに何かが見えてくることを願って...。