2019-12-16

Generative Art #6 - Processing作品

おはよう。@bioerrorlogです。

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

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

Output

f:id:BioErrorLog:20191216083138p:plain f:id:BioErrorLog:20191216083206p:plain f:id:BioErrorLog:20191216083232p:plain f:id:BioErrorLog:20191216083258p:plain

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

Material

使用言語: Processing 3.5.3

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

Source Code

GitHubはこちら

Cell[][] _cellArray;
int _cellSize = 1; // Cellの大きさ(pixel)
int _numX, _numY; // ディスプレイのCell格子


void setup() { 
  size(1920, 1080);
  _numX = floor(width/_cellSize);
  _numY = floor(height/_cellSize);
  restart();
} 


void restart() {
  // _cellArrayに画面分のCellを入れる
  _cellArray = new Cell[_numX][_numY];    
  for (int x = 0; x<_numX; x++) {
    for (int y = 0; y<_numY; y++) {    
      Cell newCell = new Cell(x, y);  
      _cellArray[x][y] = newCell;      
    }               
  }                 

  
  for (int x = 0; x < _numX; x++) {
    for (int y = 0; y < _numY; y++) {  
      
      int above = y-1;        
      int below = y+1;        
      int left = x-1;         
      int right = x+1;            
      
      // 画面端の処理
      if (above < 0) { above = _numY-1; }    
      if (below == _numY) { below = 0; } 
      if (left < 0) { left = _numX-1; }  
      if (right == _numX) { right = 0; } 

     _cellArray[x][y].addNeighbour(_cellArray[left][above]);    
     _cellArray[x][y].addNeighbour(_cellArray[left][y]);        
     _cellArray[x][y].addNeighbour(_cellArray[left][below]);    
     _cellArray[x][y].addNeighbour(_cellArray[x][below]);   
     _cellArray[x][y].addNeighbour(_cellArray[right][below]);   
     _cellArray[x][y].addNeighbour(_cellArray[right][y]);   
     _cellArray[x][y].addNeighbour(_cellArray[right][above]);   
     _cellArray[x][y].addNeighbour(_cellArray[x][above]);       
    }
  }
}


void draw() {
  background(200);
                    
  for (int x = 0; x < _numX; x++) {
    for (int y = 0; y < _numY; y++) {
     _cellArray[x][y].calcNextState();
    }
  }
                        
  translate(_cellSize/2, _cellSize/2);     
                        
  for (int x = 0; x < _numX; x++) {
    for (int y = 0; y < _numY; y++) {
     _cellArray[x][y].drawMe();
    }
  }
}


void keyPressed(){
    /*
    ENTERキー押下: 画像を保存する
    BACKSPACEキー押下: setup()を呼ぶ
    */
    
    if (keyCode == ENTER){
        saveFrame("generative_5_####.png");
    }
    if (keyCode == BACKSPACE){
        setup();
    }
}


class Cell {
  float x, y;
  float state;         
  float nextState;  
  float lastState = 0; 
  Cell[] neighbours;
  
  Cell(float ex, float why) {
    x = ex * _cellSize;
    y = why * _cellSize;
    
    // Cellの初期状態を定義
    // 画面の真ん中のCellは255, それ以外は2
    if(ex == width/2 && why == height/2){
      nextState = 255;
    }else{
      nextState = 2;
    }

    state = nextState;
    neighbours = new Cell[0];
  }
  
  void addNeighbour(Cell cell) {
    neighbours = (Cell[])append(neighbours, cell); 
  }
  
  void calcNextState() {
    /*
    1. もし隣接するセルの状態の平均が255であれば状態は0に
    2. もし隣接するセルの状態の平均が0であるなら状態は255に
    3. そうでなければ、新しい状態＝現在の状態＋隣接セルの状態の平均ー前の状態の値
    4. もし新しい状態が255を超えたら255にし、
    5. もし新しい状態が0以下ならそれを0にする
    */
                
    float total = 0;              
    for (int i=0; i < neighbours.length; i++) { 
       total += neighbours[i].state;        
    }                   
    float average = int(total/8);
                
    if (average == 255) { // 1.
      nextState = 0;
    } else if (average == 0) {
      nextState = 255; // 2.
    } else {
      nextState = state + average;
      if (lastState > 0) { nextState -= lastState; } // 3.
      if (nextState > 255) { nextState = 255; } // 4.
      else if (nextState < 0) { nextState = 0; } // 5.
    }
 
    lastState = state;  
  }
  
  void drawMe() {
    state = nextState;
    noStroke();
    fill(state);    
    rect(x, y, _cellSize, _cellSize);
  }
}

Discussion

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

画面中央のピクセルから徐々にセルオートマトンを波及させていきます。

今回のセルオートマトンの規則は次の通り(「ジェネラティブ・アート―Processingによる実践ガイド」より引用)。

もし隣接するセルの状態の平均が255であれば状態は0に
もし隣接するセルの状態の平均が0であるなら状態は255に
そうでなければ、新しい状態＝現在の状態＋隣接セルの状態の平均ー前の状態の値
もし新しい状態が255を超えたら255にし、もし新しい状態が0以下ならそれを0にする

脳の染色画像のような、あるいは悪い夢を見ているときのような、不思議で不気味なパターンが面白いところです。

Follow @bioerrorlog

Reference

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

