什麼是白噪音？ CSS中如何利用柏林噪音繪製酷炫圖形？以下這篇文章為大家介紹一下利用噪音建立美妙的 CSS 圖形的方法，希望對大家有幫助！
在平常，我非常喜歡利用 CSS 去建立一些有趣的圖形。 【推薦學習：css影片教學】
我們先來看一個簡單的範例。首先，假設我們實作一個 10x10 的格子：
#此時，我們可以利用一些隨機效果，優化這個圖案。譬如，我們給它隨機添加不同的顏色：
雖然利用了隨機，隨機填充了每一個格子的顏色，看著有那麼點意思，但是這只是一幅雜亂無章的圖形，並沒有什麼藝術感。
這是為什麼呢？因為這裡的隨機屬於完全隨機，屬於一種白噪音。
什麼是白噪音？
雜訊（Noise）其實就是一個隨機數產生器。
那麼，什麼是白噪音呢？如果從程式設計師的角度去理解的話，可以理解為我們在 JavaScript 中使用的 random() 函數，產生的數大致在 0~1 內是完全隨機的。
而雜訊的基礎是隨機數，譬如我們為上述的圖形每一個格子添加了一個隨機顏色，得到的就是一幅雜亂無章的圖形塊，沒有太多美感可言。
白噪音或白雜訊，是一種功率頻譜密度為常數的隨機訊號。換句話說，此訊號在各個頻段上的功率譜密度是一樣的，由於白光是由各種頻率（顏色）的單色光混合而成，因而此訊號的這種具有平坦功率譜的性質被稱作是“白色的”，此訊號也因此被稱為白噪聲。
因為，利用白噪音產生的圖形，看起不自然，也不太具備美感。
觀察現實生活中的自然噪聲，它們不會長成上面的樣子。例如木頭的紋理、山脈的起伏，它們的形狀是趨於分形狀（fractal）的，即包含了不同程度的細節，這些隨機的成分並不是完全獨立的，它們之間有一定的關聯。和顯然，白噪聲沒有做到這一點。
柏林噪音
這樣，我們就自然而然的引入了柏林噪音。
Perlin 雜訊 ( Perlin noise ) 指由 Ken Perlin 發明的自然雜訊產生演算法。
在介紹它之前，我們先看看，上述的圖形，如果我們不使用白噪聲（完全隨機），而是使用柏林噪聲，會是什麼樣子呢？
它可能是這樣：
這裡我製作了一張動圖，大家可以感受下，每次點擊都是一次利用了柏林噪聲隨機，賦予每個格子不同隨機顏色的結果：
可以看到，利用柏林噪音隨機效果產生的圖形，彼此之間並非毫無關聯，它們之間的變化是連續的，彼此之間並沒有發生跳變。這種隨機效果，類似自然界中的隨機效果，譬如上面說的，木頭紋理、山脈起伏的變化。
上面說的，雜訊其實就是一個隨機數產生器。而這裡：
白噪音的問題在於，它實在太過於隨機，毫無規律可言
而柏林噪音則是基於隨機，並在此基礎上利用緩動曲線進行平滑插值，使得最終得到噪音效果更加趨於自然
具體的實現方式這裡Improved Noise reference implementation，可以看看，原始碼其實不是很多：
// This code implements the algorithm I describe in a corresponding SIGGRAPH 2002 paper.
// JAVA REFERENCE IMPLEMENTATION OF IMPROVED NOISE - COPYRIGHT 2002 KEN PERLIN.
public final class ImprovedNoise {
static public double noise(double x, double y, double z) {
int X = (int)Math.floor(x) & 255, // FIND UNIT CUBE THAT
Y = (int)Math.floor(y) & 255, // CONTAINS POINT.
Z = (int)Math.floor(z) & 255;
x -= Math.floor(x); // FIND RELATIVE X,Y,Z
y -= Math.floor(y); // OF POINT IN CUBE.
z -= Math.floor(z);
double u = fade(x), // COMPUTE FADE CURVES
v = fade(y), // FOR EACH OF X,Y,Z.
w = fade(z);
int A = p[X ]+Y, AA = p[A]+Z, AB = p[A+1]+Z, // HASH COORDINATES OF
B = p[X+1]+Y, BA = p[B]+Z, BB = p[B+1]+Z; // THE 8 CUBE CORNERS,
return lerp(w, lerp(v, lerp(u, grad(p[AA ], x , y , z ), // AND ADD
grad(p[BA ], x-1, y , z )), // BLENDED
lerp(u, grad(p[AB ], x , y-1, z ), // RESULTS
grad(p[BB ], x-1, y-1, z ))),// FROM 8
lerp(v, lerp(u, grad(p[AA+1], x , y , z-1 ), // CORNERS
grad(p[BA+1], x-1, y , z-1 )), // OF CUBE
lerp(u, grad(p[AB+1], x , y-1, z-1 ),
grad(p[BB+1], x-1, y-1, z-1 ))));
}
static double fade(double t) { return t * t * t * (t * (t * 6 - 15) + 10); }
static double lerp(double t, double a, double b) { return a + t * (b - a); }
static double grad(int hash, double x, double y, double z) {
int h = hash & 15; // CONVERT LO 4 BITS OF HASH CODE
double u = h<p>當然，本文不是專門來論述<strong>柏林噪音</strong>如何實現的，上述程式碼誰看了都頭大。我們只需要知道，我們可以藉助柏林噪音去建構更規律的圖形效果。讓我們的圖形更具美感。 </p><h2 id="利用-CSS-doodle-在-CSS-中利用柏林噪音">利用 CSS-doodle，在 CSS 中利用柏林噪音</h2><p>那麼，在 CSS 中我們如何去使用<strong>柏林噪音</strong>呢？ </p><p>一种方式是找一些现成的库，譬如 p5.js 里面的 <code>noise</code> 函数。</p><p>当然，这里，我习惯使用 <a href="https://css-doodle.com/" target="_blank">CSS-doodle</a>，这个 CSS 图形构建库我在多篇文章中已经都有介绍过。</p><p>简单而言，CSS-doodle 它是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，并且提供各种便捷的指令及函数（随机、循环等等），让我们能通过一套规则，得到不同 CSS 效果。可以简单看看它的主页 -- <a href="https://css-doodle.com/" target="_blank">Home Page of CSS-doodle</a>，只需要 5min 也许就能快速上手。</p><p>譬如上述的图形，<strong>它的全部代码</strong>：</p><pre class="brush:php;toolbar:false"><css-doodle>
:doodle {
@size: 50vmin;
gap: 1px;
}
background: hsl(@rn(255, 1, 2), @rn(10%, 90%), @rn(10%, 90%));
</css-doodle>没错，只需要这么寥寥几句，就可以勾勒出这样一幅图案：
CSS Pattern -- CSS Doodle
https://codepen.io/Chokcoco/pen/eYMNWNq
简单解释下：
css-doodle是基于 Web-Component 封装的，基本所有的代码都写在<css-doodle></css-doodle>标签内，当然也可以写一些原生 CSS/JavaScript 辅助使用
grid="10x10"即可生成一个 10x10 的 Grid 网格，再配合@size: 50vmin，表示生成一个宽高大小为50vmin的 10x10 Grid 网格布局，其中gap: 1px表示 Gird 网格布局的 gap最后，整个代码的核心部分即是
background: hsl(@rn(255, 1, 2), @rn(10%, 90%), @rn(10%, 90%))，这里即表示对每个 grid item 赋予背景色，其中@rn()，就是最核心的部分，利用了柏林噪声算法，有规律的将背景色 map 到每一个 grid 上
当然，最新的 CSS-doodle 文档上暂时还查不到 @rn() function 的用法。为此我特意请教了下该库的作者袁川老师。
得到的回复是，官网近期会重构，所以目前没有更新最新的语法。同时，@rn() 的实现使用的就是柏林噪声的实现。同时，函数相当于是类似 p5.js 里面的 noise 函数同时做了 map，map 到前面函数参数设定的 from 到 to 范围内。
这里的 @rn() 柏林噪声随机会根据 Grid 网格，Map 到每一个网格上，使之相邻的 Grid item 之间的值，存在一定的关联。
举个栗子，我们有个 10x10 的 Grid 布局，给其每个 Grid item，添加一个伪元素，伪元素的内容，使用 @r(100) 进行填充，注意，@r() 函数是没有规律的完全随机，那么生成的数字大概是这样的：
可以看到，它们每个各自之间的数字，是完全随机毫无关联的。
如果我们使用有关联的柏林噪声随机呢？使用 @rn(100) 填充每个格子的话，大概是这样：
观察一下，很容易发现，相邻的盒子之间，或者多个连续的格子之间，存在一定的关联性，这就使得，我们利用它创造出来的图形，会具备一定的规律。
可以简单看看源码的实现，当前，前提是你需要对 CSS-doodle 的用法有一定的了解：
rn({ x, y, context, position, grid, extra, shuffle }) {
let counter = 'noise-2d' + position;
let [ni, nx, ny, nm, NX, NY] = last(extra) || [];
let isSeqContext = (ni && nm);
return (...args) => {
let {from = 0, to = from, frequency = 1, amplitude = 1} = get_named_arguments(args, [
'from', 'to', 'frequency', 'amplitude'
]);
if (args.length == 1) {
[from, to] = [0, from];
}
if (!context[counter]) {
context[counter] = new Perlin(shuffle);
}
frequency = clamp(frequency, 0, Infinity);
amplitude = clamp(amplitude, 0, Infinity);
let transform = [from, to].every(is_letter) ? by_charcode : by_unit;
let t = isSeqContext
? context[counter].noise((nx - 1)/NX * frequency, (ny - 1)/NY * frequency, 0)
: context[counter].noise((x - 1)/grid.x * frequency, (y - 1)/grid.y * frequency, 0);
let fn = transform((from, to) => map2d(t * amplitude, from, to, amplitude));
let value = fn(from, to);
return push_stack(context, 'last_rand', value);
};
},
语法大概是 @rn(from, to, frequency, amplitude)，其中 from、to 表示随机范围，而 frequency 表示噪声的频率，amplitude 表示噪声的振幅。这两个参数可以理解为控制随机效果的频率和幅度。
其中 new Perlin(shuffle) 即运用到了柏林噪声算法。
Show Time
OK，上文介绍了很多与噪声和 CSS-doodle 相关的知识，下面我们回归 CSS，回归本文的主体。
在上述图形的基础上，我们可以再添加上随机的 scale()、以及 skew()。如果是完全随机的话，代码是这样的：
<css-doodle>
:doodle {
grid-gap: 1px;
width: 600px; height: 600px;
}
background: hsl(@r(360), 80%, 80%);
transform:
scale(@r(1.1, .3, 3))
skew(@r(-45deg, 45deg, 3));
</css-doodle>
html,
body {
width: 100%;
height: 100%;
background-color: #000;
}
上述代码表示的是一个 20x20 的 Grid 网格，每个 Grid item 都设置了完全随机的背景色、scale() 以及 skew()。当然，这里我们用的是 @r()而不是 @rn()，每个格子的每个属性的随机，没有任何的关联，那么我们会得到这样一幅图案：
好吧，这是什么鬼，毫无美感可言。我们只需要在上述代码的基础上，将普通的完全随机，改为柏林噪声随机 @rn()：
<css-doodle>
:doodle {
grid-gap: 1px;
width: 600px; height: 600px;
}
background: hsl(@rn(360), 80%, 80%);
transform:
scale(@rn(1.1, .3, 3))
skew(@rn(-45deg, 45deg, 3));
</css-doodle>
此时，就能得到完全不一样的效果：
这是由于，每个 Grid item 的随机效果，都基于它们在 Grid 布局中的位置，彼此存在关联，这就是柏林噪声随机的效果。
我可以再添加上 hue-rotate 动画：
html,
body {
width: 100%;
height: 100%;
background-color: #000;
animation: change 10s linear infinite;
}
@keyframes change {
10% {
filter: hue-rotate(360deg);
}
}
看看效果，并且，在 CSS-doodle 中，由于随机效果，每次刷新，都可以得到不一样的图案：
CSS Doodle - CSS Pattern2
https://codepen.io/Chokcoco/pen/mdxJrGR
当然，这个样式还可以搭配各式各样其他的 idea，像是这样：
CSS Doodle - CSS Pattern 3
https://codepen.io/Chokcoco/pen/wvmazOy
又或者是这样：
CSS Doodle - CSS Pattern 4
https://codepen.io/Chokcoco/pen/dymoOGN
emmm，又或者这样：
CSS Doodle - CSS Pattern 5
https://codepen.io/Chokcoco/pen/PoRqdYP
是的，我们可以把柏林噪声随机应用在各种属性上，我们可以放飞想象，去尝试各种不一样的搭配。下面这个， 就是把柏林噪声运用在点阵定位上：
<css-doodle>
:doodle {
@size: 90vmin;
perspective: 10px;
}
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 2px;
border-radius: 50%;
top: @rn(1%, 100%, 1.5);
left: @rn(1%, 100%, 1.5);
transform: scale(@rn(.1, 5, 2));
background: hsl(@rn(1, 255, 3), @rn(10%, 90%), @rn(10%, 90%));
</css-doodle>
CodePen Demo -- CSS Doodle - CSS Pattern6
https://codepen.io/Chokcoco/pen/GRxJXVE
亦或者配合运用在 transform: rotate() 上：
<css-doodle>
@place-cell: center;
@size: calc(@i * 1.5%);
:doodle {
width: 60vmin;
height: 60vmin;
}
z-index: calc(999 - @i);
border-radius: 50%;
border: 1px @p(dashed, solid, double) hsl(@rn(255), 70%, @rn(60, 90%));
border-bottom-color: transparent;
border-left-color: transparent;
transform:
rotate(@rn(-720deg, 720deg))
scale(@rn(.8, 1.2, 3));
</css-doodle>
效果如下：
当然，每一次随机，都会是不一样的结果：
CodePen Demo -- CSS doodle - CSS Pattern7
https://codepen.io/Chokcoco/pen/ZExGjoy
好吧，我个人想象力有限，大家可以自行找到任一 DEMO，Fork 后自己去尝试碰撞出不一样的火花。
原文地址：https://segmentfault.com/a/1190000042103702
作者：chokcoco
（学习视频分享：web前端入门）
以上是聊聊CSS中如何利用柏林噪音繪製酷炫圖形！的詳細內容。更多資訊請關注PHP中文網其他相關文章！
光標的下一個CSS樣式Apr 23, 2025 am 11:04 AM具有CSS的自定義光標很棒，但是我們可以將JavaScript提升到一個新的水平。使用JavaScript，我們可以在光標狀態之間過渡，將動態文本放置在光標中，應用複雜的動畫並應用過濾器。
世界碰撞：使用樣式查詢的鑰匙幀碰撞檢測Apr 23, 2025 am 10:42 AM互動CSS動畫和元素相互啟動的元素在2025年似乎更合理。雖然不需要在CSS中實施乒乓球，但CSS的靈活性和力量的增加，可以懷疑Lee＆Aver Lee有一天會成為一種
使用CSS背景過濾器進行UI效果Apr 23, 2025 am 10:20 AM有關利用CSS背景濾波器屬性來樣式用戶界面的提示和技巧。您將學習如何在多個元素之間進行背景過濾器，並將它們與其他CSS圖形效果集成在一起以創建精心設計的設計。
微笑嗎？Apr 23, 2025 am 09:57 AM好吧，事實證明，SVG的內置動畫功能從未按計劃進行棄用。當然，CSS和JavaScript具有承載負載的能力，但是很高興知道Smil並沒有像以前那樣死在水中
'漂亮”在情人眼中Apr 23, 2025 am 09:40 AM是的，讓＃039;跳上文字包裝：Safari Technology Preview In Pretty Landing！但是請注意，它與在鉻瀏覽器中的工作方式不同。
CSS-tricks編年史XLIIIApr 23, 2025 am 09:35 AM此CSS-tricks更新了，重點介紹了年鑑，最近的播客出現，新的CSS計數器指南以及增加了幾位新作者，這些新作者貢獻了有價值的內容。
tailwind的@Apply功能比聽起來更好Apr 23, 2025 am 09:23 AM在大多數情況下，人們展示了@Apply的@Apply功能，其中包括Tailwind的單個property實用程序之一（會改變單個CSS聲明）。當以這種方式展示時，@Apply聽起來似乎很有希望。如此明顯
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
Atom編輯器mac版下載
最受歡迎的的開源編輯器
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
