と聞いた時に返ってくる答えランキング1位といえば「ランダム」(俺調べ 調査人数1人)。
ランダムな要素を取り入れると人の意志とは無関係に、予想もつかない変化を見せてくれるので単純におもしろい。数学的にはきっと値に偏りがないだとか、再現性がないようにとか、そういった色々考慮すべき点はあるとは思いますが、今回は単純にProcessingのrandom()が返してくれる数値で遊んでみます。(そういえばrandom()の中のアルゴリズムって何だろ？？)
今回作るのはランダムに発生する数値を可視化するランダムウォークです。
ウォークと名がついているから、とりあえず今回は移動だけにランダムな値を適用して見ていこうかと思いますが、移動だけでなく色、形、大きさ、加速度、色々なパラメータに適用する事でもっとおもしろい動きになるらしいです。
二次元平面のランダムウォーク
まずは二次元平面上を上下左右の4方向にそれぞれランダムに移動させてみます。
ソースコード
int gX;
int gY;
void setup() {
size(200, 200);
background(255);
gX = width / 2;
gY = height / 2;
}
void draw() {
int value = (int)(random(4));
if(value == 0) { gX += 1; }
else if(value == 1) { gX -= 1; }
else if(value == 2) { gY += 1; }
else { gY -= 1; }
stroke(0);
point(gX, gY);
}
実行結果
これだけでランダムに移動する軌跡を描くことができました。
ちょ、ちょっと地味っすね。
重要なのは、draw()関数の最初の部分。
random()で生成した0.0～3.9までの値を元に、上下左右それぞれの方向へ1ピクセル分移動させるように計算しています。
んーしかし、やっぱりこれだけではちょっと物足りないような・・・？
大量の二次元平面ランダムウォーク
という事で、以下のようにちょっと拡張してみたいと思います。
- ランダムウォークする軌跡を大量にする(100個くらい？)
- それぞれの軌跡に個別の色を設定する
- それぞれの軌跡が混じり過ぎないように過去の線は薄くする
ソースコード
public class Walker {
int mX;
int mY;
color mColor;
public Walker(color col) {
mX = width / 2;
mY = height / 2;
mColor = col;
}
public void update() {
int value = (int)(random(4));
if(value == 0) { mX += 1; }
else if(value == 1) { mX -= 1; }
else if(value == 2) { mY += 1; }
else { mY -= 1; }
}
public void onDraw() {
stroke(mColor);
point(mX, mY);
}
}
ArrayList<Walker> gWalkerList;
void setup() {
size(200, 200);
background(0);
gWalkerList = new ArrayList();
for(int i=0; i<100; ++i) {
gWalkerList.add(new Walker(color((int)random(255), (int)random(255), (int)random(255))));
}
}
void draw() {
fill(0, 10);
rect(0, 0, width, height);
for(Walker walker : gWalkerList) {
walker.update();
walker.onDraw();
}
}
実行結果
複数の軌跡を描くために、軌跡描画処理をクラス化しましたが、基本的な処理は前述のものと変わりありません。
なんだか微生物が動いているみたいでキモかわいい！
でもさすがに100個は多すぎたかな？
