今回は技術的な記事を書こうと思います。
制作を始めてから半年になりますが、noise関数を何となく使っていたので、
使い方をちゃんと理解するためにもこの記事にまとめていこうと思います。
目次
パーリンノイズ
noise関数はパーリンノイズを使用した絵を作成するときに使います。
パーリンノイズはコンピュータグラフィックスで炎や煙、雲などを表現するときに
よく使われており、色や動きの自然な変化を生み出すことができます。
パーリンノイズを使いこなすことができれば、作品制作の幅がかなり広がります。
processingにおけるnoise関数は引数に値を与えると0.0から1.0の間の値(float)を戻り値として返します。記載方法は以下です。
noise(x); //xノイズ空間におけるx座標
noise(x,y); //yノイズ空間におけるy座標(float)
noise(x,y,z); //zノイズ空間におけるy座標(float)noise関数の引数が変化すると戻り値も変化します。
引数の変化が微細な場合、戻り値も微細なため自然な変化が出せる
下記のソースコードでnoise関数を使って線を描いてみるとよく分かります。
//noise関数の引数の初期値
float ynoise = 0;
//noise関数の引数の増加数
float addNum = 0.01;
float y;
void setup(){
size(800,800);
background(255);
pixelDensity(displayDensity());
strokeWeight(1);
stroke(0);
//vertex関数でx座標が1増加するごとに頂点を線で結んでいく
beginShape();
for(int i = 0;i<=540;i++){
//y座標は350~400の間で変化する
y = 350+50*noise(ynoise);
vertex(130+i,y);
ynoise+=addNum;
}
endShape();
}
以下のキャプチャはnoise関数の引数を0.01ずつ変化させた時の実行結果
noise関数の引数を1ずつ変化させた時の実行結果
これはもう滑らかな変化とは言い難いですね。感覚的に0.01は結構滑らかな変化になると思います。
下記のソースコードをコメントアウトした結果を見ると次のことがわかります。
//ynoise+=addNum;noise関数の引数が変化しない場合、何度関数を呼び出しても戻り値は同じになる
これらのnoise関数の特徴を理解した上で山を書いてみます！
void setup(){
size(850,850);
background(0);
pixelDensity(displayDensity());
noFill();
//関数呼び出し
drawMount(500,198,100,84);
}
//山を描画する関数 drawMount(y座標,R,G,B)
void drawMount(float y, float r , float g, float b){
beginShape();
for(float i = 0;i<1000;i+=2){
strokeWeight(1);
stroke(r,g,b);
//上の頂点
vertex(i,noise(i*0.01)*y);
//下の頂点
vertex(i-(y*0.08),1.2*y);
}
endShape();
}上の頂点はy座標をnoise関数を使用して変化させています。
下の頂点はx座標を第一引数×0.08の値分ずらしています。
上下の頂点をiの値が増えるごとに結んで500回繰り返し描画していくと山のような
処理結果が得られます。
以上がnoise関数の使い方とその応用となります。
この記事が皆さんの作品制作の手助けになると嬉しいです！
最後までブログを読んでいただき、ありがとうございました。
参考文献
Komentáře