読者です 読者をやめる 読者になる 読者になる

モノクロタイム

I'm from the future!

ジェネラティブアート(普及版)読む・Part2

Processing 読書日記

どんどん日記つけていくぞ.Part2.

Chapter3 線を引く間違った方法

これまで読んできた中で自然のカオスとか予測不可能性とか色々言葉がでてきたけど,その不規則性をアートに取り入れるためのrandom関数について説明している.
random関数を使うと,
f:id:yomoyamareiji:20150206105839p:plain
こんなまっすぐの線が,
f:id:yomoyamareiji:20150206110348p:plain
ガクガクっと不規則に曲がる.(実行する毎に線の折れ方は変わる)
もっとランダム値を細かく制御すると,
f:id:yomoyamareiji:20150206111115p:plain
そこそこアートっぽい線に変化する.


vvvvでもそうだけど,パーリンノイズを使用すると結構面白い図が描けたりする.
このパーリンノイズの紹介もされていた.
f:id:yomoyamareiji:20150206111428p:plain
後ろにうっすらと写っているのは一番最初の真っ直ぐな線.
3つ目の線分よりも遥かに自然な線分になった.
Processingでは,このパーリンノイズを簡単に使えることが出来るようにnoise関数としてカプセル化されていて,random関数と同じように使用できる.

これらの乱数を生み出す関数はアートに必要なものだけれど,予測不可能な値を生み出すことがネックである.従って自分でランダム関数を作り出すことが出来れば少々自分の思い通りの線分が描ける.
乱数を5倍にしたもの

void setup(){
  size(500,100);
  background(255);
  strokeWeight(5);
  smooth();
  stroke(0, 30);
  line(20,50,480,50);
  stroke(20, 50, 70);
  int step = 10;
  float lastx = -999;
  float lasty = -999;
  float ynoise = random(10); float y;
  for (int x=20; x<=480; x+=step) {
    y = 10 + (customRandom() * 60);
    if (lastx > -999) {
      line(x, y, lastx, lasty);
    }
    lastx = x; lasty = y; ynoise += 0.1;
    }
}

float customRandom() {
  float retValue = 1 - pow(random(1), 5);
  return retValue;
}

f:id:yomoyamareiji:20150206112541p:plain
乱数を1/2倍にしたもの

float customRandom() {
  float retValue = 1 - pow(random(1), 0.5);
  return retValue;
}

f:id:yomoyamareiji:20150206112607p:plain

Chapter4 円を描く間違った方法

Chapter3では乱数を用いた線分の描き方を説明していた.続いて円に乱数を適用する.

Processingでは,ellipse関数を使用することで簡単に円を描くことができる.以下は三角関数を使用して円を描くコード.

size(500,300);
background(255);
strokeWeight(5);
smooth();
float radius = 100;
int centx = 250;
int centy = 150;
noFill();
ellipse(centx,centy,radius*2,radius*2);

f:id:yomoyamareiji:20150206114158p:plain
point関数を使用して点を打ち,円を描いてみる.

size(500,300);
background(255);
strokeWeight(5);
smooth();
float radius = 100;
int centx = 250;
int centy = 150;
stroke(20, 50, 70);
float x, y;
float lastx = -999;
float lasty = -999;
for (float ang = 0; ang <= 360; ang += 5) {
  float rad = radians(ang);
  x = centx + (radius * cos(rad));
  y = centy + (radius * sin(rad));
  point(x,y);
}

f:id:yomoyamareiji:20150206114515p:plain
円を描くのは簡単である.ここに不規則性を加えると,螺旋状の線が描ける.

size(500,300);
background(255);
strokeWeight(5);
smooth();
float radius = 10;
int centx = 250;
int centy = 150;
float x, y;
float lastx = -999;
float lasty = -999;
for (float ang = 0; ang <= 1440; ang += 5) {
  radius += 0.5;
  float rad = radians(ang);
  x = centx + (radius * cos(rad));
  y = centy + (radius * sin(rad));
  if (lastx > -999) {
    line(x, y, lastx, lasty);
  }
  lastx = x;
  lasty = y;
  lasty = y;
}

f:id:yomoyamareiji:20150208125147p:plain
Chapter3で勉強した乱数を加えると,ぐちゃぐちゃだけど螺旋っぽい線分が描けた.

