【Processing】noise()関数の使い方【滑らかにランダムな数字を作って表現する】

ワタタク

今回の記事の目的はProcessingの「noise()関数」を理解し、自分なりに使ってみること。

この記事を書いた人

プロフィール

• クリエイティブコーディング初心者が、アーティストとして活躍するまでの上達の過程を発信
• コンセプトは「クリエイティブコーディング1万時間の歩き方」
• 参考にしてもらえるブログにするため、Processingを独学で勉強して共有中

 

記事内のProcessingのバージョンは4.3。

動きのある画像は、コードではなく、GIF画像編集で無限再生されるようにしています。

【Processing】noise()関数について

【Processing】noise()関数の書き方【構文】

ワタタク

値の数が増えると、ノイズの変化する方向や次元が増えて、より複雑なランダムな動きや模様を作ることができる

【Processing】noise()関数の使い方2つ【画像とコード】

【1】noise(x)の構文を使ってみる例

float x = 0.0;

void setup() {
  size(400, 400);
}

void draw() {
  background(255);

  float n = noise(x);
  ellipse(n * width, height / 2, 50, 50);

  x += 0.01;
}

ワタタク

13行目のx += 0.01;を0.5とか1に変えると、簡単に動きを変えることができた。

【2】noise(x, y)の構文を使ってみる例

noise(x, y)を使って、動きをなくし連続した円を描くコード。

円の位置はランダムに変わります。

void setup() {
  size(400, 400);
  background(255);
  noLoop();  // draw()を一度だけ実行
}

void draw() {
  float x = 0.0;
  for (int i = 0; i < 100; i++) {
    float nX = noise(x, 0);
    float nY = noise(0, x);
    ellipse(nX * width, nY * height, 10, 10);
    x += 0.1;
  }
}

ワタタク

13行目のx += 0.1;の数字を大きくしてみると、円が配置される位置が変わって面白い。実際に触って、変化を感じてみてくださいね。

【Processing】noise()関数とsin()関数を組み合わせてみる

11行目と12行目の

float noiseValueX = noise(x, y);

float noiseValueY = noise(y, x);

は、なぜxとyの順番が違うのか。

順番を変えることで、noise(x, y)とnoise(y, x)が異なるノイズパターンを生成します。両方の値を使用して、より多様な動きや配置が得られるのです。同じ順番だと、結果が似たようなものになってしまいます。順番を変えることで、プログラムの動きに変化を加えることができる。

なぜ異なるノイズパターンになるのか？

noise()関数が異なる座標に対して異なるノイズ値を生成するからです。例えば、noise(x, y)とnoise(y, x)では、引数の順番が逆になっているため、内部的に異なる計算が行われて別々のノイズ値が得られます。これにより、違ったパターンのノイズが生成される。

noise(x, y)とnoise(y, x)は異なる入力に対して異なる出力を返すように設計されています。これが、同じ入力順序だと似たようなパターンが得られるのに対し、入力順序を変えると異なるパターンが得られる。

float x = 0.0;
float y = 0.0;

void setup() {
  size(400, 400);
}

void draw() {
  background(255);

  float noiseValueX = noise(x, y);
  float noiseValueY = noise(y, x);
  float sinValue = sin(x);
  
  float posX = noiseValueX * width;
  float posY = (height / 2) + sinValue * 50;
  
  ellipse(posX, posY, 50, 50);

  x += 0.01;
  y += 0.01;
}

【Processing】noise()関数を使ってみた感想

Processingの学習に挫折したときは、noise()関数のページは後半にありますし、眺めてるだけでした。

しかし、ようやくProcessingの勉強の面白さが分かり、noise()関数を自分なりに理解することができました。

すごく嬉しいです。

2024年から2025年の3月15日までは、基礎を中心に学習し、そこからさらに応用できるようになっていこうと思います。

ワタタク

それでは今日もレッツワクワクコーディング。