p5js 中的这个 2D noise() 椭圆有更好的解决方案吗？

【问题标题】：Is there a better solution to this 2D noise() ellipse in p5js?p5js 中的这个 2D noise() 椭圆有更好的解决方案吗？
【发布时间】：2020-11-28 22:50:23
【问题描述】：

我正在尝试找到一种方法来在屏幕上显示一个根据噪音移动的椭圆。然而，即使是 2D，我发现的每个噪声教程也只显示一个输出。我最终不得不更改行之间的noiseSeed()。是否有更好的解决方案，或者即使使用相同的种子也可以提供两个不同值的噪声函数？我用的是 p5.js。

var t = 0;
var t2 = 0;
var t3;
var t4;

function setup() {
  createCanvas(400, 400);
  t3 = random(1000);
  t4 = random(1000);
}

function draw() {
  background(220);
  noiseSeed(t3);
  var x = noise(t);
  noiseSeed(t4);
  var y = noise(t2);
  t += 0.01;
  t2 += 0.01;
  x = map(x, 0, 1, 0, width);
  y = map(y, 0, 1, 0, height);
  ellipse(x, y, 20, 20)
}

【问题讨论】：

标签： javascript p5.js perlin-noise

【解决方案1】：

您可以从相同的 Perlin 种子调用 noise()，但使用不同的值，由某个常数偏移。 x 和 y 不会是独立随机的，但不会很明显。

var x = noise(t);
var y = noise(t + someConstantValue);
t += 0.1;

不幸的是，Perlin 噪声镜像为 0，因此添加到 t 并从 t2 中减去将导致它们相等。

请注意，Perlin 噪声每 256 个坐标重复一次，因此您的常数应该小于该值。在这种情况下，256/2 是距离t 最远的值。

【讨论】：