パーリンノイズを扱うには

◆PROCESSING　逆引きリファレンス

　カテゴリー：演算処理

【解説】

乱数はコンピュータゲームで、キャラクタのステータスや敵の場所などを決めるために使われます。

また地形（地図やダンジョンの壁）、背景（雲、水面、炎）などを描く際にも用いられます。

雲や炎、水面、地形などを描く際は、単純な乱数よりも「パーリンノイズ」と呼ばれる乱数を用いたほうが、よりリアルに描写できると言われています。

PROCESSINGには、パーリンノイズを扱うための noise() 命令があります。

パーリンノイズに関して、参考とさせて頂いたサイト様を紹介しておきます。

【構文】

PROCESSINGでパーリンノイズを使う

●シードを変更します
void noiseSeed( int seed ) ;

●１次元、２次元、３次元のノイズを発生させます
float n1 = noise( float x ) ;
float n2 = noise( float x, float y ) ;
float n3 = noise( float x, float y, float z ) ;

いずれの場合も、 0.0 から 1.0までの範囲の値が返却されます。
x、y、z に小さな値を与えるほど、発生する値に連続性が生まれます。

【注意】

noise() 命令には、引数の数が異なるものが用意されていますが、どれを用いても 0.0 から 1.0 の範囲の値を返却します。

使い分けとしては、単純なノイズを得るなら引数を1つ、雲や炎のような平面的な見かけのものを描く場合には引数を2つ、地形や洞窟の壁のデコボコなど3D的なものを描く場合には、引数を3つ与えるようです。※

※パーリンノイズの数学的な理屈が私にはよくわかりませんでしたので、推測です・・・。興味がある方は、上記に掲載したPOSTD様サイトの記事などを参考としてみてください。

noise() 命令に与える引数が同じ場合、プログラムのどこで何度命令を実行しても、常に同じ値が返却されます。

void setup(){
  println( noise( 1 ) );  //（１）
}
 
void draw(){
  println( noise( 1 ) );  //（２）
  noLoop();
}

void setup(){

println( noise( 1 ) ); //（１）

}

void draw(){

println( noise( 1 ) ); //（２）

noLoop();

}

例えば上記処理では、（１）と（２）で得られる値は、同じになります。

ただしこのAPを終了して再実行すると、（seedが自動的に切り替わるため）前回実行時とは異なる値が戻されます。

void setup(){
  //seedを指定すると、このAPを何度実行しても
  //noise(1) は同じ値を返す。
  noiseSeed( 0 );
  
  println( noise( 1 ) );
}
 
void draw(){
  println( noise( 1 ) );
  noLoop();
}

void setup(){

//seedを指定すると、このAPを何度実行しても

//noise(1) は同じ値を返す。

noiseSeed( 0 );

println( noise( 1 ) );

}

void draw(){

println( noise( 1 ) );

noLoop();

}

このようにseedを固定にすると、このAPを終了して再実行しても、（１）と（２）は必ず同じ値を返すようになります。

【関連記事】

乱数を扱うには

サンプルプログラム

パーリンノイズで雲を描く例：

final   float DETAIL = 80; // noise()の連続性
float   counter = 0;        // ノイズの位置調整値 
PImage  img;

void setup(){
  size(600, 400);
  img = loadImage( "Tree.png" );
  noStroke();
}
 
void draw(){
  //流れる雲を描く
  
  //現在の画素を取得
  loadPixels();
  
  //パーリンノイズをもとに色を決めて置き換える
  for(int y = 0; y < height; y++){
    for(int x = 0; x < width; x++){
      float deep = noise((x+counter)/DETAIL, (y+counter)/DETAIL)*255;
      float r = deep;
      float g = deep;
      //deepが0なら真っ青、255なら真っ白
      float b =  255 + (255 - deep);
      if( b > 255) { b = 255; }
      pixels[y * width + x] = color( r, g, b );
    }
  }
  
  //置き換えた画素を反映
  updatePixels();
 
  //画像（木）を前面に配置する 
  image( img, 0, 0 );
  
  //雲の流れる速度を調整
  counter = counter + 0.5f;
}

final float DETAIL = 80; // noise()の連続性

float counter = 0; // ノイズの位置調整値

PImage img;

void setup(){

size(600, 400);

img = loadImage( "Tree.png" );

noStroke();

}

void draw(){

//流れる雲を描く

//現在の画素を取得

loadPixels();

//パーリンノイズをもとに色を決めて置き換える

for(int y = 0; y < height; y++){

for(int x = 0; x < width; x++){

float deep = noise((x+counter)/DETAIL, (y+counter)/DETAIL)*255;

float r = deep;

float g = deep;

//deepが0なら真っ青、255なら真っ白

float b = 255 + (255 - deep);

if( b > 255) { b = 255; }

pixels[y * width + x] = color( r, g, b );

}

//置き換えた画素を反映

updatePixels();

//画像（木）を前面に配置する

image( img, 0, 0 );

//雲の流れる速度を調整

counter = counter + 0.5f;

}

雲の流れにパーリンノイズを利用しています。見上げた木の葉っぱの隙間を、雲が流れていきます。秋らしいCGになりました（笑）。

上記プログラムは「Proce55ing.walker,blog 」様に掲載されていたものを、改変して掲載しています。

＜出力サンプル＞

（画像URL：フリー素材ぱくたそ（www.pakutaso.com）様：*youさん）

下記はサンプルプログラムと同じ動きになるように、 P5.js で書き直したものです。動作イメージを確認できます。

なお一部のスマホ搭載ブラウザからは正しく表示されない場合があります。また Chromeではうまく表示されないようです（汗）。その場合は、IE11、Edge、FireFoxなどで閲覧して下さい。

PROCESSING逆引きリファレンス一覧へ戻る

本ページで利用しているアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。

iconka.com 様
ICOOON MONO 様

◆PROCESSING 逆引きリファレンス

カテゴリー：演算処理