CSS中如何利用柏林噪声绘制炫酷图形！

什么是柏林噪声？

柏林噪声是一种常见的随机噪声，具有很多特性。它是由高斯分布上的随机值组成的二维噪声。它得名于德国柏林，由于其满足平滑、随机、多尺度特性，因此被广泛应用于计算机图形学。

柏林噪声是由一系列定点或浮点二维向量构成的，其中每一个向量都对应一个离散格点上的值。每个向量都是用随机值生成的，这些随机值满足高斯函数的概率分布。这些向量之间的值可以进行线性插值，以生成连续的噪声图形。

如何在CSS中使用柏林噪声？

在CSS中，我们可以使用伪元素:before或:after来应用柏林噪声。首先，我们需要定义一个函数，用于生成柏林噪声。下面是一个用于生成二维柏林噪声的函数：

function noise(x, y) {
  var n = x + y * 57;
  n = (n << 13) ^ n;
  return (1.0 - ((n * (n * n * 15731 + 789221) + 1376312589) & 0x7fffffff) / 1073741824.0);
}

这个函数接受两个参数x和y，返回一个随机值。我们可以使用这个函数生成一个柏林噪声贴图。具体实现步骤如下：

步骤1：创建一个画布

首先，我们需要创建一个canvas元素，并设置它的宽高。在这个例子中，我们将画布的尺寸设置为500x500像素：

canvas {
  width: 500px;
  height: 500px;
}

步骤2：生成柏林噪声

接下来，我们需要在画布上生成柏林噪声。我们可以使用getImageData方法获取画布上的像素数据，并使用putImageData方法将柏林噪声数据写到画布上。下面是生成柏林噪声的代码：

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
var x, y, i;
for (y = 0; y < canvas.height; y++) {
  for (x = 0; x < canvas.width; x++) {
    i = (y * canvas.width + x) * 4;
    data[i] = data[i + 1] = data[i + 2] = noise(x, y) * 255;
    data[i + 3] = 255;
  }
}
ctx.putImageData(imageData, 0, 0);

首先，我们获取了画布上的像素数据，并定义了一个变量data，用于存储柏林噪声数据。接着，我们使用两个嵌套的循环遍历每一个像素，并使用noise函数生成随机值。

在循环中，我们使用了一个i变量来计算当前像素的索引。给每个像素设置了相同的 R、G、B 值，这是因为我们会将噪声数据渲染成灰度图像。设置了像素的 alpha 值为255，这意味着所有的像素都是不透明的。

步骤3：渲染噪声

现在我们已经成功生成了柏林噪声数据，接下来我们需要将它显示在页面上。为了实现这一点，我们可以使用CSS的background-image属性，将一张图片作为网页背景。下面是应用柏林噪声作为背景的代码：

body {
  background-image: url('path/to/canvas.png');
  background-size: cover;
}

我们将生成的柏林噪声数据保存为一张PNG图片，并将这张图片设置为网页的背景。通过调整background-size属性，我们可以让图片自适应整个屏幕。

绘制炫酷图形

现在我们已经了解了如何使用柏林噪声生成随机图形，接下来让我们来看一些示例。

示例1：柏林噪声渐变背景

下面是一种使用柏林噪声生成动态背景的方法：

body {
  background: linear-gradient(360deg, 
        rgba(11, 42, 72, 1) 0%, rgba(0, 212, 255, 1) 100%), 
        url('path/to/gradient-mask.png');
  background-size: cover;
  
  animation: noise-anim 5s infinite linear;
}
@keyframes noise-anim {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(5px, 5px, 0); }
}
/* Gradient mask */
canvas {
  display: none;
}
#gradient-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #000, #fff);
  mix-blend-mode: multiply;
}

在这个示例中，我们在页面中创建了一个隐藏的canvas元素，使用前面提到的方法生成了柏林噪声渐变背景。接着，我们使用linear-gradient属性定义了一种线性渐变，将柏林噪声应用到网页的背景上。我们还使用了CSS动画 noise-anim 来模仿柏林噪声的移动效果。

为了让柏林噪声只出现在背景上，我们需要定义一个渐变遮罩层：

#gradient-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #000, #fff);
  mix-blend-mode: multiply;
}

这个遮罩层是一个渐变背景，它将柏林噪声应用到网页的背景上，并使用mix-blend-mode属性将两者结合在一起。

示例2：柏林噪声动画

柏林噪声不仅可以用作背景纹理，还可以用于创建动画。下面是一个使用CSS和JavaScript实现的动画示例：

.shader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  mix-blend-mode: overlay;
  z-index: 1;
  
  background-image: url('path/to/noise.png');
  animation: noise-anim 5s infinite linear;
}
@keyframes noise-anim {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(5px, 5px, 0); }
}

在代码中，我们声明了一个.shader类，将柏林噪声应用于网页的背景上。我们使用了mix-blend-mode属性，将噪声和背景混合。接着，我们使用了CSS动画noise-anim来模拟柏林噪声的移动效果。

我们还需要在页面中使用JavaScript创建一些CSS变量，以便根据鼠标的位置在网页上创建动态效果：

var root = document.documentElement;
document.addEventListener('mousemove', function(e) {
  var x = e.clientX / window.innerWidth;
  var y = e.clientY / window.innerHeight;
  
  root.style.setProperty('--mouse-x', x);
  root.style.setProperty('--mouse-y', y);
});

我们在这里监听鼠标移动事件，并将鼠标的位置赋值给--mouse-x和--mouse-y CSS变量。接着，我们可以在CSS中使用这些变量，来创建各种动态效果：

.shader::before,
.shader::after {
  content: "";
  position: absolute;
  top: calc(var(--mouse-y, 0) * 100%);
  left: calc(var(--mouse-x, 0) * 100%);
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 50px;
  height: 50px;
  background: radial-gradient(circle, 
              rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 30%);
  border-radius: 50%;
  mix-blend-mode: screen;
}
.shader::after {
  animation: pulse 1s linear infinite;
}
@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  
  100% {
    transform: translate(-50%, -50%) scale(10);
    opacity: 0;
  }
}

在这个示例中，我们使用了::before和::after伪元素，来创建两个白色的圆形元素。这些元素的位置和大小都受--mouse-x和--mouse-y控制，使得它们可以随着鼠标的移动而动态变化。

我们还使用了CSS动画效果，让其中一个圆形元素随着时间的推移不断脉动，从而增强动态效果。

结论

柏林噪声是一种非常有用的工具，可以用于在网页中创建各种动态效果。通过使用:before和:after等CSS伪元素，我们可以将它应用在网页的任何位置，并且可以根据需要使用JavaScript来实现更复杂的动态效果。如果你想了解更多关于柏林噪声的知识，可以参考网上的其它教程和资源。