2

私はノイズの生成について学ぼうとしており、そのほとんどを理解していることがわかりましたが、スクリプトに少し問題があります。

このページをガイドとして使用して、このスクリプトを JavaScriptで記述し、キャンバス上にノイズを作成するという最終的な目的を達成しました。

それは間違いなく何かを作成していますが、左側にずっと隠れています. また、ページを更新すると、同じパターンが何度も繰り返されるようです。

  1. 画像の「ノイズの多い」部分が左側で押しつぶされているのは、何が間違っているのでしょうか? 曇ったパーリンノイズのように見せるにはどうすればよいですか?
  2. 毎回新しいパターンを生成しない理由がよくわかりません。スクリプトが実行されるたびにランダムなパターンを受け取るには、何を変更する必要がありますか?

ご協力ありがとうございました！

/* NOISE—Tie it all together
*/
function perlin2d(x,y){
    var total = 0;

    var p = persistence;
    var n = octaves - 1;

    for(var i = 0; i <= n; i++) {
        var frequency = Math.pow(2, i);
        var amplitude = Math.pow(p, i);

        total = total + interpolatenoise(x * frequency, y * frequency) * amplitude;
    }
    return total;
}
4

1 に答える 1

5

私はあなたのフィドルをフォークし、それを機能させるためにいくつかのことを修正しました: http://jsfiddle.net/KkDVr/2/

主な問題は、疑似乱数生成器の「ノイズ」に欠陥があり、x と y の値が十分に大きい場合に常に 1 を返すことでした。整数座標でクエリされるランダム値テーブルに置き換えました。

var values = [];
for(var i = 0; i < height; i++) {
    values[i] = [];
    for(var j = 0; j < width; j++) {
        values[i][j] = Math.random() * 2 - 1;
    }
}
function noise(x, y) {
    x = parseInt(Math.min(width - 1, Math.max(0, x)));
    y = parseInt(Math.min(height - 1, Math.max(0, y)));
    return values[x][y];
}

ただし、従ったチュートリアルで提供されている実装では、最適化が不十分な単純化されたアルゴリズムが使用されています。http://scratchapixel.com/lessons/3d-advanced-lessons/noise-part-1にある優れた実世界のノイズ チュートリアルをお勧めします。

最後に、私のプロジェクトhttp://lencinhaus.github.com/canvas-noiseに興味があるかもしれません。これは、html5 キャンバスにパーリン ノイズをレンダリングし、ほぼすべてのパラメーターを視覚的に微調整できる JavaScript アプリです。Ken Perlin によるオリジナルのノイズ アルゴリズムの実装を JavaScript に移植しました。ソースコードはhttps://github.com/lencinhaus/canvas-noise/tree/gh-pagesにあります。

それが役立つことを願っています、さようなら！

于 2013-02-26T17:47:32.343 に答える