可视化之粒子风场：用Perlin噪声绘制自然风场

前端

2023-09-06 23:30:16

利用 Perlin 噪声描绘出大自然的风场

在计算机图形学领域，Perlin 噪声作为一种基于梯度的连续随机函数，以其产生连续、逼真随机数的能力而备受推崇。它在图形学中发挥着至关重要的作用，可广泛应用于风场、火焰、云朵和地形等元素的生成。

Perlin 噪声的运作原理

Perlin 噪声的工作原理十分简洁。它首先建立一个包含随机数的网格，再利用这些数字创建梯度向量。最后，这些向量用于计算出每个点的噪声值。该值介于 0 到 1 之间，反映了该点的随机性。

用 Perlin 噪声绘制风场

借助 Perlin 噪声，我们可以创建粒子系统，这些粒子将随风场而动。首先，创建一个粒子系统。随后，使用 Perlin 噪声计算每个粒子的速度。最后，更新粒子位置即可。

代码示例

以下是利用 Perlin 噪声绘制风场的代码示例：

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();
  fill(255);
  noiseDetail(8);
}

function draw() {
  background(0);

  // 创建粒子系统
  let particles = [];
  for (let i = 0; i < 100; i++) {
    particles.push(new Particle());
  }

  // 使用Perlin噪声来计算每个粒子的速度
  for (let i = 0; i < particles.length; i++) {
    let particle = particles[i];
    let noiseX = particle.x / width;
    let noiseY = particle.y / height;
    let noiseValue = noise(noiseX, noiseY);
    let angle = noiseValue * TWO_PI;
    let speed = noiseValue * 5;
    particle.vx = cos(angle) * speed;
    particle.vy = sin(angle) * speed;
  }

  // 更新粒子的位置
  for (let i = 0; i < particles.length; i++) {
    let particle = particles[i];
    particle.x += particle.vx;
    particle.y += particle.vy;

    // 检查粒子是否超出边界
    if (particle.x < 0 || particle.x > width || particle.y < 0 || particle.y > height) {
      particle.x = random(width);
      particle.y = random(height);
    }
  }

  // 绘制粒子
  for (let i = 0; i < particles.length; i++) {
    let particle = particles[i];
    ellipse(particle.x, particle.y, 5, 5);
  }
}

// 粒子类
class Particle {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.vx = 0;
    this.vy = 0;
  }
}