认识噪声与柏林噪声
柏林噪音简直是画大图的神器！它特别有意思，就像机器里蹦出了野性，给你那种朦胧的自然乱感，而且还给出来0至1内的随机数！跟平时的白噪音不太一样，它稍微规整点儿，看上去顺眼多啦哈哈哈。
生活中有好多东西就像柏林噪音，比如木头的纹路和山坡的高低，这就是因为它们有很多细节，虽然没有完全独立，但还是有些联系。这种画法可以让图片更真实、干净、漂亮！
白噪声与柏林噪声的区别
告诉你个事儿白噪音和柏林噪音做CSS艺术作品时，效果可差远。白噪声画出来的东西，就像是一堆乱七八糟的颜色搅合在一起，真心不咋地好看；可要是换成柏林噪音，就能让每个小方块都有亲密的联系，整个画面看起来就规整多了，也顺眼多了！
你看这黑白噪音图跟柏林噪声图，两者简直差距老大！简单来说，白噪音图让人眼花缭乱，头晕目眩;但柏林噪声图就不一样它表现得丰富多彩，每个方块都紧密相连，像个有趣儿的小天地。
实现方法与应用场景
想要画漂亮图形？用CSS-doodle这个神器就行！比如运用柏林噪音算法，只要给每个格子随机涂上颜色就好，记住要让颜色间有些许联系这样就有独特的效果~
这么说，这款软件不仅仅是做网页设计那么简单，还能搞定艺术创造和动画制作~比如说，你想让网站看上去更酷炫，只需要调整下背景色、画风啥的就行！还有页面翻页时的特效，都能做得超级炫酷
// 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当然，本文不是专门来论述柏林噪声如何实现的，上述代码谁看了都头大。我们只需要知道，我们可以借助柏林噪声去构建更有规律的图形效果。让我们的图形更具美感。
利用 CSS-doodle，在 CSS 中利用柏林噪声
那么，在 CSS 中我们如何去使用柏林噪声呢？
一种方式是找一些现成的库，譬如 p5.js 里面的 noise 函数。
当然，这里，我习惯使用 CSS-doodle，这个 CSS 图形构建库我在多篇文章中已经都有介绍过。
简单而言，CSS-doodle 它是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，并且提供各种便捷的指令及函数（随机、循环等等），让我们能通过一套规则，得到不同 CSS 效果。可以简单看看它的主页 -- Home Page of CSS-doodle，只需要 5min 也许就能快速上手。
譬如上述的图形，它的全部代码：
<css-doodle>
:doodle {
@size: 50vmin;
gap: 1px;
}
background: hsl(@rn(255, 1, 2), @rn(10%, 90%), @rn(10%, 90%));
深入了解柏林噪声算法
你可能没听过柏林噪声，其实这个东西在我们做css图形设计时很有用！它其实就像把网格打乱，让每一个小格子都能够随机获得不一样，但又能产生某种联系的数字。
为提升设计技能？学算法原理，编点小程序就能画出完美的 CSS 图案。这样既能启发创意思维，而且还可以锻炼你的大脑。
应用示例与效果展示
快来学学如何用柏林噪音功能在CSS上画出各种纹理比如在10x10的网格里，每个小格子都随机填上@rn(100)噪音函数的颜色，这样就能看到周围的格子颜色也跟着变化，超神奇滴!
别忘了用CSS-doodle的@rn()调整下样式配合上简单的柏林噪声算法，瞬间就变身为美观还特立独行的图案了！这样学怎么给CSS图形注入艺术元素也轻松多了吧～
探索创意空间与未来发展
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);
};
},
告诉你个超级棒的事儿！用柏林噪声搞CSS画图，可不是闹着玩的！科技越来越牛了，连我们的设计思维也跟着升级！以后，用柏林噪声玩转CSS画图说不定就是大热门！真的是前途不可限量！
: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知识，试得多错得多，找找灵感，真正做项目时就能得心应手！这样很实用！而且还能让你变成设计牛人，拿出惊艳的新作品给大伙看看！
html,
body {
width: 100%;
height: 100%;
background-color: #000;
}
。
原文链接：https://www.icz.com/technicalinformation/web/2024/04/14078.html，转载请注明出处~~~ 
评论0