Processing:パーリンノイズとパーリンノイズウォーク - 元Webデザイナー兼コーダーの備忘録

The Nature of Code(PDF版)からパーリンノイズについて取り上げます。Processingでプログラムを書いて、動作を確認します。動作を確認できるところがProcessingの楽しいところです。今回は、パーリンノイズの基本とパーリンノイズを使ったランダムウォークを見ていきます。

パーリンノイズ
- プログラムの解説・メモ
ランダム関数のグラフ
パーリンノイズウォーカー
- プログラムの解説・メモ
まとめ
参考サイト

パーリンノイズ

パーリンノイズは、テクスチャの生成に使われます。例えば、炎、雲、大理石などの自然物のテクスチャを生成するときに利用します。パーリンノイズのグラフは、滑らかな曲線になります。つまり、似た値を前後に取ります。以下は、パーリンノイズのグラフのコードです。

float y = 0;
float ty = 0;

void setup() {
  size(640, 180);
  background(255);
  strokeWeight(1.0);
}

void draw(){
  beginShape();
  for(int x = 0 ; x < width; x++){
    y = map(noise(ty), 0, 1, 0, height);
    vertex(x, y);
    ty += 0.01;
  }
  endShape();
  noLoop();
}

以下は、パーリンノイズのグラフの例です。滑らかな曲線になっているのが分かると思います。

比較のため、以下にランダム関数のグラフを載せます。ランダム関数のグラフと比べるとパーリンノイズのグラフが滑らかなのが分かると思います。

プログラムの解説・メモ

パーリンノイズを利用するには、noise関数を使います。noise関数は、0.0～1.0の値を返します。noise関数の引数は、小さい値だと滑らかなノイズが得られます。今回は、noise関数から返される値を表示領域の高さにマッピングしました。

メモ
- map(値, 現在の範囲の最小値, 現在の範囲の最大値, 新しい範囲の最小値, 新しい範囲の最大値);

ランダム関数のグラフ

以下は、ランダム関数のグラフのコードです。

float y = 0;

void setup() {
  size(640, 180);
  background(255);
  strokeWeight(1.0);
}

void draw(){
  beginShape();
  for(int x = 0 ; x < width; x++){
    y = random(height);
    vertex(x, y);
  }
  endShape();
  noLoop();
}

パーリンノイズウォーカー

パーリンノイズを使ったランダムウォークについて見ていきます。まず、楕円のx座標にパーリンノイズを適用してみます。

//パーリンノイズ
void setup(){
  size(640, 360);
  background(255);
}

float t = 0;
void draw(){
  float n = noise(t);
  float x = map(n, 0, 1, 0, width);
  ellipse(x, 180, 16, 16);
  t += 0.01;
}

次に、y座標にもパーリンノイズを適用します。また、以前作ったWalkerクラスを利用します。

//パーリンノイズウォーカー
class Walker{
  float x, y;
  float tx, ty;

  Walker(){
    tx = 0;
    ty = 10000;
  }

  void step(){
    x = map(noise(tx), 0, 1, 0, width);
    y = map(noise(ty), 0, 1, 0, height);
    tx += 0.01;
    ty += 0.01;
  }

  void display(){
    fill(128);
    ellipse(x, y, 32, 32);
  }
}

Walker w;

void setup(){
  size(640, 180);
  background(255);
  w = new Walker();
}

void draw(){
  w.step();
  w.display();
}