噪声生成混沌优雅的背景动画

2023-10-27 04:45:11

让我们用噪声来生成混沌优雅的背景动画。

首先，创建一个 HTML 文件和一个 JavaScript 文件。在 HTML 文件中，包含 JavaScript 文件并创建一个画布元素。

<!DOCTYPE html>
<html>
<head>
  
  <script src="script.js"></script>
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

在 JavaScript 文件中，首先创建一个画布的上下文对象。然后，使用 noise() 函数生成一个二维噪声数组。噪声函数的第一个参数是噪声的频率，第二个参数是噪声的种子。频率值越大，噪声越粗糙。种子值可以是任何数字，它将决定噪声的模式。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const noise = [];
for (let i = 0; i < canvas.width; i++) {
  noise[i] = [];
  for (let j = 0; j < canvas.height; j++) {
    noise[i][j] = noise.noise(i / 100, j / 100);
  }
}

接下来，创建一个动画循环。动画循环将不断地更新画布，从而产生动画效果。在动画循环中，首先使用 clearRect() 函数清除画布。然后，使用 fillStyle 属性设置画布的填充颜色。最后，使用 fillRect() 函数在画布上绘制一个矩形。矩形的左上角坐标是 (0, 0)，宽高都是 canvas.width 和 canvas.height。

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < canvas.width; i++) {
    for (let j = 0; j < canvas.height; j++) {
      const x = i + noise[i][j] * 100;
      const y = j + noise[i][j] * 100;
      ctx.fillStyle = 'white';
      ctx.fillRect(x, y, 1, 1);
    }
  }

  requestAnimationFrame(animate);
}

animate();