P5.js 日本語リファレンス(noise) #JavaScript

このページでは「P5.js 日本語リファレンス」の noise関数を説明します。

noise()

説明文

指定された座標での Perlin ノイズ値を返します。Perlin ノイズは、標準の random() 関数と比較してより自然な順序で調和のとれた一連の数値を生成するランダムシーケンスジェネレータです。 1980年代に Ken Perlin によって発明され, 手続き型のテクスチャ、自然な動き、形状、地形などを生成するためにグラフィカルアプリケーションで使用されました。

random() 関数との主な違いは、Perlin ノイズが無限のn次元空間で定義されることです。この場合、座標の各ペアは、固定されたセミランダム値に対応します(プログラムの存続期間に対してのみ固定されます。noiseSeed() を参照してください) p5.js は、指定された座標の数に応じて、1D、2D、および3Dノイズを計算できます。結果の値は常に0.0 から 1.0 の間になります。上記の例で示したように、ノイズ値はノイズ空間を移動することでアニメーション化できます。 2番目と3番目の次元も時間として解釈できます。

関数による周波数の使用に関しては、実際のノイズはオーディオ信号と同様に構成されています。物理学における高調波の概念と同様に、Perlin ノイズは最終結果のために加算されるいくつかのオクターブにわたって計算されます。

結果のシーケンスの特性を調整する別の方法は入力座標のスケールです。関数は無限空間内で機能するため、座標の値自体は問題ではなく、連続する座標間の距離のみが関係します(たとえばループ内で noise() を使用する場合) 一般的なルールとして、座標間の差が小さいほど結果のノイズシーケンスは滑らかになります。 0.005〜0.03 のステップがほとんどのアプリケーションに最適ですが、これは使用状況によって異なります。

構文

noise(x, [y], [z])

パラメタ

x

Number：ノイズ空間のx座標
y

Number：ノイズ空間のy座標(オプション)
z

Number：ノイズ空間のz座標(オプション)

戻り値

Number：指定された座標でのPerlinノイズ値(0と1の間)

例1

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

function draw() {
  let noiseScale = 0.03;

  background(0);
  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      let noiseVal = noise(x * noiseScale, y * noiseScale);
      stroke(noiseVal * 255);
      point(x, y);
    }
  }  
}

実行結果

例2

var ns = 0.02; // ノイズスケール(係数)
var sz = 5; // 1ドットの縦横サイズ
var t = 0; // 時間軸

function setup() {
  createCanvas(200, 200);
  colorMode(HSB);
  noStroke();
}

function draw() {
  for (var x = 0; x < width; x += sz) {
    for (var y = 0; y < height; y += sz) {
      var n = noise(x * ns, y * ns, t);
      fill(n * 360, 100, 100); // HSBでカラー指定
      rect(x, y, sz, sz);
    }
  }
  t += 0.005; // 時間の更新
}

実行結果

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。