我一直在尝试了解如何生成噪音,并发现我了解其中的大部分内容,但我在编写脚本时遇到了一些问题。
我用了this page作为编写this script in JavaScript的指南最终目的是在 Canvas 上产生一些噪音。
它确实在创造一些东西,但它一直藏在左边。此外,刷新页面似乎会一遍又一遍地创建相同的模式。
- 我做错了什么,图像的“嘈杂”部分被弄脏在左侧?我怎样才能让它看起来更像阴沉的柏林噪音?
- 我真的不明白为什么它每次都不产生新的模式。为了在每次运行脚本时接收随机模式,我需要更改什么?
感谢您的帮助!
/* 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;
}
最佳答案
我已经 fork 了你的 fiddle 并修复了一些东西以使其正常工作: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 Canvas 上呈现 perlin 噪声,并允许在视觉上调整几乎任何参数。我已将 Ken Perlin 的原始噪声算法实现移植到了 javascript,因此这可能对您有用。您可以在这里找到源代码:https://github.com/lencinhaus/canvas-noise/tree/gh-pages .
希望有帮助,再见!
关于JavaScript 噪声函数问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13589980/