size(500,300);
background(255);
strokeWeight(5);
smooth();
float radius = 10;
int centx = 250;
int centy = 150;
float x, y;
float lastx = -999;
float lasty = -999;
float radiusNoise = random(10);
for (float ang = 0; ang <= 1440; ang += 5) {
  radius += 0.5;
  radiusNoise += 0.05;
  float thisRadius = radius + (noise(radiusNoise) * 200) - 100;
  float rad = radians(ang);
  x = centx + (thisRadius * cos(rad));
  y = centy + (thisRadius * sin(rad));
  if (lastx > -999) {
    line(x, y, lastx, lasty);
  }
  lastx = x;
  lasty = y;
  lasty = y;
}

f:id:yomoyamareiji:20150208125521p:plain
もちろん実行する毎に描ける螺旋は変わる.
螺旋を描く処理を増やし,線の細さを細くすると,ジェネラティブアートの表紙っぽい模様を描くことが出来る.おお,どんどんアートっぽくなってきた!

size(500,300); background(255); strokeWeight(0.5); smooth();
int centx = 250;
int centy = 150;
float x, y;
for (int i = 0; i<100; i++) {
float lastx = -999;
float lasty = -999;
float radiusNoise = random(10);
float radius = 10;
stroke(random(20), random(50), random(70), 80);
     int startangle = int(random(360));
     int endangle = 1440 + int(random(1440));
     int anglestep = 5 + int(random(3));
     for (float ang = startangle; ang <= endangle; ang += anglestep) {
       radiusNoise += 0.05;
       radius += 0.5;
       float thisRadius = radius + (noise(radiusNoise) * 200) - 100;
       float rad = radians(ang);
       x = centx + (thisRadius * cos(rad));
       y = centy + (thisRadius * sin(rad));
       if (lastx > -999) {
         line(x, y, lastx, lasty);
       }
lastx = x;
lasty = y; }
}

f:id:yomoyamareiji:20150208125903p:plain
Chapter3でもパーリンノイズを使用したランダムな線分を描いた.これを円に適用すると,こんな感じの花みたいな模様ができた.かわいい.

void setup () {
  size(500,300);
  background(255);
  strokeWeight(5);
  smooth();
  float radius = 100;
  int centx = 250;
  int centy = 150;
stroke(0, 30);
noFill();
ellipse(centx,centy,radius*2,radius*2);
stroke(20, 50, 70);
    strokeWeight(1);
float x, y;
float noiseval = random(10);
float radVariance, thisRadius, rad; beginShape();
fill(20, 50, 70, 50);
for (float ang = 0; ang <= 360; ang += 1) {
      noiseval += 0.1;
      radVariance = 30 * customNoise(noiseval);
      thisRadius = radius + radVariance;
      rad = radians(ang);
      x = centx + (thisRadius * cos(rad));
      y = centy + (thisRadius * sin(rad));
      curveVertex(x,y);
}
endShape();
}
  float customNoise(float value) {
    float retValue = pow(sin(value), 3);
    return retValue;
}

f:id:yomoyamareiji:20150208130456p:plain

最後にWaveclockという作品を作って,線分で描くことが出来るアートについての説明を締めている.Chapter3,4と勉強してきたことの総まとめで,読んで身につけた内容だけで作れるシンプルかつ面白いアートだった.本を買った人は是非コードを動かしてみてほしい.


本の中で度々使用されている予測不可能性だとか不規則性だとかはまぁ,乱数を使って実装していくんだろうなぁとは予想ができていた.しかしProcessingはコード書いて実際に乱数がどのように作用しているのかはっきりと視認できておもしろいなあと思う.

次はChapter5.次元を加えるというサブタイトルが付いている.
これも面白そう.読み進めていきます.

ではでは〜

[普及版]ジェネラティブ・アート―Processingによる実践ガイド

[普及版]ジェネラティブ・アート―Processingによる実践ガイド

  • 作者: マット・ピアソン,Matt Pearson,久保田晃弘,沖啓介
  • 出版社/メーカー: ビー・エヌ・エヌ新社
  • 発売日: 2014/11/21
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログ (1件) を見る