BioErrorLog Tech Blog

試行錯誤の記録

Generative Art #1 - Processing作品

おはよう。@bioerrorlogです。

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

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

Output

f:id:BioErrorLog:20191208205449p:plain

フル解像度/その他出力パターンはこちら:
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();
}


void draw(){
  int centx = width / 2;
  int centy = height / 2;
  float x, y;
  for (int i = 0; i < 10; 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;
    } 
  }

  saveFrame("frames/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

www.bioerrorlog.work

www.bioerrorlog.work


Reference