时间戳

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

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

问题描述

我正在尝试找到一种方法来在屏幕上显示一个根据噪音移动的椭圆。然而，即使是 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)
}

标签： javascriptp5.jsperlin-noise

解决方案

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

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

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

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

推荐阅读