ノイズ関数が描く自然の息吹：p5.jsパーリンノイズで生み出す有機的パターン

コンピュータの生成するランダムな点は、時にあまりにも無機質に感じられます。random() 関数が吐き出す数値の羅列は、星々の瞬きのようにそれぞれが独立し、互いに何の関わりも持ちません。しかし、私たちが心惹かれる自然界のパターン――雲の形、海岸線の凹凸、木目のゆらぎ――は、そのような完全な無秩序とは異なる貌をしています。そこに潜むのは、予測不可能性と連続性が織りなす、ある種の秩序です。均一なランダム性だけでは表現できない、より生命感のある複雑なパターンをコードで生み出したい。その切なる願いの答えは、パーリンノイズ という概念の中に眠っています。この記事では、p5.jsの noise() 関数を使い、単なる偶然性から脱却し、自然界に見られるような有機的なゆらぎを生み出す哲学と実践を探求します。

パーリンノイズとは何か？：秩序とカオスの間に潜む美学

パーリンノイズは、1980年代初頭にケン・パーリン (Ken Perlin) によって開発された、コンピュータグラフィックスのためのテクスチャ生成技術です。その目的は、デジタルな世界にありがちな機械的な均一さを打破し、より自然でリアルな質感をアルゴリズムによって生み出すことでした。今日、それはジェネラティブアートやクリエイティブコーディングの領域で、有機的な形や動きを創出するための根源的なツールとして広く用いられています。

パーリンノイズの本質は、その 連続性 にあります。p5.jsの random() 関数は、呼び出されるたびに以前の値とは全く無関係な新しい値を返します。サイコロを振る行為に似て、前の出目が次の出目に影響を与えないのです。一方、noise() 関数は、入力値が近ければ、出力される値もまた近くなるという特性を持ちます。これは、入力値を空間内の「座標」として捉え、その座標周辺で滑らかに変化する値を返す仕組みに基づいています。

この特性こそが、自然界のゆらぎと深く共鳴する点です。例えば、ある地点の標高は、そのすぐ隣の地点の標高と極端にかけ離れていることは稀です。山脈は滑らかな稜線を描き、海岸線は複雑ながらも連続した曲線を描きます。パーリンノイズは、このような「隣接する要素が互いに影響を与え合う」という自然界の法則を、アルゴリズミックに模倣するための美しい抽象化なのです。それは完全なカオスでも、厳格な秩序でもない、その中間に広がる豊かで複雑な領域を探求するための羅針盤と言えるでしょう。

p5.jsにおけるnoise()関数の実践：ゆらぎをコードに落とし込む

p5.jsでパーリンノイズを扱うのは驚くほど直感的です。その中心となるのが noise() 関数です。この関数は、引数として1つから3つの数値を受け取り、0 から 1 の間の値を返します。これらの引数は、ノイズ空間における座標と考えることができます。

• 1Dノイズ: noise(x)
• 2Dノイズ: noise(x, y)
• 3Dノイズ: noise(x, y, z)

最もシンプルな1次元のノイズを考えてみましょう。時間経過を示す変数を少しずつ増やしながら noise() 関数に渡すと、その戻り値が滑らかに変化していく様子を観察できます。

let xoff = 0.0;

function draw() {
  background(255);

  let n = noise(xoff);
  let x = map(n, 0, 1, 0, width);

  ellipse(x, height / 2, 24, 24);

  xoff += 0.01;
}

このコードでは、変数 xoff が時間軸の役割を果たします。draw() ループが繰り返されるたびに xoff をわずかに増加させることで、noise() は連続的で予測不能ながらも滑らかな値を返します。結果として、円は画面上を不規則に、しかし決して瞬間移動することなく、有機的に漂うのです。これが random() を使った場合との決定的な違いです。random(width) であれば、円は毎フレーム、画面上の全く異なる場所に瞬間移動してしまうでしょう。

noise() の返す値の範囲は常に 0 から 1 です。そのため、p5.jsの map() 関数と組み合わせることで、円の座標、色、大きさなど、スケッチのあらゆる要素をこの有機的なゆらぎで制御できます。この滑らかな連続性こそが、有機的パターン を生み出すための最初の、そして最も重要な一歩となります。

パーリンノイズを使った有機的パターンの創造：大地、雲、生命の息吹

noise() 関数の座標という概念を空間的に拡張することで、静的ながらも複雑で自然なパターンを生成できます。特に2Dノイズは、地形図、雲、あるいは生物の模様を思わせる表現に非常に有効です。

