ランダムウォークで作るGenerativArt

ランダムウォークの軌跡

ランダムウォークというのは進む方向をランダムに決めて動いた時の軌跡のことです。

黒い四角形をランダムウォークさせてみます。 動く方向を上下左右にランダムに決めて動かしていきます。 すると下のような線になります。これがランダムウォークさせた軌跡です。

ソースコードを表示する

function setup() {
   const w = 720;
   createCanvas(w, w);

   rectMode(CENTER);
   colorMode(HSB);
   noStroke();

   const N=1;
   let p=[];

   for(let i=0;i<N;i++){
     p[i]={ x: int(w/2),
            y: int(w/2),
            size: int(5),
            func: rect,
            color: [0, 0, 0, 1]
     }
   }

   background(100);

   for(let k=0;k<10000;k=k+1){
      for(let i=0;i<N;i=i+1){
        push();
        const pp = p[i];
        fill(...pp.color);
        translate(pp.x, pp.y);
        pp.func(0, 0, pp.size);
        pop();

        const r =  pp.size;
        p[i].x += int(random(-1, 1)*r);
        p[i].y += int(random(-1, 1)*r);
      }
   }
}

透明度を変えたランダムウォーク

ランダムウォークさせた時の軌跡を描く際に、透明度を変化させてみます。 透明度を時間経過するごとに減少させていくと、徐々に描く軌跡が薄くなり、最後には消えます。 このようにすることで、最後がかすれたような表現になり、筆っぽい雰囲気が出ると思います。

ソースコードを表示する

function setup() {
   const w = 720;
   createCanvas(w, w);

   rectMode(CENTER);
   colorMode(HSB);
   noStroke();

   const N=1;
   let p=[];

   for(let i=0;i<N;i++){
     p[i]={ x: int(w/2),
            y: int(w/2),
            size: int(5),
            func: rect,
            color: [0, 0, 0, 1]
     }
   }

   background(100);

   const L=3000;
   for(let k=0;k<L;k=k+1){
      for(let i=0;i<N;i=i+1){
        push();
        const pp = p[i];
        fill(...pp.color);
        translate(pp.x, pp.y);
        pp.func(0, 0, pp.size);
        pop();

        const r =  pp.size;
        p[i].x += int(random(-1, 1)*r);
        p[i].y += int(random(-1, 1)*r);
        p[i].color[3] -= 1/L;
      }
   }
}

多数の図形をランダムウォーク

多数の図形をランダムウォークさせてみます。 更に色もランダムに着けてみます。

これで一つの形になり、作品になりました。

ソースコードを表示する

function setup() {
   const w = 720;
   createCanvas(w, w);

   rectMode(CENTER);
   colorMode(HSB);
   noStroke();

   const N=100;
   let p=[];

   for(let i=0;i<N;i++){
     p[i]={ x: int(w/2),
            y: int(w/2),
            size: int(5),
            func: rect,
            color: [int(random([230, 240, 250])),
                    int(random(100)),
                    int(100),
                    int(1)
                   ]
     }
   }

   background(100);

   const L=3000;
   for(let k=0;k<L;k=k+1){
      for(let i=0;i<N;i=i+1){
        push();
        const pp = p[i];
        fill(...pp.color);
        translate(pp.x, pp.y);
        pp.func(0, 0, pp.size);
        pop();

        const r =  pp.size;
        p[i].x += int(random(-1, 1)*r);
        p[i].y += int(random(-1, 1)*r);
        p[i].color[3] -= 1/L;
      }
   }
}

作例

最後に色の付け方や図形の大きさを変え、移動や透明度の時間変化をパラメータで色々と調整します。 これでランダムウォークを使った作品の完成です。

試行錯誤しながらこの形に辿り着きました。 かなりお気に入りの作品になって嬉しいです。（その嬉しさがこの記事をまとめたモチベーション）

ソースコードを表示する

function setup() {
   const w = 720;
   createCanvas(w, w);

   rectMode(CENTER);
   colorMode(HSB);
   noStroke();

   const N=1200;
   let p=[];
   const col=[];
   col[0] = [200,220, 180, 20];
   col[1] = [30, 50, 10, 360, 270];

   const sel_col = random(col);

   for(let i=0;i<N;i++){
     p[i]={ x: int(random(w)),
            y: int(random(w)),
            size: int(random(3, 20)),
            func:random([ellipse, ellipse, rect]),
            color: [ int(random(sel_col)),
                     int(random(0, 80)),
                     int(random(70, 100)),
                     random(0.5, 1.5)
            ]
     }
   }

   background(100);

   for(let k=0;k<720;k=k+1){
      const t = k / 20;
      const r = 3*sin(t) + 3 ;
      const s = r / 1500;

      for(let i=0;i<N;i=i+1){
        push();
        const pp = p[i];
        fill(...pp.color);
        translate(pp.x, pp.y);
        pp.func(0, 0, pp.size);
        pop();

        p[i].x += int(random(-1, 1)*r);
        p[i].y += int(random(-1, 1)*r);
        p[i].color[3] -= s + random(-1, 1)/300;
      }
   }
}

//save PNG
function mousePressed() {
   save("img_" + month() + day() + hour() + minute() + second() + ".png");
}

まとめ

今回はランダムウォークを作品に取り入れてみました。 ランダムウォークの軌跡も上手く使うと作品に面白さが出ますね。 皆さんの作品へも取り入れてみてはいかがでしょうか。