作者:マット・ピアソン,Matt Pearson
発売日: 2014/11/21
メディア: 単行本（ソフトカバー）

2019-12-14

Generative Art #5 - Processing作品

GenerativeArt Processing

おはよう。@bioerrorlogです。

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

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

Output

f:id:BioErrorLog:20191214201153p:plain f:id:BioErrorLog:20191214201733p:plain f:id:BioErrorLog:20191214201814p:plain f:id:BioErrorLog:20191214201836p:plain

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

Material

使用言語: Processing 3.5.3

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

Source Code

GitHubはこちら

int _num = 50; // １クリックで生成するCircleの数
Circle[] _circleArr = {};


void setup(){
    size(1920,1080);
    background(255);
    smooth();
    strokeWeight(1);

    addCircles(); // はじめにCircleを生成
}


void draw(){
    // 配列に格納されたCircleすべてをupdate

    for (int i=0; i<_circleArr.length; i++){
        Circle thisCircle = _circleArr[i];
        thisCircle.updateMe();
    }
}


void keyPressed(){
    /*
    ENTERキー押下: 画像を保存する
    BACKSPACEキー押下: setup()を呼ぶ
    */
    
    if (keyCode == ENTER){
        saveFrame("generative_5_####.png");
    }
    if (keyCode == BACKSPACE){
        setup();
    }
}


void mouseReleased(){
    // マウスクリックでCircleを追加生成
    addCircles();
}


void addCircles() {
    // Circleを生成、配列に加える

    for (int i=0; i< _num; i++){
        Circle thisCircle = new Circle();
        _circleArr = (Circle[])append(_circleArr, thisCircle);
    }
}


class Circle{
    /*
    このCircle自身は描画されない
    他のCircleとの重複部分に円(または四角形)を描画する
    */

    float x, y;
    float xMove, yMove;
    float radius;
    float alpha;
  
    Circle(){
        x = random(width);
        y = random(height);

        xMove = random(10) - 5;
        yMove = random(10) - 5;

        radius = random(500) + 50;
    }


    void updateMe(){
        x += xMove;
        y += yMove;

        // 画面外に出たときは反対側に移動
        if (x > (width + radius)){x = 0 - radius;}
        if (x < (0 - radius)){x = width + radius;}
        if (y > (height + radius)){y = 0 - radius;}
        if (y < (0 - radius)){y = height + radius;}

        // 他の円と接触しているとき、その接触範囲に円(または四角)を描画する
        for (int i=0; i<_circleArr.length; i++){
            Circle otherCircle = _circleArr[i];

            if (otherCircle != this){
                float distance = dist(x, y, otherCircle.x, otherCircle.y);
                float overLap = distance - radius - otherCircle.radius;

                if ((overLap < 0)){ // 他の円と接触している場合
                    float midX, midY;
                    midX = (x + otherCircle.x) / 2;
                    midY = (y + otherCircle.y) / 2;

                    // 円または四角の描画
                    alpha = random(3);
                    stroke(0, alpha);
                    // stroke(random(255), random(255), random(255), alpha); // 微妙に色をつける
                    noFill();
                    overLap *= -1; // overLapを正の値に
                    rect(midX, midY, overLap, overLap); // 重複分の幅を持った四角を描画
                    // ellipse(midX, midY, overLap, overLap); // 重複分の幅を持った円を描画
                }
            }
        }
    }
}

Discussion

マット・ピアソン「ジェネラティブ・アート―Processingによる実践ガイド」6章で紹介されるオブジェクト指向プログラミングのケーススタディを改変して作成。

Circleクラスから円を生成し、それぞれの円の重複部分に、新たに円や四角形を薄く描画していきます(Circleクラスから生成した円自身は描画しません)。

Circleクラスから生成される円自身はごく簡単な挙動を取りますが、それらの相互作用から現れる新たな円は、えんぴつで描き殴ったような予測不能なパターンをみせる、というところに風情を感じます。

Follow @bioerrorlog

Reference

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

作者:マット・ピアソン,Matt Pearson
発売日: 2014/11/21
メディア: 単行本（ソフトカバー）

2019-12-13

Generative Art 自作品まとめ - Processing

GenerativeArt Processing セルオートマトンゲーム制作人工生命 BlockChain

こんにちは、@bioerrorlogです。

主にProcessingで制作したGenerative artの作品/サンプルを、こちらにリストアップしていきます。
ソースコード/出力結果は各詳細ページにて記述しています。

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

作品リスト
関連URL

作品リスト

GenerativeArtNFT

GenerativeArtNFTで使ったアート画像生成ロジックをまとめています。

TokenIdをinputとして無限で多様なGenerative Artを生成する、というのがやりたかったことです。

Output

Material

Source Code

Discussion

See also

Reference

Output

Material

Source Code

Discussion

See also

Reference

作品リスト

GenerativeArtNFT

Boids Flocking

Generative #14

Generative #13

Generative #12

Generative #11

Generative #10

Generative #9

Generative #8

Generative #7

Generative #6

Generative #5

Generative #4

Generative #3

Generative #2

Generative #1

関連URL

Output

Material

Source Code

Discussion

See also

Reference

Output

Material

Source Code

Discussion

See also

Reference

Output

Material

Source Code

Discussion

See also

Reference

Output

Material

Source Code

Discussion

See also

Reference