キャンバス上のすべてのピクセル (x, y) をノイズ空間の座標と見なし、noise(x, y) の値に応じてピクセルの色を決定してみましょう。このとき、x と y をそのまま noise() に渡すと、値の変化が急すぎてざらついた見た目になりがちです。そこで、小さな係数（スケール）を掛けて入力値の変化を緩やかにするのが一般的です。

let scale = 0.02;

function setup() {
  createCanvas(400, 400);
  noLoop(); // 静的な画像なので一度だけ描画
}

function draw() {
  loadPixels();
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      let noiseVal = noise(x * scale, y * scale);
      let c = map(noiseVal, 0, 1, 0, 255);
      let index = (x + y * width) * 4;
      pixels[index] = c;
      pixels[index + 1] = c;
      pixels[index + 2] = c;
      pixels[index + 3] = 255;
    }
  }
  updatePixels();
}

このコードを実行すると、モノクロの濃淡で描かれた、まるで雲や大理石の模様のようなイメージが生成されます。scale の値を変更することで、パターンの細かさを調整できます。値を小さくすればより滑らかで大きな模様に、大きくすればより細かく複雑な模様になります。ここではピクセルの色を直接操作しましたが、この2Dノイズの値を等高線のように解釈して線を引けば山脈が、あるいは特定のしきい値で色を分ければ島の群れが生まれるでしょう。このように、p5.js noise は、単純なアルゴリズムから無限の風景を描き出すための強力な絵筆となるのです。

時間と空間におけるノイズの活用：動的な生命を宿すアニメーション

パーリンノイズの真価は、静的なパターン生成に留まりません。3Dノイズ、noise(x, y, z) を使うことで、2次元の空間に時間の流れを導入し、生命感あふれるアニメーションを生み出すことができます。3番目の引数 z を時間軸として捉え、フレームごとに少しずつ変化させるのです。

先ほどの2Dノイズのスケッチに、時間軸を加えてみましょう。

let scale = 0.02;
let t = 0; // 時間を管理する変数

function setup() {
  createCanvas(400, 400);
}

function draw() {
  loadPixels();
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      // 3次元のノイズを使い、z軸を時間として扱う
      let noiseVal = noise(x * scale, y * scale, t);
      let c = map(noiseVal, 0, 1, 0, 255);
      let index = (x + y * width) * 4;
      pixels[index] = c;
      pixels[index + 1] = c;
      pixels[index + 2] = c;
      pixels[index + 3] = 255;
    }
  }
  updatePixels();

  t += 0.01; // 時間を進める
}

このコードは、先ほどの静的な雲のパターンに動きを与えます。t が少しずつ増加することで、ノイズ空間を z 軸方向にゆっくりとスライスしていくことになり、結果として雲の模様が滑らかに変化し、流れていくように見えます。これはもはや単なる模様ではなく、生命の息吹を感じさせる現象です。同じ原理で、水面の揺らめき、風にそよぐ草木、あるいは蠢く微生物のコロニーなど、あらゆる動的な自然現象を模倣する扉が開かれます。空間 (x, y) と時間 (z) をパーリンノイズでつなぐことで、私たちのコードは静的な絵画から動的な映像詩へと昇華されるのです。

コードが紡ぐ自然の詩：パーリンノイズが問いかける存在の根源

パーリンノイズを探求する旅は、単なるプログラミング技術の習得以上の意味を持ちます。それは、私たちが「自然らしさ」や「生命感」をどのように認識しているのか、その根源を問う内省的なプロセスです。なぜ、noise() が生み出す滑らかなゆらぎに、私たちは心地よさや美しさを見出すのでしょうか。

おそらくそれは、パーリンノイズが内包する「関係性」の美学にあるのでしょう。random() が描き出すのは孤独な点の集合ですが、noise() が紡ぐのは、隣接する点と緩やかにつながり、互いの存在を前提とした連続的な世界です。そこには、ある種の記憶や文脈が存在します。一つの値は、その前後の値から完全に切り離されては存在し得ない。この相互依存的なあり方は、生態系や社会、そして私たち自身の意識の流れともどこか通底しているように感じられます。

クリエイティブコーディングにおいて、パーリンノイズは便利なツールであると同時に、強力な哲学的問いかけでもあります。私たちはコードを通して、秩序とカオスの境界線を歩き、決定論と偶然性の間で踊ります。一行一行のロジックを積み重ねながら、その結果として立ち現れる予測不能な有機的パターンに、世界の根源的な姿を垣間見るのかもしれません。あなたの書くコードが次に紡ぐのは、どのような自然の詩でしょうか。その探求の旅は、今、始まったばかりです。