JavaScript 噪声函数问题答案

【问题标题】：JavaScript Noise Function ProblemsJavaScript 噪声函数问题
【发布时间】：2012-11-15 09:55:06
【问题描述】：

我一直在努力学习如何产生噪音，发现我了解其中的大部分内容，但我在编写脚本时遇到了一些问题。

我使用this page 作为指导来编写this script in JavaScript，最终目的是在画布上制造一些噪音。

它确实在创造一些东西，但它一直藏在左边。此外，刷新页面似乎会一遍又一遍地创建相同的模式。

我做错了什么，图像的“嘈杂”部分在左侧被弄脏了？我怎样才能让它看起来更像多云的柏林噪音？
我真的不明白为什么它每次都不会产生新的模式。为了在每次运行脚本时接收随机模式，我需要进行哪些更改？

感谢您的帮助！

/* 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;
}

【问题讨论】：

我看不出您在代码中的哪个位置更改了算法的输入，例如使用随机数。您的算法是确定性的——也就是说，给定相同的输入，它们总是会给出一致的结果。不过，不确定您的噪音中“糊状”的部分。
同意马特的观点。持久性在哪里定义，以及八度音阶。如果它总是相同，那么它将总是返回相同的结果。

标签： javascript html canvas noise

【解决方案1】：

我已经对你的小提琴进行了分叉并修复了一些问题以使其正常工作：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。这是一个 javascript 应用程序，可以在 html5 画布上呈现 perlin 噪声，并允许在视觉上调整几乎任何参数。我已将 Ken Perlin 的原始噪声算法实现移植到 javascript，因此这可能对您有用。你可以在这里找到源代码：https://github.com/lencinhaus/canvas-noise/tree/gh-pages。

希望对你有帮助，再见！

【讨论】：