processingにおけるnoise関数の返り値についてメモ

noise関数

processingで絵を描くときに使う関数でnoise()があります。
Processingクイックリファレンス

noise()はパーリンノイズを生成するときに使い、不規則だけど連続性のある線を描画するときに使います。
例えば炎の色の濃淡を描いたり、空に浮かぶ雲の分布などです。
ja.wikipedia.org

noise()には引数を複数与えることができますが、戻り値は1つで、その範囲は0～1です。

noise()は引数が変わるたびに戻り値は微妙に変化していきます。
引数の値が変わり過ぎるとわかりにくいですが、0.1ずつ変えていくと微妙に変化していきます。

引数が1つの場合

noise()に一つだけ引数を渡して、その変化を見てみます。
以下はx座標の値を1/1000してnoise()に渡して、その戻り値を表示するコードです。

void setup() {
  size(1000, 50);
  background(255);
}

//座標
float x,y;
//座標分割
int div;
// noiseの戻り値用
float n;

void draw(){
  //座標を10分割する。
  div = 10;
  y = 0;
 //分割した座標のそれぞれから戻り値を受け表示する。
  for(x=0;x<=width;x+=width/div){
      n = noise(x/1000);
      fill(0);
      textAlign(LEFT,TOP);
      text("noise("+x/1000+")",x,y);  
     //関数の下に戻り値を表示する。
      text(n,x,y+10);
  }
}

出てくる画像は次のようなものです。
下の列に戻り値を表示しています。
戻り値はxが0.1増える度に微妙な変化を繰り返しています。

f:id:daigakuinnsei:20200524150242j:plain

引数が2つの場合

引数を二つ増やして、原点(0,0)を基準に戻り値の変化を見てみます。
noise()にx,yそれぞれの座標を1/1000して渡してあげ、その戻り値を表示します。

void setup() {
  size(1000, 800);
  background(255);
}

//座標
float x,y;
//座標分割
int div;
// noiseの戻り値用
float n;

void draw(){
  //座標を10分割する。
  div = 10;
 //分割した座標のそれぞれから戻り値を受け表示する。
  for(x=0;x<=width;x+=width/div){
    for(y=0;y<=height;y+=height/div){
      n = noise(x/1000,y/1000);
      fill(0);
      textAlign(LEFT,TOP);
      text("noise("+x/1000+","+y/1000+")",x,y);  
      text(n,x,y+10);
    }
  }
}

出力は次です。
左上の原点をから次の座標へ進んでいくと、なだらかに戻り値が変化していることが分かります。
座標上のどの点から上下左右斜めのどの隣の点を見ても、値は急激に変化していないことが分かります。

f:id:daigakuinnsei:20200524151739j:plain

この隣同士の戻り値が微妙にしか変化しない特性を色に置き換えることで、雲や炎などのグラデーションを表現することができます。

void setup() {
  size(300, 300);
  background(255);
}

float x,y;
int div;
float nr,ng,nb;

void draw(){
  div = 10;
  for(x=0;x<=width;x+=1){
    for(y=0;y<=height;y+=1){
      nr = noise(x/100,y/100)*255+50;
      ng = noise(y/100,x/100)*255+50;
      nb = noise(x/200+y/200,x/200+y/200)*255+50;
      strokeWeight(10);
      stroke(nr,ng,nb);
      point(x,y);
    }
  }
}