P.2 Shapes

第2回 2016/08/18

P.2では前回の色に加え，点 / 線 / 面といったプリミティブな図形をプログラムで操る方法が解説されている．非常に複雑な形でも，これらの基本パーツを一定の命令規則 (=コード)によって生成 (=ジェネレート)することができる． 以下，補足情報．

図形を扱うにあたって

基本的にデジタル図形は点，線，面（三角メッシュ，四角メッシュ）の組み合わせで作る場合がほとんどであり，これらをコードで操って表現する．Processing以外の環境でも考え方は非常に近く，ここで得たち式は他環境に移行しても大変役立つ．

必須コマンド

基本的に以下のコマンドを駆使すればあらゆる図形が描ける．

プリミティブな図形を描く

line: 線を描く ellipse: 円形を描く（楕円含む） rect: 長方形を描く

プリミティブな図形をたくさん描く

curve: カーブを描く vertex: 点，線，面の集合を描く curveVertex: カーブの集合を描く

図形の描き方の設定

fill: 図形の塗りつぶし色を指定 noFIll: 図形を塗りつぶさない stroke: 図形の輪郭の色を指定 noStroke: 図形の輪郭を描かない

座標系の設定

translate: 座標系をずらす translate(width/2, height/2)によってキャンバスのど真ん中を座標(0, 0)に設定できる．「中心」があるような作品はこのように座標軸を真ん中にスライドさせるとコードがすっきりする．

乱数

random: 基本的な乱数を生成する

他にもいろいろあるが，このあたりをいじり倒すだけでも相当いろんなことができる．都度リファレンスやサンプルスケッチを参考にしながらコードを書いていくと良い． https://processing.org/reference/

何かを徐々に目標座標に近づける

P_2_2_3_01のように何かをターゲット座標に近づけたい場合，各フレームで現座標に，目標座標と現座標の差の何割かを足していけば良い．以下の例で，例えば0.01を1.00とすれば，目標座標に瞬間移動ということになる．

centerX += (mouseX-centerX) * 0.01;
centerY += (mouseY-centerY) * 0.01;

エージェント型アルゴリズムなど

数学的に代表的な幾何図形の生成パターンやエージェント型のアルゴリズムなどは，スクラッチから思いつくことは容易ではない．しかし，知識としてなんとなく記憶の引き出しにしまっておけば，いざというときにイメージに合いそうなものを思い出せる．

事例：Universal Everything

Universal Everythingはデザインとアートの交差領域で活動するスタジオの代表格．コードドリブンな作品で幅広いクライアントのブランディングプロジェクトやアート活動を展開している．

2012 London Olympics - Moving image identity for the brand launch http://universaleverything.com/projects/london-2012/ https://www.youtube.com/watch?v=xZS-8Ivw9Iw http://www.wolffolins.com/work/47/london-2012

その他の事例

• METAFIVEのライブ映像 https://www.youtube.com/watch?v=HFCZ0GYpZnM

• Processing産みの親のCasey Reasさんの活動 http://reas.com/ https://www.youtube.com/watch?v=_8DMEHxOLQE

音に反応する図形を描いてみる

// Minim
import ddf.minim.analysis.*;
import ddf.minim.*;
Minim minim;

AudioInput in;

color col = color(0,130,164,100);
int N = 1024;

void setup()
{
  size(800, 800, P3D);
  background(255);
  minim = new Minim(this);
  in = minim.getLineIn(Minim.STEREO, N);
}

void draw()
{
  background(255);
  stroke(col);
  strokeWeight(2);
  strokeCap(ROUND);

  pushMatrix();
  translate(width/2, height/2);
  float angleX = map(mouseY, 0, height, -PI/2, PI/2);
  float angleY = map(mouseX, 0, height, -PI/2, PI/2);
  rotateX(angleX);
  rotateY(angleY);
  fill(col);
  float R = 300;
  beginShape();
  for (int i = 0; i < N; i++) {
    float r = in.left.get(i)*800;
    line(R*cos(TWO_PI*i/N), R*sin(TWO_PI*i/N), 0, (R + r)*cos(TWO_PI*i/N), (R + r)*sin(TWO_PI*i/N), r);
  }
  endShape(CLOSE);  
  popMatrix();
}

void stop()
{
  minim.stop();
  super.stop();
}

void keyReleased() {
  if (key == DELETE || key == BACKSPACE) background(255);

  // r g b alpha
  if (key == ' ') col = color(random(255),random(255),random(255),random(80,150));
  //default colors from 1 to 4 
  if (key == '1') col = color(181,157,0,100);
  if (key == '2') col = color(0,130,164,100);
  if (key == '3') col = color(87,35,129,100);
  if (key == '4') col = color(197,0,123,100);
}

代表的なメディアアーティストの例

https://www.quora.com/Who-are-the-top-artists-creating-generative-art

The contributors to Creative Code http://www.amazon.com/exec/obido... make a pretty good list:

• John Maeda
• Yugo Nakamura
• Martin Wattenberg
• David Small
• Casey Reas
• Ben Fry
• Scott Snibbe
• Elise Co
• John Simon, Jr.
• Gillian Crampton-Smith
• Reed Kram
• Joshua Davis
• Peter Cho
• Golan Levin
• Danny Rozin

P.2 形のまとめ

• 点，線，面（三角メッシュ，四角メッシュなど）の組み合わせで図形を描く．
• 図形はデータ可視化，情報や現象の抽象表現を作る基礎構成パーツである．
• 有名な図形の生成パターンやアルゴリズムを知ってると，いざというときに偉大な車輪の再発明をせずに済む．