Generative Art #2 - Processing作品

ProcessingによるGenerative Art作品
２作目を記録します。

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

Output

フル解像度/その他出力パターンはこちら:
Generative_2 - BioErrorLog - pixiv

Material

使用言語: Processing 3.5.3

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

Source Code

GitHubはこちら

float _angleNoise, _radiusNoise;
float _xNoise, _yNoise;

float _angle, _radius;
float _strokeCol = 254;
int _strokeChange = -1;


void setup(){
  size(1920,1080);
  background(255);
  smooth();
  noFill();
  
  _angleNoise = random(10);
  _radiusNoise = random(10);
  _xNoise = random(10);
  _yNoise = random(10);
}


void draw(){
  _radiusNoise += 0.005;
  _radius = (noise(_radiusNoise) * 1000) + 100;
  
  _angleNoise += 0.005;
  _angle += (noise(_angleNoise) * 2) - 1;
  if (_angle > 360){_angle -= 360;}
  if (_angle < 0){_angle += 360;}
  
  _xNoise += 0.01;
  _yNoise += 0.01;
  float centerX = width / 2 + (noise(_xNoise) * 100) - 50;
  float centerY = height / 2 + (noise(_yNoise) * 100) - 50;
  
  float rad = radians(_angle);
  float x1 = centerX + (_radius * cos(rad) *2);
  float y1 = centerY + (_radius * sin(rad));
  
  float opprad = rad + PI;
  float x2 = centerX + (_radius * cos(opprad) *2);
  float y2 = centerY + (_radius * sin(opprad));  
  
  _strokeCol += _strokeChange;
  if (_strokeCol > 254){_strokeChange = -1;}
  if (_strokeCol < 1){_strokeChange = 1;}
  stroke(_strokeCol, 10);
  strokeWeight(2);
  line(x1, y1, x2, y2);
}


void keyPressed(){
  if (keyCode == ENTER){
    saveFrame("generative_2-####.png");
  }
}

Discussion

マット・ピアソン「ジェネラティブ・アート―Processingによる実践ガイド」で紹介されるケーススタディ「Wave Clock」を少し改変して作成。

ひとつひとつの線の描画角度の差分を小さく、線の透明度を薄くすることで、シルクの布のような滑らかなパターンが現れました。

// 角度差を+-1以内とする
_angle += (noise(_angleNoise) * 2) - 1;

// 線の透明度(alpha)を低く(10)抑える
stroke(_strokeCol, 10);

Follow @bioerrorlog

[関連記事]

www.bioerrorlog.work

Reference

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