Generative Art #1 - Processingサンプル

ProcessingによるGenerative Art作品
記念すべき第一作目を記録します。


自作品まとめはこちら: www.bioerrorlog.work

Output

f:id:BioErrorLog:20191208205449p:plain

フル解像度/その他出力パターンはこちら:
#processing Generative_1 - BioErrorLogのイラスト - pixiv


Material

使用言語: Processing 3.5.3

Processingというプログラミング言語に聞き覚えがない、という方は是非こちらをご参考ください:
www.bioerrorlog.work


Source Code

GitHubはこちら

void setup(){
  size(1920,1080);
  background(0);
  strokeWeight(0.2);
  smooth();
  
  int centx = width / 2;
  int centy = height / 2;
  float x, y;

  for (int i = 0; i < 10000; i++){
    float lastx = -999;
    float lasty = -999;
    float radiusNoise = random(10);
    float radius = 10;

    stroke(255, random(10));

    int startAngle = int(random(360));
    int endAngle = int(random(1440)) + 360 * 6;
    int angleStep = int(random(3)) + 1;

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


void draw(){
  
}


void keyPressed(){
  if (keyCode == ENTER){
    save("generative_1.png");
  }
}

Discussion

薄く、細くらせんを重ね合わせたシンプルなモデルです。
各要素にrandom()やnoise()を使い、ランダムでふわふわに見える中にもある特定のパターンが表れてくるのが面白いところでした。

例えば中心部分では、上下左右に走るパターンが現れます(Fig. 1)。

f:id:BioErrorLog:20191209083349p:plain
Fig. 1 中心部のパターン

周辺部では、放射状に走るまっすぐな線のパターンが見られます(Fig. 2)。

f:id:BioErrorLog:20191209083526p:plain
Fig. 2 周辺部のパターン

これらのパターンはおそらくnoise()によるものなのでしょうが、どういう原理で起きているのか、いまの私にはよくわかりません。

noise()やrandom()の裏で動いているアルゴリズムがどんなものなのか、興味がそそられます。


See also

www.bioerrorlog.work

高解像度の出力結果はこちらPixivにまとめています: www.pixiv.net

ソースコードはGitHubにもまとめています: github.com


Reference

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

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